/* ========================================================================== CleverPunts design tokens ========================================================================== The single source of truth for colour, type and spacing across the site. Every other stylesheet consumes these; none of them should contain a raw hex value. THEMES Dark is the default and lives on bare :root. Light is opt-in and redeclares the SAME token names under [data-theme="light"] - that is the whole light theme. No component rule is duplicated per theme, so a component written once works in both. The site sets data-theme on . No prefers-color-scheme query here on purpose: a first-time visitor gets dark, because dark is the theme that has actually been designed. If that changes, add the media query in this file and nowhere else. THE ACCENT NEEDS TWO TOKENS The palette is dark-native. The lime scores 14.4:1 on the dark background and 1.3:1 on white - unusable as light-mode text. So there are two: --cp-accent a FILL. Lime in both themes, always with dark ink on it. --cp-accent-ink a TEXT colour. Lime in dark, deep green in light. Links, eyebrows and active-nav states use --cp-accent-ink. Filled buttons use --cp-accent with --cp-on-accent. Mixing these up produces a light theme that fails contrast, which is the main trap in this system. Contrast ratios below are measured, not estimated. ========================================================================== */ :root { color-scheme: dark; /* --- Surfaces ------------------------------------------------------- */ --cp-bg: #0b1219; /* page ground */ --cp-surface: #131f29; /* cards, panels, table headers */ --cp-surface-2: #101b23; /* recessed areas inside a surface */ --cp-line: #2b3a46; /* all borders and rules */ /* --- Text ----------------------------------------------------------- */ --cp-ink: #eff4f7; /* 16.9:1 on --cp-bg */ --cp-muted: #a9b8c4; /* 9.4:1 on --cp-bg - safe for body text */ /* --- Accent --------------------------------------------------------- */ --cp-accent: #b4f27b; /* fill only */ --cp-accent-ink: #b4f27b; /* text - 14.4:1 on --cp-bg */ --cp-on-accent: #152111; /* ink ON the accent - 12.7:1 */ --cp-accent-dim: #22371f; /* accent-tinted surface */ --cp-accent-line: #587f3e; /* accent-tinted border */ /* Highlight stop for the shimmering hero word. Light sets it equal to --cp-accent-ink so the shimmer collapses to a solid, readable green. */ --cp-accent-glint: #e2ffc4; /* --- Status --------------------------------------------------------- */ --cp-ok: #b4f27b; --cp-warn: #ffc777; --cp-bad: #ff8a8a; /* Highlight stop for shimmering prize-money text; light sets it equal to --cp-warn so the shimmer collapses to a solid, as accent-glint does. */ --cp-warn-glint: #ffe9c9; /* Categorical hues the football pages use for status - promotion / Europe / home vs away - where ok, warn and bad are not enough. */ --cp-info: #7cb9ff; /* blue - 10.5:1 on --cp-bg */ --cp-violet: #c4b5fd; /* purple - 11.3:1 */ /* --- Focus ---------------------------------------------------------- */ --cp-focus: var(--cp-accent-ink); /* --- Brand ---------------------------------------------------------- */ /* A token rather than a rule per theme, so the swap costs one declaration and .cp-brand stays written once. Both files are 367x363. */ --cp-logo: url("/images/logoRoundalDark.webp"); /* --- Hero scrim ----------------------------------------------------- */ /* A gradient laid over a photograph so the title stays readable. Dark in dark, light in light - the text over it is --cp-ink either way. */ --cp-hero-from: #080d1a; --cp-hero-mid: #0d1e3a; --cp-hero-rgb: 8, 13, 26; /* The hero artwork. The character was drawn for a dark ground, so light swaps in a black-and-white ball rather than washing him out. */ --cp-hero-art: url("/images/cleverman-football.webp"); --cp-hero-art-pos: right center; --cp-hero-art-size: contain; /* Heroes that watermark a character behind the copy (the cheeky punt page) fade him on a pale ground rather than swap him. */ --cp-hero-wm-opacity: 1; /* --- RGB companions ------------------------------------------------- */ /* Bootstrap's colour utilities are built on rgb triplets so its opacity modifiers work (rgba(var(--bs-dark-rgb), var(--bs-bg-opacity))). The bridge cannot hand them a hex, so these mirror the tokens above. CHANGE A HEX ABOVE AND YOU MUST CHANGE ITS TRIPLET HERE. */ --cp-ink-rgb: 239, 244, 247; --cp-muted-rgb: 169, 184, 196; --cp-surface-rgb: 19, 31, 41; --cp-surface-2-rgb: 16, 27, 35; --cp-accent-rgb: 180, 242, 123; --cp-ok-rgb: 180, 242, 123; --cp-warn-rgb: 255, 199, 119; --cp-bad-rgb: 255, 138, 138; /* --- Type ----------------------------------------------------------- */ /* Inter is a true variable font, so intermediate weights such as 650 actually render as 650. The system stack behind it is the fallback while the webfont loads, and on the rare machine that blocks it. */ --cp-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cp-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; --cp-text-xs: 12px; --cp-text-sm: 14px; --cp-text-base: 16px; --cp-text-lg: 20px; --cp-text-h3: 20px; --cp-text-h2: clamp(29px, 3vw, 42px); --cp-text-h1: clamp(42px, 6.1vw, 78px); --cp-leading: 1.65; --cp-leading-tight: 1.15; /* Negative tracking is what gives the headlines their character. It only behaves consistently because the font is pinned - do not reuse these values with a different family. */ --cp-track-h1: -0.055em; --cp-track-h2: -0.035em; --cp-track-h3: -0.015em; /* --- Space ---------------------------------------------------------- */ --cp-space-1: 4px; --cp-space-2: 8px; --cp-space-3: 12px; --cp-space-4: 16px; --cp-space-5: 24px; --cp-space-6: 32px; --cp-space-7: 48px; --cp-space-8: 72px; /* --- Shape ---------------------------------------------------------- */ --cp-radius-sm: 4px; --cp-radius: 7px; --cp-radius-lg: 12px; --cp-shadow: 0 30px 80px #0004; /* --- Layout --------------------------------------------------------- */ --cp-measure: 1220px; /* max content width */ /* Data-dense pages (the home page, racecards) put three or four panels side by side and 1220px squashes them. opts the whole page in - header included - see cp-base.css. */ --cp-measure-wide: 1600px; --cp-gutter: 32px; } /* ========================================================================== Light theme ========================================================================== Only the tokens change. If you find yourself adding a component rule in here, the component is wrong - fix it to use a token instead. ========================================================================== */ [data-theme="light"] { color-scheme: light; /* The ground is deliberately several steps off white. At #f6f8f9 a white panel scored 1.065:1 against it - effectively invisible, which made every panel on a converted page look like bare background. #e8ecf1 gives 1.186:1, and body text still clears AAA. */ --cp-bg: #e8ecf1; --cp-surface: #ffffff; /* 1.19:1 on --cp-bg */ --cp-surface-2: #f1f4f8; /* recessed inside a white surface */ --cp-line: #ccd6e0; --cp-ink: #0f1a22; /* 14.9:1 on --cp-bg */ --cp-muted: #55656f; /* 5.1:1 on --cp-bg - safe for body text */ --cp-accent: #b4f27b; /* unchanged: still a fill, still dark ink */ --cp-accent-ink: #2f5d16; /* 6.6:1 on --cp-bg - the important swap */ --cp-on-accent: #152111; /* 12.7:1 on the lime, same as dark */ --cp-accent-dim: #eef7e4; --cp-accent-line: #a9cf88; --cp-accent-glint: #2f5d16; /* = --cp-accent-ink: no shimmer on a pale ground */ --cp-ok: #2f5d16; --cp-warn: #8a5a00; --cp-bad: #a32020; --cp-warn-glint: #8a5a00; /* = --cp-warn */ --cp-info: #1d4f91; /* 7.3:1 on --cp-bg */ --cp-violet: #5b3fa6; /* 7.0:1 */ --cp-shadow: 0 20px 50px #0f1a2214; --cp-logo: url("/images/logoRoundalLight.webp"); --cp-hero-from: #dfe7f0; --cp-hero-mid: #c3d4e8; --cp-hero-rgb: 223, 231, 240; --cp-hero-art: url("/images/Soccer_ball.svg"); --cp-hero-art-pos: right 4% center; --cp-hero-art-size: auto 78%; --cp-hero-wm-opacity: .35; --cp-ink-rgb: 15, 26, 34; --cp-muted-rgb: 85, 101, 111; --cp-surface-rgb: 255, 255, 255; --cp-surface-2-rgb: 241, 244, 248; --cp-accent-rgb: 180, 242, 123; --cp-ok-rgb: 47, 93, 22; --cp-warn-rgb: 138, 90, 0; --cp-bad-rgb: 163, 32, 32; } @media (prefers-reduced-motion: reduce) { :root { --cp-motion: none; } }