/*!
* Melbourne Super League — site stylesheet
* Design direction: bold multicultural sport-brand system built directly off
* the MSL Premiers crest (deep indigo-violet + electric lime, near-black ink).
* Typography: Big Shoulders (condensed display, scoreboard energy) paired
* with Chakra Petch (technical/HUD-flavoured body & data font) — inspired by
* the Nitro sports template's pairing, tuned for long-form readability.
* Structure/rhythm inspired by the Nitro template (hero -> stat strip ->
* competition highlights -> standings -> news -> gallery -> footer),
* rebuilt from scratch for cricket rather than reusing soccer imagery.
* ------------------------------------------------------------------ */
/* Fonts are loaded via in each page's
(not @import) so the browser can start fetching them immediately,
in parallel with this stylesheet, instead of waiting to discover them
after main.css has already downloaded. See docs/CONTENT-GUIDE.md. */
:root {
/* ---- Brand palette (sourced from MSL Premiers crest, 01.png) ---- */
--msl-ink: #120B2E; /* near-black indigo — primary text */
--msl-ink-soft: #4B4560; /* secondary text */
--msl-purple-950: #0A0620; /* deepest bg (footer, dark sections) */
--msl-purple-900: #150A38; /* dark bg alt */
--msl-purple-800: #22114F;
--msl-purple-700: #3810A8; /* crest shield purple */
--msl-violet-600: #4A22C4;
--msl-violet-500: #5B2EE0; /* primary accent / buttons / links */
--msl-violet-400: #7C52EA;
--msl-lime-400: #D8F84C; /* crest lime — secondary accent */
--msl-lime-300: #E7FB86;
--msl-lime-050: #F8FFE3;
--msl-cream: #F7F6FB; /* page background, not pure white */
--msl-white: #FFFFFF;
--msl-line: #E6E2F2;
--msl-line-dark: rgba(255,255,255,0.14);
--msl-red: #C1272D;
--msl-green: #12703A;
/* ---- Type ---- */
--font-display: "Big Shoulders", sans-serif;
--font-body: "Chakra Petch", sans-serif;
--fs-h1: clamp(2.75rem, 2rem + 3.4vw, 6.25rem);
--fs-h2: clamp(2.1rem, 1.7rem + 2vw, 3.6rem);
--fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
--fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
--fs-h5: 1.125rem;
--fs-eyebrow: 0.8rem;
--fs-lg: 1.25rem;
--fs-body: 1rem;
--fs-sm: 0.875rem;
--fs-xs: 0.75rem;
--container: 1256px;
--container-narrow: 860px;
--section-pad: clamp(64px, 8vw, 128px);
--radius: 4px;
--radius-lg: 10px;
--shadow-card: 0 4px 24px rgba(18, 11, 46, 0.07);
--shadow-pop: 0 18px 48px rgba(18, 11, 46, 0.18);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ==========================================================================
Reset & base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body {
margin: 0;
width: 100%;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--msl-ink-soft);
background: var(--msl-cream);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
/* Safety default: our icon() helper injects raw