SOLSTICE — Three Nights of Sound · Music Festival
Key features
Neo-brutalist festival poster system: Anton condensed display + Manrope body, printed-paper canvas in day mode, near-black stage in night mode, lime + coral two-accent palette
Live countdown card to opening night (June 19, 2027) with days/hours/minutes/seconds ticking every second
Seamless rotating lime marquee of artist names (CSS animation, paused on hover, reduced-motion safe)
10-artist lineup in an asymmetric 12-column poster grid — varied spans, duotone photography that shifts to full color on hover
Stage schedule as tabs: Solar Stage, Lunar Dome and Afterhours timelines with time slots and opening/headline/sunrise badges
Tickets as a Compare surface: Day Pass €79, Weekend €179 (lime, most-loved flag), Solstice+ €279 with feature checklists
Day/Night theme toggle (the solstice switch), magnetic hero CTAs, scroll-reveal sections with expo-out easing, FAQ accordion, newsletter validation
Full i18n in 6 languages (EN/ES/FR/DE/IT/PT) with browser detection, dropdown switchers and translated SEO meta; WCAG AA contrast in both themes
Description
Landing page for SOLSTICE, a three-night music festival at the edge of summer (June 19–21, 2027). Design system: neo-brutalist festival poster — Anton condensed display + Manrope body, printed-paper off-white canvas in day mode and near-black stage in night mode, acid-lime (#B8F131) + stage-coral (#FF4D5A) two-accent committed palette, hard offset shadows, raw 2px ink borders, subtle engineering grid. The Day/Night toggle doubles as the solstice theme switch (kairos-theme key). Signature interactions: (1) a live countdown card to opening night (308+ days, ticking seconds); (2) a rotating lime marquee of artist names with a seamless CSS loop; (3) duotone artist cards that desaturate-to-color on hover, in an asymmetric 12-col poster grid (varied spans, never an identical card grid); (4) stage schedule tabs (Solar Stage / Lunar Dome / Afterhours) with time slots; (5) tickets as a Compare surface — Day Pass €79, Weekend €179 (lime, most-loved flag), Solstice+ €279; (6) magnetic CTA buttons, scroll-reveal sections with expo-out easing, FAQ accordion, newsletter with inline validation, and a delayed cookie banner. i18n complete in 6 languages (EN/ES/FR/DE/IT/PT) with browser detection, dropdown switchers and translated SEO meta. WCAG AA contrast verified across all text/background pairs in both themes; every animation respects prefers-reduced-motion.
Technologies used
HTML
CSS
JavaScript