/* ============================================================ Nilside brand override — BALL & TRAIL (Direction 2A) Source: nilside-brand-tokens.md (sections 01–05). Load AFTER the Goal theme's styles.css (already linked last in BaseLayout.astro). Fonts (Public Sans + Space Mono) come from a Google Fonts added in BaseLayout.astro . SYSTEM: two grounds only. Marketing + portal (this site) = CHALK #F7F5F2 with ink text. The app (#111) is a separate surface, not this codebase. No dark mode here in v1. Coral #FF5A36 is BRAND ONLY — never an outcome color. This override flips the theme's token-driven surfaces dark→light and sets the CTA + fonts. Code still finishes the pass against a live build: header lockup, remove gradient imagery, and fix any section that hardcodes a dark background/white text outside these tokens (see the handoff). ============================================================ */ :root{ /* — Ground: dark → chalk light — */ --_colors---background-color--dark:#F7F5F2; /* chalk.50 — primary ground (was #0b0d13) */ --_colors---background-color--blackish-blue:#EDE9E3; /* chalk.100 — cards (was #060610) */ --_colors---text-color--blackish-blue:#111111; /* ink.900 (was #060610) */ --_colors---background-color--black:#EDE9E3; /* chalk.100 (was black) */ --_colors---background-color--gray:#EDE9E3; /* chalk.100 (was #b6b6b8) */ --_colors---background-color--light-silver:#EDE9E3; /* chalk.100 (was #d9d9d9) */ --_colors---border-color--mid-tone-gray:#DDD8D0; /* chalk.border (was #7e7e7e) */ /* — Text: white → ink — */ --_colors---text-color--white:#111111; /* ink.900 (was white) */ --_colors---text-color--white-opacity-50:#3D382F80; /* ink.700 @50 */ --_colors---text-color--white-opacity-10:#1111111a; --_colors---text-color--0b0d13-opacity-70:#3D382Fcc; /* ink.700 body */ --_colors---text-color--dark-opacity-70:#3D382Fcc; /* — Neutrals — */ --_colors---button-color--quick-silver:#8A8175; /* ink.400 */ --_colors---button-color--granite-gray:#8A8175; /* ink.400 */ /* — Brand: theme's accent red → coral — */ --_colors---text-color--bright-red:#FF5A36; /* brand.coral */ /* — Type: Public Sans everywhere (hero uses 800 italic in markup) — */ --font-family--anton:'Public Sans',system-ui,sans-serif; --font-family--inter-tight:'Public Sans',system-ui,sans-serif; /* — Nilside design tokens (portal data-viz, results card, event encoding) — */ --nilside-coral:#FF5A36; --nilside-coral-text:#C4441F; --event-save:#0FB5A0; --event-save-text:#0A7E6F; --event-save-deep:#04372F; --event-goalfor:#FFC145; --event-block:#8B7BF0; --event-offtarget:#8A8175; --state-offline:#FFC145; --ink-900:#111111; --ink-700:#3D382F; --ink-400:#8A8175; --chalk-50:#F7F5F2; --chalk-100:#EDE9E3; --chalk-border:#DDD8D0; } /* Primary CTA — coral fill, white text, SHARP corners (Ball & Trail: radius 0 on buttons). */ .primary-button{ background-color:var(--nilside-coral); color:#ffffff; border-color:var(--nilside-coral); border-radius:0; } .primary-button:hover{ filter:brightness(0.94); } .primary-button .primary-button-text, .primary-button-text{ color:#ffffff; } /* Inline links on the light ground use coral-text (AA). */ a{ color:var(--nilside-coral-text); } /* Space Mono carries every figure — scores, %, stat lines, timestamps, zone labels. Code: add class="mono" to numerals, or map the theme's number elements here. */ .mono,[data-figure]{ font-family:'Space Mono',monospace; } /* Ball & Trail has NO gradients. Code: remove the theme's gradient background images (Hero-Gradient / Ellipse-* / Intersect / BG-map) rather than recolor — the system uses solid chalk grounds and photography behind solid backing blocks. Also remap the two hardcoded theme blues in styles.css to coral: #3898EC (lines 216, 347) and #0158ff (4507, 4533, 4576) → var(--nilside-coral) for fills, #C4441F for inline link text on light. */ /* ============================================================ Code build-integration pass (finishes what the token file delegates). ============================================================ */ :root { --nilside-surface-white: #FFFFFF; } /* light card/section ground (was the dual-role white token) */ /* Header lockup: Ball & Trail mark + live wordmark (Public Sans 800 italic). */ .nilside-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .nilside-mark { height: 26px; width: auto; display: block; } .nilside-wordmark { font-family: 'Public Sans', system-ui, sans-serif; font-weight: 800; font-style: italic; font-size: 26px; letter-spacing: -0.04em; line-height: 1; color: var(--ink-900); } /* Typography treatment: Public Sans; display is italic 800; section titles 700; no caps. */ h1, h2, h3, h4, h5, h6, [class*="heading-style"] { font-family: 'Public Sans', system-ui, sans-serif; color: var(--ink-900); text-transform: none; } h1, [class*="heading-style-h1"] { font-weight: 800; font-style: italic; letter-spacing: -0.045em; line-height: 1.02; } h2, [class*="heading-style-h2"] { font-weight: 700; letter-spacing: -0.03em; } h3, h4, [class*="heading-style-h3"], [class*="heading-style-h4"] { font-weight: 700; letter-spacing: -0.025em; } /* No gradients in Ball & Trail — remove the theme's gradient art + dark hero/texture treatments. */ img[alt$="Gradient" i] { display: none !important; } .home-hero-section, .home-hero-section.bg-video, .bg-video { background-image: none !important; background-color: var(--chalk-50) !important; } .home-hero-section video, .bg-video video { display: none !important; } .streaming-section { background-image: none !important; background-color: var(--chalk-100) !important; } /* Interior content pages used a hardcoded dark wrapper (rgba(11,13,19,.7)). Ball & Trail is a light system — flatten to a white surface with ink text. */ .terms-wrapper, .wrapper.terms-wrapper { background-color: var(--nilside-surface-white) !important; } .terms-wrapper, .terms-wrapper p, .terms-wrapper li, .terms-wrapper span, .terms-wrapper td { color: var(--ink-700) !important; } .terms-wrapper h1, .terms-wrapper h2, .terms-wrapper h3, .terms-wrapper h4 { color: var(--ink-900) !important; }