============================================================================ */ :root { --accent: #f5d442; /* broadcast yellow */ --accent-fg: #0c0c0e; /* text colour that reads on the accent */ --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent); --accent-dim: color-mix(in srgb, var(--accent) 50%, transparent); } /* ============================================================================ Layer 2 — theme tokens (dark) The mockup defaults. Hard blacks, near-blacks for surface, mid-greys for muted body text. Hairlines are intentionally low-contrast so they read as structure, not lines. ============================================================================ */ [data-theme="dark"] { --bg: #0a0a0c; --surface: #131418; --surface-raised: #1c1d22; --hairline: #2a2c33; --hairline-strong: #3a3d46; --fg: #f4f4f6; --fg-muted: #a8a9b0; --fg-dim: #6e6f76; /* Semantic colours — kept independent of the brand accent so warnings, danger, etc. stay legible regardless of which tenant colour is in use. */ --semantic-danger: #ff6258; --semantic-warning: #f5a623; --semantic-success: #5dd97c; --semantic-info: #6dd0ff; } /* ============================================================================ Layer 2 — theme tokens (light) Inverted but not pure white — broadcast aesthetic stays even in light mode. Surface is warm off-white so KPI cards still read as paper-on-page. ============================================================================ */ [data-theme="light"] { --bg: #f7f6f1; --surface: #ffffff; --surface-raised: #ffffff; --hairline: #d6d4cc; --hairline-strong: #b6b4ab; --fg: #16161a; --fg-muted: #5a5a60; --fg-dim: #8a8a90; --semantic-danger: #d23a30; --semantic-warning: #c47a00; --semantic-success: #2e8a4c; --semantic-info: #1f7dc4; } /* ============================================================================ Body baseline. Setting type + bg here means every page starts in the right place without each component re-declaring the basics. ============================================================================ */ body { background: var(--bg); color: var(--fg); font-family: var(--type-body); font-size: var(--fs-body); font-weight: var(--weight-regular); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================ Display-type utilities. Use the .cm-display class on headlines that should read as broadcast titles. Tabular data (KPI values, dues, attendance %) should use .cm-data so digits align column-wise. ============================================================================ */ .cm-display { font-family: var(--type-display); font-weight: var(--weight-regular); letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.95; } .cm-data { font-family: var(--type-data); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'ss01' 1; } /* ============================================================================ Hairline + eyebrow utilities — match the mockup's section dividers and "ACTIVE TEAMS / MEMBERS / DUES YTD" labels. ============================================================================ */ .cm-rule { border: 0; border-top: var(--rule-thickness) solid var(--hairline); margin: var(--space-5) 0; } .cm-rule--bold { border-top-width: var(--rule-thickness-bold); border-top-color: var(--hairline-strong); } .cm-eyebrow { font-family: var(--type-body); font-size: var(--fs-micro); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); } /* ============================================================================ Section / row layout utilities. Section is the spacing rhythm; rows compose multiple sections side-by-side on wide viewports and stack on narrow. ============================================================================ */ .cm-section { margin-top: var(--space-6); min-width: 0; } .cm-section:first-of-type { margin-top: 0; } .cm-row { display: grid; gap: var(--space-6); margin-top: var(--space-6); min-width: 0; } .cm-row--two { grid-template-columns: 1fr 1.2fr; } .cm-row--three { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 980px) { .cm-row--two, .cm-row--three { grid-template-columns: 1fr; } } .cm-row > .cm-section { margin-top: 0; } .cm-club-scope { /* Wrapper that any club-scoped page can put around its content to inherit the club's accent override. The override is applied inline via style="--accent: ..."; this class exists so future hooks (logo strip, brand banner) have a clean attachment point. */ min-width: 0; } .cm-empty { padding: var(--space-5); border: 1px dashed var(--hairline); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 4%, transparent); color: var(--fg-muted); font-size: var(--fs-caption); text-align: center; } .cm-empty a { color: var(--accent); font-weight: var(--weight-semibold); } /* Set-by-set match editor — compact table where each row binds to a SetRow numeric pair. */ .cm-set-editor { width: 100%; border-collapse: collapse; } .cm-set-editor th { text-align: left; font-size: 0.8125rem; font-weight: var(--weight-semibold, 600); color: var(--rz-text-secondary-color, var(--fg-muted)); padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--hairline); } .cm-set-editor td { padding: 0.25rem 0.5rem; vertical-align: middle; } .cm-set-editor tr + tr td { border-top: 1px solid var(--hairline); } /* Per-player match stat grid — wide table (1 name column + N stat columns). Wrapper handles horizontal overflow on small viewports; the player column stays sticky-left so the coach can scroll the stats without losing context. */ .cm-stat-grid-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); } .cm-stat-grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .cm-stat-grid th, .cm-stat-grid td { padding: 0.5rem 0.5rem; text-align: center; vertical-align: middle; white-space: nowrap; } .cm-stat-grid thead th { background: var(--surface-2, color-mix(in srgb, var(--accent) 4%, transparent)); border-bottom: 1px solid var(--hairline); font-weight: var(--weight-semibold, 600); color: var(--fg-muted); } .cm-stat-grid tbody tr + tr td { border-top: 1px solid var(--hairline); } .cm-stat-grid__player { text-align: left !important; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 200px; border-right: 1px solid var(--hairline); } .cm-stat-grid thead .cm-stat-grid__player { background: var(--surface-2, color-mix(in srgb, var(--accent) 4%, transparent)); } .cm-stat-grid__player-name { font-weight: var(--weight-semibold, 600); } .cm-stat-grid__player-meta { font-size: 0.75rem; color: var(--fg-muted); } .cm-stat-grid__sort { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; text-align: inherit; } .cm-stat-grid__sort:hover { color: var(--accent); } /* Match result card — the read-only "headline" rendered on EventDetail for Game events. Two side-by-side score columns with the opponent's name and big numeric score, an optional set-by-set table underneath, then meta badges + notes. */ .cm-match-card { display: flex; flex-direction: column; gap: 1rem; } .cm-match-card__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .cm-match-card__side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; } .cm-match-card__label { color: var(--fg-muted); } .cm-match-card__name { font-weight: var(--weight-semibold, 600); font-size: 1.0625rem; } .cm-match-card__score { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--fg); } .cm-match-card__divider { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); align-self: center; } .cm-match-card__result { display: flex; justify-content: center; } .cm-match-card__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .cm-match-card__notes { border-top: 1px solid var(--hairline); padding-top: 0.75rem; font-size: 0.9375rem; } /* Set-by-set table on the result card — compact and centred so the eye reads score pairs vertically (us above, them below). The winning side per set gets a subtle bold cue. */ .cm-set-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .cm-set-table th, .cm-set-table td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid var(--hairline); } .cm-set-table thead th { color: var(--fg-muted); font-size: 0.8125rem; font-weight: var(--weight-semibold, 600); } .cm-set-table tbody th { text-align: left; font-weight: var(--weight-semibold, 600); color: var(--fg); } .cm-set-table__win { font-weight: 700; color: var(--accent); } /* Top performers — one card per marquee stat category, three rows of player+value inside each. Cards lay out in a responsive grid; collapse to stacked on narrow viewports rather than scrolling, since there are only three of them. */ .cm-top-performers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .cm-top-performers__column { padding: 1rem; } .cm-top-performers__list { list-style: none; counter-reset: rank; padding: 0; margin: 0.5rem 0 0; } .cm-top-performers__list li { counter-increment: rank; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--hairline); } .cm-top-performers__list li:last-child { border-bottom: 0; } .cm-top-performers__list li::before { content: counter(rank) "."; flex: 0 0 auto; color: var(--fg-muted); font-size: 0.8125rem; width: 1.25rem; } .cm-top-performers__name { flex: 1 1 auto; font-weight: var(--weight-semibold, 600); } .cm-top-performers__value { flex: 0 0 auto; font-weight: 700; color: var(--accent); font-size: 1.0625rem; } /* Recent results table on TeamDashboard — compact row per past game, click on the opponent name to open the event detail (which now carries the full score card). */ .cm-recent-results { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .cm-recent-results td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--hairline); } .cm-recent-results tr:last-child td { border-bottom: 0; } .cm-recent-results__result { width: 48px; text-align: center; } .cm-recent-results__opponent { font-weight: var(--weight-semibold, 600); } .cm-recent-results__link { color: inherit; text-decoration: none; } .cm-recent-results__link:hover { color: var(--accent); } .cm-recent-results__tournament { font-weight: 400; color: var(--fg-muted); } .cm-recent-results__score { color: var(--fg-muted); font-variant-numeric: tabular-nums; } .cm-recent-results__when { text-align: right; color: var(--fg-muted); width: 80px; }