+
+ Marathon
-
@@ -78,18 +78,20 @@
diff --git a/src/Marathon.UI/MainLayout.razor b/src/Marathon.UI/MainLayout.razor
index a28f8fd..ec2de2f 100644
--- a/src/Marathon.UI/MainLayout.razor
+++ b/src/Marathon.UI/MainLayout.razor
@@ -27,8 +27,8 @@
-
+ style="display:inline-flex; align-items:center; gap:7px; font-family:var(--m-font-mono); font-size:0.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:6px 10px; border-radius:8px; border:2px solid @(Capturing ? "#0a0a0a" : "rgba(255,254,248,0.4)"); background:@(Capturing ? "var(--m-c-accent)" : "transparent"); color:@(Capturing ? "var(--m-c-on-accent)" : "rgba(255,254,248,0.72)");">
+
@(Capturing ? L["Scraping.On"] : L["Scraping.Off"])
@@ -43,7 +43,7 @@
ClipMode="DrawerClipMode.Always"
Elevation="0"
Width="248px"
- Color="Color.Dark">
+ Color="Color.Surface">
@@ -58,7 +58,7 @@
@@ -76,8 +76,9 @@
align-items: center;
gap: var(--m-space-3);
padding: 0 clamp(var(--m-space-3), 2vw, var(--m-space-5));
- border-bottom: 1px solid var(--m-c-rule);
- background: var(--m-c-paper);
+ border-bottom: 2px solid var(--m-c-accent);
+ background: #0a0a0a;
+ color: #fffef8;
z-index: 10;
}
@@ -116,15 +117,12 @@
align-items: center;
justify-content: space-between;
padding: 0 clamp(var(--m-space-3), 2vw, var(--m-space-5));
- border-top: 1px solid var(--m-c-rule);
+ border-top: 2px solid var(--m-c-ink);
background: var(--m-c-paper);
}
- [data-theme="dark"] .m-appbar,
- [data-theme="dark"] .m-footer {
- background: var(--m-c-paper-2);
- border-color: var(--m-c-rule);
- }
+ /* The appbar is a constant black bar in both themes (set above); only the
+ footer follows the paper/charcoal surface token. */
@code {
diff --git a/src/Marathon.UI/Theme/MarathonTheme.cs b/src/Marathon.UI/Theme/MarathonTheme.cs
index ee6ec51..7287d5f 100644
--- a/src/Marathon.UI/Theme/MarathonTheme.cs
+++ b/src/Marathon.UI/Theme/MarathonTheme.cs
@@ -6,12 +6,14 @@ namespace Marathon.UI.Theme;
///
/// The Marathon design system, expressed as a MudBlazor theme.
///
-/// Aesthetic direction: editorial-quant. Inspired by Bloomberg terminals,
-/// FT.com long-reads, and Quartz dashboards. Confident, information-dense,
-/// reveals patterns. Pairs IBM Plex Sans (Cyrillic-capable display + body)
-/// with JetBrains Mono for tabular numerals. Anomaly accent is a load-bearing
-/// signal red so Phase 7 can hang the entire anomaly visual language off
-/// palette.Error without coupling to a hard-coded hex.
+/// Aesthetic direction: "Velocity" — neo-brutalist sportsbook. Acid lime
+/// accent, hard offset shadows, slammed uppercase headlines. Pairs Oswald
+/// (Cyrillic-capable condensed display) and Manrope (body) with JetBrains
+/// Mono for tabular numerals — the mockup's Anton/DM Sans/Space Mono lack
+/// Cyrillic, which this Russian-first product requires. Anomaly accent is a
+/// load-bearing signal red so the anomaly visual language hangs off
+/// palette.Error without coupling to a hard-coded hex. Light "paper"
+/// chassis with a warm-charcoal dark mode; the black appbar is constant.
///
public static class MarathonTheme
{
@@ -27,103 +29,105 @@ public static class MarathonTheme
};
// ------------------------------------------------------------------
- // Palettes — single accent (amber #d97706), single signal (red #ef4444)
- // on a deep navy/parchment chassis. No purple gradients, no cliche.
+ // Palettes — acid lime accent + signal red on a "paper" chassis
+ // (warm-charcoal in dark). Primary is the boldest structural colour
+ // per mode: ink in light, lime in dark. The appbar is black in both.
// ------------------------------------------------------------------
private static readonly PaletteLight LightPalette = new()
{
- Primary = "#0f172a", // deep navy / ink
- PrimaryContrastText = "#fafaf7",
- Secondary = "#334155", // slate
- SecondaryContrastText = "#fafaf7",
- Tertiary = "#d97706", // amber accent
- TertiaryContrastText = "#1c1917",
- Info = "#0369a1",
- Success = "#15803d",
- Warning = "#b45309",
- Error = "#dc2626", // anomaly signal
- ErrorContrastText = "#fff7ed",
+ Primary = "#0a0a0a", // ink — brutalist black actions
+ PrimaryContrastText = "#fffef8",
+ Secondary = "#26241e", // warm ink
+ SecondaryContrastText = "#fffef8",
+ Tertiary = "#c6f400", // acid lime accent
+ TertiaryContrastText = "#0a0a0a",
+ Info = "#244bff", // electric blue
+ Success = "#1f9e3d",
+ Warning = "#ff8a00",
+ Error = "#ff3b30", // anomaly signal
+ ErrorContrastText = "#fffef8",
- Black = "#1c1917",
- White = "#fafaf7",
- Surface = "#fafaf7", // warm parchment
- Background = "#f5f4ef", // a half-step warmer than surface
- BackgroundGray = "#ebe9e1",
- DrawerBackground = "#0f172a", // dark drawer on light app — editorial contrast
- DrawerText = "#e7e5e4",
- DrawerIcon = "#d6d3d1",
- AppbarBackground = "#fafaf7",
- AppbarText = "#0f172a",
+ Black = "#0a0a0a",
+ White = "#fffef8",
+ Surface = "#fffef8", // card paper
+ Background = "#f3f1e9", // page paper
+ BackgroundGray = "#e7e3d6",
+ DrawerBackground = "#fffef8", // paper drawer — brutalist light nav
+ DrawerText = "#26241e",
+ DrawerIcon = "#6b6757",
+ AppbarBackground = "#0a0a0a", // constant black bar
+ AppbarText = "#fffef8",
- TextPrimary = "#0f172a",
- TextSecondary = "#475569",
- TextDisabled = "#94a3b8",
- ActionDefault = "#334155",
- ActionDisabled = "#cbd5e1",
- ActionDisabledBackground = "#e2e8f0",
+ TextPrimary = "#0a0a0a",
+ TextSecondary = "#6b6757",
+ TextDisabled = "#a8a293",
+ ActionDefault = "#26241e",
+ ActionDisabled = "#cbc7b8",
+ ActionDisabledBackground = "#e7e3d6",
- LinesDefault = "#e7e5e4",
- LinesInputs = "#cbd5e1",
- TableLines = "#e7e5e4",
- TableStriped = "#f5f4ef",
- TableHover = "#ebe9e1",
- Divider = "#e7e5e4",
- DividerLight = "#f1f5f9",
+ LinesDefault = "#d8d4c4",
+ LinesInputs = "#0a0a0a", // bold black input borders
+ TableLines = "#e7e3d6",
+ TableStriped = "#f3f1e9",
+ TableHover = "#e7e3d6",
+ Divider = "#d8d4c4",
+ DividerLight = "#ebe7da",
- OverlayDark = new MudColor("#0f172a99").Value,
- OverlayLight = new MudColor("#fafaf7cc").Value,
+ OverlayDark = new MudColor("#0a0a0a99").Value,
+ OverlayLight = new MudColor("#fffef8cc").Value,
};
private static readonly PaletteDark DarkPalette = new()
{
- Primary = "#fbbf24", // amber, promoted in dark mode
- PrimaryContrastText = "#0c0a09",
- Secondary = "#94a3b8",
- SecondaryContrastText = "#0c0a09",
- Tertiary = "#fbbf24",
- TertiaryContrastText = "#0c0a09",
- Info = "#38bdf8",
+ Primary = "#c6f400", // lime, promoted in dark mode
+ PrimaryContrastText = "#0a0a0a",
+ Secondary = "#d8d4c6",
+ SecondaryContrastText = "#0a0a0a",
+ Tertiary = "#c6f400",
+ TertiaryContrastText = "#0a0a0a",
+ Info = "#6f8bff",
Success = "#4ade80",
- Warning = "#fbbf24",
- Error = "#f87171", // anomaly signal — softened for dark
- ErrorContrastText = "#0c0a09",
+ Warning = "#ffae42",
+ Error = "#ff5a4f", // anomaly signal — softened for dark
+ ErrorContrastText = "#0a0a0a",
- Black = "#0c0a09",
- White = "#fafaf7",
- Surface = "#1c1917", // ink-stained paper
- Background = "#0c0a09", // near-black
- BackgroundGray = "#1c1917",
- DrawerBackground = "#0c0a09",
- DrawerText = "#e7e5e4",
- DrawerIcon = "#a8a29e",
- AppbarBackground = "#0c0a09",
- AppbarText = "#fafaf7",
+ Black = "#0a0a0a",
+ White = "#fffef8",
+ Surface = "#1e1c15", // warm charcoal card
+ Background = "#141310", // near-black warm
+ BackgroundGray = "#2a2820",
+ DrawerBackground = "#1e1c15",
+ DrawerText = "#d8d4c6",
+ DrawerIcon = "#9c9784",
+ AppbarBackground = "#0a0a0a", // constant black bar
+ AppbarText = "#f5f3ea",
- TextPrimary = "#f5f5f4",
- TextSecondary = "#a8a29e",
+ TextPrimary = "#f5f3ea",
+ TextSecondary = "#9c9784",
TextDisabled = "#57534e",
- ActionDefault = "#a8a29e",
- ActionDisabled = "#44403c",
- ActionDisabledBackground = "#1c1917",
+ ActionDefault = "#d8d4c6",
+ ActionDisabled = "#57534e",
+ ActionDisabledBackground = "#2a2820",
- LinesDefault = "#292524",
- LinesInputs = "#44403c",
- TableLines = "#292524",
- TableStriped = "#1c1917",
- TableHover = "#292524",
- Divider = "#292524",
- DividerLight = "#1c1917",
+ LinesDefault = "#3a3730",
+ LinesInputs = "#f5f3ea", // light input borders on charcoal
+ TableLines = "#2a2820",
+ TableStriped = "#1e1c15",
+ TableHover = "#2a2820",
+ Divider = "#3a3730",
+ DividerLight = "#2a2820",
- OverlayDark = new MudColor("#0c0a09cc").Value,
- OverlayLight = new MudColor("#fafaf722").Value,
+ OverlayDark = new MudColor("#141310cc").Value,
+ OverlayLight = new MudColor("#f5f3ea22").Value,
};
// ------------------------------------------------------------------
- // Typography — IBM Plex Sans / JetBrains Mono / IBM Plex Serif (display)
- // All have full Cyrillic coverage. Numerals are tabular.
+ // Typography — Oswald (condensed display) / Manrope (body) /
+ // JetBrains Mono (numerals). All have full Cyrillic coverage, which
+ // the Velocity mockup's Anton/DM Sans/Space Mono do not. Numerals tabular.
// ------------------------------------------------------------------
- private static readonly string[] DisplayStack = { "IBM Plex Serif", "PT Serif", "Georgia", "serif" };
- private static readonly string[] BodyStack = { "IBM Plex Sans", "PT Sans", "system-ui", "sans-serif" };
+ private static readonly string[] DisplayStack = { "Oswald", "PT Sans Narrow", "Arial Narrow", "sans-serif" };
+ private static readonly string[] BodyStack = { "Manrope", "Segoe UI", "system-ui", "sans-serif" };
private static readonly string[] MonoStack = { "JetBrains Mono", "IBM Plex Mono", "Fira Code", "Consolas", "monospace" };
private static readonly Typography MarathonTypography = new()
@@ -139,26 +143,29 @@ public static class MarathonTheme
H1 = new H1
{
FontFamily = DisplayStack,
- FontWeight = 300,
- FontSize = "clamp(2.25rem, 4vw, 3.5rem)",
- LineHeight = 1.05,
- LetterSpacing = "-0.022em",
+ FontWeight = 700,
+ FontSize = "clamp(2.5rem, 5vw, 4rem)",
+ LineHeight = 0.98,
+ LetterSpacing = "0.005em",
+ TextTransform = "uppercase",
},
H2 = new H2
{
FontFamily = DisplayStack,
- FontWeight = 400,
- FontSize = "clamp(1.75rem, 2.5vw, 2.25rem)",
- LineHeight = 1.15,
- LetterSpacing = "-0.018em",
+ FontWeight = 700,
+ FontSize = "clamp(1.875rem, 3vw, 2.5rem)",
+ LineHeight = 1.02,
+ LetterSpacing = "0.005em",
+ TextTransform = "uppercase",
},
H3 = new H3
{
FontFamily = DisplayStack,
- FontWeight = 500,
- FontSize = "1.5rem",
- LineHeight = 1.25,
- LetterSpacing = "-0.012em",
+ FontWeight = 600,
+ FontSize = "1.625rem",
+ LineHeight = 1.1,
+ LetterSpacing = "0.01em",
+ TextTransform = "uppercase",
},
H4 = new H4
{
@@ -242,12 +249,11 @@ public static class MarathonTheme
};
// ------------------------------------------------------------------
- // Layout — sharp corners, narrow drawer. The aesthetic earns its
- // authority through restraint.
+ // Layout — rounded brutalist blocks, narrow drawer.
// ------------------------------------------------------------------
private static readonly LayoutProperties LayoutProps = new()
{
- DefaultBorderRadius = "2px",
+ DefaultBorderRadius = "10px",
AppbarHeight = "60px",
DrawerWidthLeft = "248px",
DrawerWidthRight = "248px",
diff --git a/src/Marathon.UI/Theme/Tokens.cs b/src/Marathon.UI/Theme/Tokens.cs
index 408a3bd..37374ce 100644
--- a/src/Marathon.UI/Theme/Tokens.cs
+++ b/src/Marathon.UI/Theme/Tokens.cs
@@ -9,14 +9,14 @@ public static class Tokens
{
public static class Colors
{
- public const string AnomalySignal = "#dc2626";
- public const string AnomalySignalDark = "#f87171";
- public const string Accent = "#d97706";
- public const string AccentDark = "#fbbf24";
- public const string InkPrimary = "#0f172a";
- public const string Parchment = "#fafaf7";
- public const string ParchmentDeep = "#f5f4ef";
- public const string InkDeep = "#0c0a09";
+ public const string AnomalySignal = "#ff3b30";
+ public const string AnomalySignalDark = "#ff5a4f";
+ public const string Accent = "#c6f400"; // acid lime
+ public const string AccentDark = "#c6f400";
+ public const string InkPrimary = "#0a0a0a";
+ public const string Parchment = "#fffef8";
+ public const string ParchmentDeep = "#f3f1e9";
+ public const string InkDeep = "#141310";
}
public static class Spacing
@@ -31,8 +31,8 @@ public static class Tokens
public static class Typography
{
- public const string DisplayStack = "\"IBM Plex Serif\", \"PT Serif\", Georgia, serif";
- public const string BodyStack = "\"IBM Plex Sans\", \"PT Sans\", system-ui, sans-serif";
+ public const string DisplayStack = "\"Oswald\", \"PT Sans Narrow\", \"Arial Narrow\", sans-serif";
+ public const string BodyStack = "\"Manrope\", \"Segoe UI\", system-ui, sans-serif";
public const string MonoStack = "\"JetBrains Mono\", \"IBM Plex Mono\", \"Fira Code\", Consolas, monospace";
}
}
diff --git a/src/Marathon.UI/wwwroot/app.css b/src/Marathon.UI/wwwroot/app.css
index 635b5c6..39d2847 100644
--- a/src/Marathon.UI/wwwroot/app.css
+++ b/src/Marathon.UI/wwwroot/app.css
@@ -1,9 +1,13 @@
/* ===================================================================
- Marathon — Editorial-Quant design system
+ Marathon — "Velocity" design system
------------------------------------------------------------------
- Inspiration: long-form data journalism (FT, Quartz), terminal
- instruments (Bloomberg), and Belarusian / Soviet print typography.
- The aesthetic is confident, dense, and serif-led on display surfaces.
+ Neo-brutalist sportsbook. Acid lime, hard offset shadows, slammed
+ uppercase headlines. Cyrillic-complete type: Oswald (display) +
+ Manrope (body) + JetBrains Mono (numerals / labels) — the Velocity
+ mockup's Anton/DM Sans/Space Mono have no Cyrillic, which this
+ Russian-first product needs.
+ Light "paper" chassis + a warm-charcoal dark mode; both keep the
+ lime accent and the hard ink/black shadow signature.
=================================================================== */
:root {
@@ -18,50 +22,63 @@
--m-space-8: 64px;
--m-space-9: 96px;
- /* ----- Radius — sharp by default, soft variants for inputs ----- */
+ /* ----- Radius — rounded brutalist blocks ----- */
--m-radius-sharp: 0;
- --m-radius-xs: 2px;
- --m-radius-sm: 4px;
- --m-radius-md: 6px;
- --m-radius-lg: 10px;
+ --m-radius-xs: 6px;
+ --m-radius-sm: 8px;
+ --m-radius-md: 10px;
+ --m-radius-lg: 14px;
- /* ----- Typography ----- */
- --m-font-display: "IBM Plex Serif", "PT Serif", Georgia, serif;
- --m-font-body: "IBM Plex Sans", "PT Sans", system-ui, sans-serif;
+ /* ----- Brutalist borders + hard offset shadows ----- */
+ --m-border-w: 2px;
+ --m-border-w-bold: 3px;
+ --m-shadow-hard: 5px 5px 0 var(--m-c-ink);
+ --m-shadow-hard-sm: 3px 3px 0 var(--m-c-ink);
+ --m-shadow-hard-accent: 5px 5px 0 var(--m-c-accent);
+ --m-shadow-hard-anomaly: 5px 5px 0 var(--m-c-anomaly);
+
+ /* ----- Typography (all Cyrillic-complete) ----- */
+ --m-font-display: "Oswald", "PT Sans Narrow", "Arial Narrow", sans-serif;
+ --m-font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
--m-font-mono: "JetBrains Mono", "IBM Plex Mono", "Fira Code", Consolas, monospace;
- /* ----- Colors — light (parchment) chassis ----- */
- --m-c-ink: #0f172a;
- --m-c-ink-2: #1e293b;
- --m-c-ink-soft: #475569;
- --m-c-paper: #fafaf7;
- --m-c-paper-2: #f5f4ef;
- --m-c-paper-3: #ebe9e1;
- --m-c-rule: #e7e5e4;
- --m-c-accent: #d97706;
- --m-c-accent-soft: #f59e0b;
- --m-c-anomaly: #dc2626;
- --m-c-positive: #15803d;
- --m-c-info: #0369a1;
+ /* ----- Colors — light "paper" chassis ----- */
+ --m-c-ink: #0a0a0a;
+ --m-c-ink-2: #26241e;
+ --m-c-ink-soft: #6b6757;
+ --m-c-paper: #fffef8;
+ --m-c-paper-2: #f3f1e9;
+ --m-c-paper-3: #e7e3d6;
+ --m-c-rule: #0a0a0a;
+ --m-c-accent: #c6f400; /* acid lime */
+ --m-c-accent-soft: #b3dd00;
+ --m-c-on-accent: #0a0a0a; /* ink on lime — lime is a light hue */
+ --m-c-anomaly: #ff3b30;
+ --m-c-positive: #1f9e3d;
+ --m-c-info: #244bff; /* electric blue */
/* Tabular numerals for everywhere odds/scores appear */
- --m-num-feature: "tnum" 1, "lnum" 1, "ss01" 1;
+ --m-num-feature: "tnum" 1, "lnum" 1;
}
-/* Dark theme overrides (applied via class on or via MudThemeProvider) */
+/* Dark theme overrides — warm charcoal, lime retained */
.mud-theme-dark, [data-theme="dark"] {
- --m-c-ink: #f5f5f4;
- --m-c-ink-2: #e7e5e4;
- --m-c-ink-soft: #a8a29e;
- --m-c-paper: #1c1917;
- --m-c-paper-2: #0c0a09;
- --m-c-paper-3: #292524;
- --m-c-rule: #292524;
- --m-c-accent: #fbbf24;
- --m-c-accent-soft: #fcd34d;
- --m-c-anomaly: #f87171;
+ --m-c-ink: #f5f3ea;
+ --m-c-ink-2: #d8d4c6;
+ --m-c-ink-soft: #9c9784;
+ --m-c-paper: #1e1c15;
+ --m-c-paper-2: #141310;
+ --m-c-paper-3: #2a2820;
+ --m-c-rule: #f5f3ea;
+ --m-c-accent: #c6f400;
+ --m-c-accent-soft: #aacc00;
+ --m-c-on-accent: #0a0a0a;
+ --m-c-anomaly: #ff5a4f;
--m-c-positive: #4ade80;
- --m-c-info: #38bdf8;
+ --m-c-info: #6f8bff;
+ /* Hard shadow goes pure-black on dark; the light border defines the block. */
+ --m-shadow-hard: 5px 5px 0 #000000;
+ --m-shadow-hard-sm: 3px 3px 0 #000000;
}
/* ===================================================================
@@ -81,19 +98,13 @@ html, body {
}
body {
- /* Subtle paper grain — 1px mottled noise, rendered cheaply via SVG. */
- background-image:
- radial-gradient(circle at 25% 12%, rgba(217, 119, 6, 0.035), transparent 45%),
- radial-gradient(circle at 88% 78%, rgba(15, 23, 42, 0.040), transparent 50%),
- url("data:image/svg+xml;utf8,
");
+ /* Subtle diagonal hatch — the Velocity texture. */
+ background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(10, 10, 10, 0.025) 22px 24px);
background-attachment: fixed;
}
.mud-theme-dark body, [data-theme="dark"] body {
- background-image:
- radial-gradient(circle at 25% 12%, rgba(251, 191, 36, 0.045), transparent 45%),
- radial-gradient(circle at 88% 78%, rgba(56, 189, 248, 0.030), transparent 50%),
- url("data:image/svg+xml;utf8,
");
+ background-image: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 255, 255, 0.022) 22px 24px);
}
#app {
@@ -120,61 +131,71 @@ body {
}
/* ===================================================================
- Editorial markers — kicker label + serif display lockup
+ Editorial markers — lime kicker chip + slammed display lockup
=================================================================== */
.m-kicker {
font-family: var(--m-font-mono);
text-transform: uppercase;
- letter-spacing: 0.18em;
+ letter-spacing: 0.14em;
font-size: 0.6875rem;
- color: var(--m-c-accent);
- font-weight: 500;
+ font-weight: 700;
+ color: var(--m-c-on-accent);
+ background: var(--m-c-accent);
+ border: var(--m-border-w) solid var(--m-c-ink);
+ border-radius: var(--m-radius-md);
+ padding: 5px 10px;
display: inline-block;
- padding-bottom: var(--m-space-1);
- border-bottom: 1px solid var(--m-c-accent);
+}
+
+/* A tilted variant for hero kickers — opt-in so it never skews chrome. */
+.m-kicker--tilt {
+ transform: rotate(-1.5deg);
}
.m-display {
font-family: var(--m-font-display);
- font-weight: 300;
- letter-spacing: -0.022em;
- line-height: 1.05;
+ font-weight: 700;
+ letter-spacing: 0.005em;
+ line-height: 0.98;
+ text-transform: uppercase;
color: var(--m-c-ink);
}
.m-rule {
border: 0;
- border-top: 1px solid var(--m-c-rule);
+ border-top: var(--m-border-w) solid var(--m-c-ink);
margin: var(--m-space-5) 0;
}
.m-rule--double {
border: 0;
- border-top: 3px double var(--m-c-rule);
+ border-top: var(--m-border-w-bold) double var(--m-c-ink);
margin: var(--m-space-5) 0;
}
/* ===================================================================
- Cards — paper-like, borders not shadows
+ Cards — brutalist blocks: thick border + hard offset shadow
=================================================================== */
.m-card {
background: var(--m-c-paper);
- border: 1px solid var(--m-c-rule);
- border-radius: var(--m-radius-xs);
+ border: var(--m-border-w-bold) solid var(--m-c-ink);
+ border-radius: var(--m-radius-lg);
+ box-shadow: var(--m-shadow-hard);
padding: var(--m-space-5);
position: relative;
}
+/* Emphasis variants recolour the hard shadow rather than a hidden left rule. */
.m-card--accented {
- border-left: 3px solid var(--m-c-accent);
+ box-shadow: var(--m-shadow-hard-accent);
}
.m-card--anomaly {
- border-left: 3px solid var(--m-c-anomaly);
+ box-shadow: var(--m-shadow-hard-anomaly);
}
/* ===================================================================
- Stat block — large number, mono, kicker on top
+ Stat block — slammed Oswald number, lime tick, mono label
=================================================================== */
.m-stat {
display: flex;
@@ -183,26 +204,37 @@ body {
}
.m-stat__value {
- font-family: var(--m-font-mono);
+ font-family: var(--m-font-display);
font-feature-settings: var(--m-num-feature);
- font-size: clamp(2rem, 4vw, 3rem);
- font-weight: 500;
+ font-size: clamp(2.25rem, 4.5vw, 3.25rem);
+ font-weight: 700;
line-height: 1;
color: var(--m-c-ink);
- letter-spacing: -0.02em;
+ letter-spacing: 0.01em;
+}
+
+.m-stat__value::after {
+ content: "";
+ display: block;
+ width: 42px;
+ height: 5px;
+ margin-top: var(--m-space-2);
+ background: var(--m-c-accent);
}
.m-stat__label {
- font-family: var(--m-font-body);
- font-size: 0.8125rem;
+ font-family: var(--m-font-mono);
+ font-size: 0.6875rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
color: var(--m-c-ink-soft);
- text-transform: none;
- letter-spacing: 0;
}
.m-stat__delta {
font-family: var(--m-font-mono);
font-size: 0.75rem;
+ font-weight: 700;
color: var(--m-c-positive);
}
@@ -239,16 +271,16 @@ body {
}
/* ===================================================================
- Focus rings — deliberate, accent, never invisible
+ Focus rings — electric blue for contrast on lime/paper and charcoal
=================================================================== */
:focus-visible {
- outline: 2px solid var(--m-c-accent);
+ outline: var(--m-border-w) solid var(--m-c-info);
outline-offset: 2px;
}
.mud-button:focus-visible,
.mud-icon-button:focus-visible {
- outline: 2px solid var(--m-c-accent);
+ outline: var(--m-border-w) solid var(--m-c-info);
outline-offset: 2px;
}
@@ -292,10 +324,12 @@ body {
.m-brand__mark {
font-family: var(--m-font-display);
- font-weight: 500;
- font-size: 1.375rem;
- letter-spacing: -0.02em;
+ font-weight: 700;
+ font-size: 1.5rem;
+ letter-spacing: 0.01em;
line-height: 1;
+ text-transform: uppercase;
+ color: inherit;
}
.m-brand__mark::first-letter {
@@ -304,47 +338,55 @@ body {
.m-brand__dateline {
font-family: var(--m-font-mono);
- font-size: 0.6875rem;
+ font-size: 0.625rem;
+ font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
- color: var(--m-c-ink-soft);
- border-left: 1px solid var(--m-c-rule);
+ color: var(--m-c-accent);
+ border-left: var(--m-border-w) solid currentColor;
padding-left: var(--m-space-3);
}
/* ===================================================================
- Drawer — narrow, dark, mono labels
+ Drawer — paper sidebar, brutalist nav blocks
=================================================================== */
.m-nav__group {
- padding: var(--m-space-3) var(--m-space-4);
+ padding: var(--m-space-4) var(--m-space-3) var(--m-space-2);
font-family: var(--m-font-mono);
- font-size: 0.6875rem;
+ font-size: 0.625rem;
+ font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
- color: rgba(231, 229, 228, 0.55);
+ color: var(--m-c-ink-soft);
}
.m-nav__link {
display: flex;
align-items: center;
gap: var(--m-space-3);
- padding: var(--m-space-3) var(--m-space-4);
- color: rgba(231, 229, 228, 0.85);
+ padding: 10px 12px;
+ color: var(--m-c-ink-2);
text-decoration: none;
- font-size: 0.9375rem;
- border-left: 2px solid transparent;
- transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+ font-family: var(--m-font-body);
+ font-weight: 700;
+ font-size: 0.875rem;
+ border: var(--m-border-w) solid transparent;
+ border-radius: var(--m-radius-md);
+ transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.m-nav__link:hover {
- background: rgba(217, 119, 6, 0.10);
- color: #ffffff;
+ border-color: var(--m-c-ink);
+ transform: translate(-1px, -1px);
+ box-shadow: var(--m-shadow-hard-sm);
+ color: var(--m-c-ink);
}
.m-nav__link.active {
- color: #ffffff;
- background: rgba(217, 119, 6, 0.14);
- border-left-color: var(--m-c-accent);
+ background: var(--m-c-accent);
+ color: var(--m-c-on-accent);
+ border-color: var(--m-c-ink);
+ box-shadow: var(--m-shadow-hard-sm);
}
.m-nav__link .mud-icon-root { font-size: 1.1rem; }
@@ -354,8 +396,8 @@ body {
=================================================================== */
.m-segmented {
display: inline-flex;
- border: 1px solid var(--m-c-rule);
- border-radius: var(--m-radius-xs);
+ border: var(--m-border-w) solid var(--m-c-ink);
+ border-radius: var(--m-radius-md);
overflow: hidden;
background: var(--m-c-paper);
}
@@ -367,15 +409,16 @@ body {
padding: 6px 12px;
font-family: var(--m-font-mono);
font-size: 0.6875rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.14em;
+ letter-spacing: 0.12em;
color: var(--m-c-ink-soft);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.m-segmented__btn + .m-segmented__btn {
- border-left: 1px solid var(--m-c-rule);
+ border-left: var(--m-border-w) solid var(--m-c-ink);
}
.m-segmented__btn:hover {
@@ -383,21 +426,17 @@ body {
}
.m-segmented__btn.is-active {
- background: var(--m-c-ink);
- color: var(--m-c-paper);
-}
-
-.mud-theme-dark .m-segmented__btn.is-active,
-[data-theme="dark"] .m-segmented__btn.is-active {
background: var(--m-c-accent);
- color: var(--m-c-paper-2);
+ color: var(--m-c-on-accent);
}
/* ===================================================================
Settings page — section ledger
=================================================================== */
.m-section {
- border: 1px solid var(--m-c-rule);
+ border: var(--m-border-w-bold) solid var(--m-c-ink);
+ border-radius: var(--m-radius-lg);
+ box-shadow: var(--m-shadow-hard);
background: var(--m-c-paper);
margin-bottom: var(--m-space-5);
}
@@ -407,16 +446,17 @@ body {
align-items: baseline;
justify-content: space-between;
padding: var(--m-space-4) var(--m-space-5);
- border-bottom: 1px solid var(--m-c-rule);
- background: var(--m-c-paper-2);
+ border-bottom: var(--m-border-w) solid var(--m-c-ink);
+ background: var(--m-c-paper-3);
}
.m-section__head h2 {
margin: 0;
font-family: var(--m-font-display);
- font-weight: 400;
- font-size: 1.25rem;
- letter-spacing: -0.012em;
+ font-weight: 700;
+ font-size: 1.375rem;
+ text-transform: uppercase;
+ letter-spacing: 0.01em;
}
.m-section__body {
@@ -450,15 +490,16 @@ body {
display: inline-flex;
align-items: center;
gap: var(--m-space-2);
- padding: 2px 8px;
- background: rgba(220, 38, 38, 0.10);
+ padding: 3px 9px;
+ background: var(--m-c-paper);
color: var(--m-c-anomaly);
- border: 1px solid currentColor;
- border-radius: var(--m-radius-xs);
+ border: var(--m-border-w) solid currentColor;
+ border-radius: var(--m-radius-sm);
font-family: var(--m-font-mono);
font-size: 0.6875rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.14em;
+ letter-spacing: 0.12em;
}
.m-anomaly__pulse {
diff --git a/src/Marathon.UI/wwwroot/index.html b/src/Marathon.UI/wwwroot/index.html
index ebc4eb2..73759f5 100644
--- a/src/Marathon.UI/wwwroot/index.html
+++ b/src/Marathon.UI/wwwroot/index.html
@@ -8,17 +8,17 @@
-
+
@@ -26,13 +26,13 @@
-
-
Booting
-
Marathon Odds Lab
+
+
Booting
+
Marathon Odds Lab
-
+
An unhandled error has occurred.
Reload
×