/*
* ============================================================
* XALLENGER — Typography System
* File: wwwroot/css/xal-typography.css
*
* Standardised text styles for all UI roles across the
* Boxing Event Management application.
*
* Depends on: xal-tokens.css (must be imported first)
*
* All sizes are defined as CSS custom properties so that a
* single @media breakpoint at the bottom of this file can
* scale every role up for desktop without any per-component
* overrides.
*
* Import order in index.html / _Host.cshtml:
*
*
*
*
* Usage (Blazor razor / HTML):
*
Dashboard
*
Season overview · Spring 2025
*
*
*
*
Upcoming Shows
*
*
…
*
*
* 142
* Boxers
* ============================================================
*/
/* =============================================================
0. TYPOGRAPHY SCALE TOKENS
Local custom properties that the @media block at the
bottom overrides for desktop. All type classes below
consume these vars — nowhere else needs to change.
============================================================= */
:root {
/* ── Mobile scale (default / base) ── */
--xal-t-page-title-size: 15px; /* Page / route heading */
--xal-t-page-title-weight: 800;
--xal-t-page-title-tracking: 0.01em;
--xal-t-page-title-leading: 1.25;
--xal-t-section-title-size: 13px; /* Section / area heading (h2) */
--xal-t-section-title-weight: 700;
--xal-t-section-title-tracking:0.01em;
--xal-t-section-title-leading:1.3;
--xal-t-card-title-size: 9px; /* Card / panel header — ALL CAPS */
--xal-t-card-title-weight: 700;
--xal-t-card-title-tracking: 0.08em;
--xal-t-overline-size: 10px; /* Eyebrow / category label */
--xal-t-overline-weight: 700;
--xal-t-overline-tracking: 0.10em;
--xal-t-body-size: 11px; /* Default body copy */
--xal-t-body-weight: 400;
--xal-t-body-leading: 1.55;
--xal-t-body-strong-weight: 600; /* Emphasised body copy */
--xal-t-label-size: 10px; /* Form labels, meta info */
--xal-t-label-weight: 600;
--xal-t-label-tracking: 0.03em;
--xal-t-caption-size: 11px; /* Supporting / helper text */
--xal-t-caption-weight: 400;
--xal-t-caption-leading: 1.4;
--xal-t-kpi-value-size: 22px; /* Large stat / KPI number */
--xal-t-kpi-value-weight: 800;
--xal-t-kpi-value-leading: 1;
--xal-t-kpi-label-size: 9px; /* Stat descriptor beneath value */
--xal-t-kpi-label-weight: 700;
--xal-t-kpi-label-tracking: 0.08em;
--xal-t-badge-size: 9px; /* Inline status chips / badges — floor for legibility */
--xal-t-badge-weight: 700;
--xal-t-badge-tracking: 0.05em;
}
/* =============================================================
1. PAGE TITLE (.xal-page-title)
Top-level route / page heading.
Example: "Dashboard", "Shows", "Event Manager"
============================================================= */
.xal-page-title {
font-family: var(--xal-font-family);
font-size: var(--xal-t-page-title-size);
font-weight: var(--xal-t-page-title-weight);
letter-spacing: var(--xal-t-page-title-tracking);
line-height: var(--xal-t-page-title-leading);
color: var(--xal-text-primary);
margin: 0;
/* Prevent runaway widths when used inside flex/grid parents */
min-width: 0;
}
/* Variant: gold accent page title (used for event/show names) */
.xal-page-title--gold {
color: var(--xal-gold);
}
/* Variant: with a red left-border accent */
.xal-page-title--accented {
padding-left: 10px;
border-left: 3px solid var(--xal-red);
}
/* Variant: hero size — for a page's single most prominent title
(e.g. the event name in the Event Manager header). Same treatment
as the public Show Details page's title (.sp-detail-title). */
.xal-page-title--hero {
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.15;
}
/* =============================================================
2. PAGE SUBTITLE (.xal-page-subtitle)
Supporting line directly below a page title.
Example: "Season overview · Spring 2025", "All sanctioned events"
============================================================= */
.xal-page-subtitle {
font-family: var(--xal-font-family);
font-size: var(--xal-t-label-size);
font-weight: var(--xal-t-body-weight);
letter-spacing: var(--xal-t-label-tracking);
line-height: 1.4;
color: var(--xal-text-primary);
margin: 0;
}
/* =============================================================
2b. KICKER (.xal-kicker)
Small gold pill label sitting above a page or section
title. Shared by public pages and the event manager.
Example: "Find your next fight", "Results", "Event Manager"
============================================================= */
.xal-kicker {
display: inline-flex;
align-items: center;
width: max-content;
padding: 6px 10px;
border: 1px solid var(--xal-gold-border);
border-radius: var(--xal-radius-pill);
background: var(--xal-gold-muted);
color: var(--xal-gold);
font-size: var(--xal-font-xs);
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
/* =============================================================
3. SECTION TITLE (.xal-section-title)
Sub-area / grouped-content heading (h2-level).
Example: "Upcoming Shows" inside a dashboard card,
"Bout Assignment" inside a detail panel.
============================================================= */
.xal-section-title {
font-family: var(--xal-font-family);
font-size: var(--xal-t-section-title-size);
font-weight: var(--xal-t-section-title-weight);
letter-spacing: var(--xal-t-section-title-tracking);
line-height: var(--xal-t-section-title-leading);
color: var(--xal-text-primary);
margin: 0;
min-width: 0;
}
/* Variant: muted secondary section title */
.xal-section-title--secondary {
color: var(--xal-text-secondary);
}
/* =============================================================
4. CARD TITLE (.xal-card-title)
Header text inside a card / panel surface.
Always uppercase, tight tracking — matches "UPCOMING SHOWS",
"RECENT ACTIVITY", "SHOWS LIST" in the demo.
============================================================= */
.xal-card-title {
font-size: var(--xal-font-lg);
font-weight: 700;
color: var(--xal-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1.2;
margin: 0;
}
/* Variant: gold card title (active / selected card header) */
.xal-card-title--gold {
color: var(--xal-gold);
}
/* Variant: muted card title (secondary panels) */
.xal-card-title--muted {
color: var(--xal-text-muted);
}
.xal-card-title--red {
color: var(--xal-red);
}
.xal-card-title--blue {
color: var(--xal-blue);
}
.xal-card-subtitle {
font-size: var(--xal-font-md);
color: var(--xal-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.xal-card-subtitle--bold {
font-size: var(--xal-font-md);
color: var(--xal-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-weight: var(--xal-t-body-strong-weight);
}
.xal-card-subtitle--gold {
color: var(--xal-gold);
}
/* Variant: muted card title (secondary panels) */
.xal-card-subtitle--muted {
color: var(--xal-text-muted);
}
.xal-text-bold {
font-weight: var(--xal-t-body-strong-weight);
color: var(--xal-text-primary);
}
.xal-text-underline{
text-decoration: underline;
}
.xal-text-strikethrough{
text-decoration:line-through;
}
.xal-text-uppercase {
text-transform: uppercase;
}
/* =============================================================
5. OVERLINE (.xal-overline)
Eyebrow / category label above a heading or group.
Example: "MAIN", "ADMIN" in the sidenav;
"BOXING PROFILE" as a form section label.
============================================================= */
.xal-overline {
font-family: var(--xal-font-family);
font-size: var(--xal-t-overline-size);
font-weight: var(--xal-t-overline-weight);
letter-spacing: var(--xal-t-overline-tracking);
text-transform: uppercase;
line-height: 1.3;
color: var(--xal-text-muted);
margin: 0;
}
/* Variant: gold overline (active context / current section) */
.xal-overline--gold {
color: var(--xal-gold);
}
/* =============================================================
6. BODY TEXT (.xal-body)
Default running copy inside cards, lists, detail panels.
============================================================= */
.xal-body {
font-family: var(--xal-font-family);
font-size: var(--xal-t-body-size);
font-weight: var(--xal-t-body-weight);
line-height: var(--xal-t-body-leading);
color: var(--xal-text-secondary);
margin: 0;
}
/* Variant: primary-coloured body text (names, titles in lists) */
.xal-body--primary {
color: var(--xal-text-primary);
}
.xal-bold {
font-weight: var(--xal-t-page-title-weight);
}
/* Variant: bold body copy (emphasised list rows) */
.xal-body--strong {
font-weight: var(--xal-t-body-strong-weight);
color: var(--xal-text-primary);
}
/* Variant: muted body text (supplementary info) */
.xal-body--muted {
color: var(--xal-text-muted);
}
/* =============================================================
7. LABEL (.xal-label)
Form field labels, column headers, meta-info rows.
Example: "First Name", "Weight (lbs)", "Coach"
============================================================= */
.xal-label {
font-family: var(--xal-font-family);
font-size: var(--xal-t-label-size);
font-weight: var(--xal-t-label-weight);
letter-spacing: var(--xal-t-label-tracking);
line-height: 1.3;
color: var(--xal-text-muted);
margin: 0;
display: block; /* labels are block by default for form use */
}
/* Inline variant for meta-info spans */
.xal-label--inline {
display: inline;
}
/* Variant: required field marker support */
.xal-label__required {
color: var(--xal-red-bright);
font-size: 8px;
vertical-align: super;
margin-left: 2px;
}
/* =============================================================
8. CAPTION (.xal-caption)
Helper text, hints, timestamps, secondary meta.
Example: "Portland Boxing Club · Coach: Ray Gutierrez"
============================================================= */
.xal-caption {
font-family: var(--xal-font-family);
font-size: var(--xal-t-caption-size);
font-weight: var(--xal-t-caption-weight);
line-height: var(--xal-t-caption-leading);
color: var(--xal-text-muted);
margin: 0;
}
/* Variant: slightly brighter caption */
.xal-caption--secondary {
color: var(--xal-text-secondary);
}
/* =============================================================
9. KPI VALUE (.xal-kpi-value)
Large gold stat number used in dashboard metric tiles
and detail panel summaries.
Example: "8", "142", "68", "3–1" (record)
============================================================= */
.xal-kpi-value {
font-family: var(--xal-font-family);
font-size: var(--xal-t-kpi-value-size);
font-weight: var(--xal-t-kpi-value-weight);
line-height: var(--xal-t-kpi-value-leading);
color: var(--xal-gold);
margin: 0;
/* Prevent digits from causing layout shift */
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* Variant: white KPI value (neutral, non-highlighted stats) */
.xal-kpi-value--neutral {
color: var(--xal-text-primary);
}
/* Variant: red KPI (warning / critical stats) */
.xal-kpi-value--danger {
color: var(--xal-red-bright);
}
/* Variant: green KPI (positive outcomes) */
.xal-kpi-value--success {
color: var(--xal-status-open);
}
/* =============================================================
10. KPI LABEL (.xal-kpi-label)
Descriptor text sitting beneath a KPI value.
Example: "SHOWS", "BOXERS", "BOUTS", "RECORD"
============================================================= */
.xal-kpi-label {
font-family: var(--xal-font-family);
font-size: var(--xal-t-kpi-label-size);
font-weight: var(--xal-t-kpi-label-weight);
letter-spacing: var(--xal-t-kpi-label-tracking);
text-transform: uppercase;
line-height: 1.3;
color: var(--xal-text-muted);
margin: 0;
}
/* =============================================================
11. BADGE / STATUS CHIP TEXT (.xal-badge-text)
Text inside inline status chips and count badges.
Example: "Matched", "Confirmed", "Draw Set"
============================================================= */
.xal-badge-text {
font-family: var(--xal-font-family);
font-size: var(--xal-t-badge-size);
font-weight: var(--xal-t-badge-weight);
letter-spacing: var(--xal-t-badge-tracking);
text-transform: uppercase;
line-height: 1;
}
/* =============================================================
12. CONVENIENCE COMPOSITION — .xal-page-header
A wrapper that stacks page-title + page-subtitle together
with correct spacing. Use as: