Comber Cosmos Softball Club

The cosmic theme is built into every design decision. Deep space navy (#060C1A) with electric orange (#FF6B00) as the primary accent. Purple nebula tones add depth. Orbitron handles headings — geometric, futuristic, heavy and wide. Rajdhani carries body copy — condensed humanist, readable at all sizes. Together they create a graffiti-meets-mission-control aesthetic.

• Bespoke colour palette: deep space navy, electric orange, nebula purple
• Orbitron — geometric display face for headings and UI labels, heavy weight, wide tracking
• Rajdhani — condensed humanist sans-serif for body copy and sub-headings
• Custom orange-on-navy scrollbar ties the browser chrome into the brand
• Consistent visual language carried into the club's Facebook presence and hashtag (#WeAreCosmos)
• All decorative elements use aria-hidden so screen readers skip canvas and blobs

The hero section features a bespoke canvas-based starfield rendered entirely in JavaScript — no third-party library. Each star has individual twinkling speed, opacity, and radius. Larger stars get a subtle gold-orange halo tied back to the brand palette. An orbiting dot traces a circular path around the logo on a CSS animation keyframe.

• Custom <canvas> starfield — zero third-party animation libraries
• Per-star twinkling speed, opacity, and radius variation
• Gold-orange halo on larger stars, matching brand palette
• Fully responsive — canvas repaints on resize via ResizeObserver
• CSS orbit keyframe: dot traces circular path around the logo
• Smooth scroll enabled globally via CSS

Sanity Studio is embedded directly in the app at /studio. Club admins manage fixtures, events, teams, and site settings without touching code. Data is fetched server-side with Incremental Static Regeneration — fixtures revalidate every 60 seconds, site settings every hour.

• Sanity Studio embedded at /studio — no separate CMS login
• Fixtures: opponent name, abbreviation, logo, date, time, venue, home/away flag
• Events: title, subtitle, date, time, venue, price, highlights, charity partner, ticket URL
• Teams: reusable opponent records with logos for fixture display
• Site Settings: global assets like the Cosmos logo for the matchup card
• ISR: fixtures revalidate every 60s, site settings every 3600s
• New fixture or event publishable by club secretary in under two minutes

The "Next Game" section is the centrepiece of game days. The hero fixture card shows both teams as logo circles with a glowing VS badge, date, venue, and kick-off time. A ranked list handles the rest of the upcoming schedule. When an opponent has no logo, the component falls back to generated initials — the page never breaks regardless of data completeness.

• Hero fixture card: team logo circles, glowing VS badge, date, venue, kick-off
• Ranked upcoming schedule list below the hero card
• Graceful fallback to generated initials when opponent has no logo in CMS
• Empty state: polished message with Facebook link when no fixtures exist
• Hotspot-aware image cropping via Sanity image CDN
• Next.js Image optimisation for all team logos

Events are first-class content. Each card supports a badge label, full date and venue details, a highlights list, a charity partner card with distinct pink gradient styling, and a direct ticket link. When no upcoming events exist, a friendly empty state links to the club's Facebook page.

• Coloured badge labels (e.g. "FUNDRAISER") per event
• Date, time, venue, and price displayed on every card
• "What's On" highlights list per event
• Charity partner card with distinct pink gradient styling
• Direct ticket URL or fallback to club Facebook page
• Polished empty state when no upcoming events are scheduled