/* ============================================================================
CrickAI — Colors & Type Foundations
----------------------------------------------------------------------------
Grounded in the real product "BroadcastTheme" (royal-navy + gold + cyan +
orange, pulled from the Animated Video Overlay codebase and the live/shorts
overlay screenshots), with a vibrant pitch-green promoted to the primary
interactive/CTA accent for the marketing surface (per the brief).
FONTS: Alata (brand display + body — github.com/SorkinType/Alata, on Google
Fonts) paired with JetBrains Mono (data/labels/scores). Alata ships a single
400 weight, so headline presence comes from SIZE + tight tracking, not bold —
an intentionally elegant, airy, premium look. Avoid faux-bold on Alata.
Add to any HTML :
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Alata&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root {
/* ---------------------------------------------------------------------- */
/* DARK SURFACES — near-black "ink" ramp (marketing base) */
/* ---------------------------------------------------------------------- */
--ink-900: #07090D; /* deepest background / page void */
--ink-800: #0A0E14; /* base page background */
--ink-700: #11161F; /* raised surface / card */
--ink-600: #161D28; /* card hover, input fill */
--ink-500: #1E2733; /* hairline-lifted surface */
/* BROADCAST NAVY — the product's signature scorebug/panel gradient ----- */
--navy-900: #0B1437; /* deep navy panel base */
--navy-700: #141E5A; /* core broadcast navy */
--navy-500: #243280; /* navy lift / gradient mid */
/* ---------------------------------------------------------------------- */
/* ACCENTS */
/* ---------------------------------------------------------------------- */
/* GREEN — primary interactive / CTA / "live pitch" neon */
--green-400: #5DFFB0; /* glow / focus halo */
--green-500: #00E676; /* PRIMARY accent — buttons, links, focus */
--green-600: #00C853; /* pressed / hover-darken */
--emerald-500: #34D399; /* softer data green (strike-rate positive) */
/* GOLD — signature editorial / premium / "auto-generated by" accent ---- */
--gold-300: #F7D87A; /* light gold text on navy */
--gold-500: #F0C040; /* PRIMARY brand gold — POTM, shorts, awards */
--gold-600: #D9A92E; /* pressed / hover-darken */
/* SUPPORTING DATA ACCENTS (from the live scorebug) --------------------- */
--cyan-500: #38BDF8; /* links in overlays, "live"/info, batting team */
--orange-500: #FB923C;/* opposition team, economy, energy */
--red-500: #EF4444; /* REC dot, destructive, wickets */
/* ---------------------------------------------------------------------- */
/* TEXT */
/* ---------------------------------------------------------------------- */
--fg: #FFFFFF; /* primary text on dark */
--fg-cream: #E8DCC8; /* warm broadcast light (player names, overlay copy) */
--fg-muted: #A0AEC0; /* secondary text, labels */
--fg-faint: #6B7686; /* tertiary / disabled / meta */
--fg-on-accent: #062014; /* text on green/gold fills (near-black green) */
/* ---------------------------------------------------------------------- */
/* LINES, BORDERS, FOCUS */
/* ---------------------------------------------------------------------- */
--line: rgba(255,255,255,0.08); /* hairline divider */
--line-strong: rgba(255,255,255,0.14); /* card border */
--line-gold: rgba(240,192,64,0.35); /* gold hairline (overlay panels) */
--ring: rgba(0,230,118,0.55); /* focus ring (green) */
/* ---------------------------------------------------------------------- */
/* SEMANTIC TOKENS */
/* ---------------------------------------------------------------------- */
--bg: var(--ink-800);
--bg-raised: var(--ink-700);
--surface-card: var(--ink-700);
--surface-card-hover: var(--ink-600);
--accent: var(--green-500);
--accent-press: var(--green-600);
--accent-premium: var(--gold-500);
--link: var(--cyan-500);
--border: var(--line-strong);
--text: var(--fg);
--text-secondary: var(--fg-muted);
/* ---------------------------------------------------------------------- */
/* GRADIENTS & GLOWS */
/* ---------------------------------------------------------------------- */
--grad-navy: linear-gradient(135deg, #141E5A 0%, #243280 50%, #141E5A 100%); /* @kind color */
--grad-pitch: linear-gradient(135deg, #07150E 0%, #0C2A1C 100%); /* @kind color */
--grad-gold-wash: linear-gradient(45deg, rgba(240,192,64,0.18) 0%, transparent 50%, rgba(56,189,248,0.15) 100%); /* @kind color */
--grad-green-cta: linear-gradient(135deg, #00E676 0%, #00C853 100%); /* @kind color */
--grad-scrim-bottom: linear-gradient(to top, rgba(7,9,13,0.95) 0%, rgba(7,9,13,0.65) 35%, transparent 100%); /* @kind color */
--glow-green: 0 0 24px rgba(0,230,118,0.45); /* @kind shadow */
--glow-gold: 0 0 24px rgba(240,192,64,0.40); /* @kind shadow */
/* ---------------------------------------------------------------------- */
/* RADII */
/* ---------------------------------------------------------------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px; /* default card/control radius */
--r-lg: 20px; /* large cards, overlay panels */
--r-xl: 28px;
--r-pill: 999px;
/* ---------------------------------------------------------------------- */
/* SHADOWS / ELEVATION */
/* ---------------------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 8px 24px rgba(0,0,0,0.45);
--shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
--shadow-inset-hairline: inset 0 1px 0 rgba(255,255,255,0.05);
/* ---------------------------------------------------------------------- */
/* SPACING (4px base scale) */
/* ---------------------------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ---------------------------------------------------------------------- */
/* TYPE — families */
/* ---------------------------------------------------------------------- */
--font-display: 'Alata', system-ui, sans-serif; /* elegant brand headlines */
--font-sans: 'Alata', system-ui, -apple-system, sans-serif; /* body + UI */
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* data, labels, scores */
/* TYPE — weights. Alata is 400-only: presence = size + tracking, not weight.
Use the mono (which has 500/700) for any genuinely bold data emphasis. */
--w-regular: 400; /* @kind font */
--w-medium: 400; /* @kind font */
--w-semibold: 400; /* @kind font */
--w-bold: 400; /* @kind font */
--w-extrabold: 400; /* @kind font */
--w-black: 400; /* @kind font */
--w-mono-bold: 700; /* @kind font */
/* TYPE — fluid scale (clamp: mobile → desktop) */
--t-display: clamp(3rem, 7vw, 6rem); /* @kind font */ /* 48 → 96 hero headline */
--t-h1: clamp(2.25rem, 4.5vw, 3.75rem); /* @kind font */ /* 36 → 60 section title */
--t-h2: clamp(1.75rem, 3vw, 2.5rem); /* @kind font */ /* 28 → 40 */
--t-h3: clamp(1.25rem, 2vw, 1.625rem); /* @kind font */ /* 20 → 26 */
--t-lead: clamp(1.125rem, 1.6vw, 1.375rem); /* @kind font */ /* 18 → 22 subhead/lede */
--t-body: 1.0625rem; /* 17 @kind font */
--t-small: 0.9375rem; /* 15 @kind font */
--t-label: 0.75rem; /* 12 eyebrow / kicker @kind font */
--t-stat: clamp(2.5rem, 5vw, 4rem); /* @kind font */ /* 40 → 64 big numbers */
}
/* ============================================================================
SEMANTIC ELEMENT STYLES — apply these classes directly, or copy the rules.
============================================================================ */
.crickai-eyebrow {
font-family: var(--font-mono);
font-weight: var(--w-medium);
font-size: var(--t-label);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green-500);
}
.crickai-eyebrow--gold { color: var(--gold-500); }
h1, .h-display {
font-family: var(--font-display);
font-weight: var(--w-extrabold);
font-size: var(--t-display);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--fg);
text-wrap: balance;
}
h2, .h1 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: var(--t-h1);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--fg);
text-wrap: balance;
}
h3, .h2 {
font-family: var(--font-sans);
font-weight: var(--w-bold);
font-size: var(--t-h2);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--fg);
}
h4, .h3 {
font-family: var(--font-sans);
font-weight: var(--w-semibold);
font-size: var(--t-h3);
line-height: 1.2;
color: var(--fg);
}
.lead {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--t-lead);
line-height: 1.5;
color: var(--fg-muted);
text-wrap: pretty;
}
p, .body {
font-family: var(--font-sans);
font-weight: var(--w-regular);
font-size: var(--t-body);
line-height: 1.6;
color: var(--fg-muted);
text-wrap: pretty;
}
.small {
font-size: var(--t-small);
line-height: 1.5;
color: var(--fg-muted);
}
/* Big broadcast stat numbers (RUNS 48, SR 160 …) */
.stat-number {
font-family: var(--font-mono);
font-weight: var(--w-mono-bold);
font-size: var(--t-stat);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--fg);
}
/* Mono data label (RUNS · BALLS · SR …) */
.data-label {
font-family: var(--font-mono);
font-weight: var(--w-medium);
font-size: var(--t-label);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-500);
}
code, .mono {
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--fg-cream);
}