Redesign start screen as Minimalist Elegant landing page

[Copilot]

Replaces the theatrical Bollywood masala start screen (ornate dashed borders, looping animations, heavy gradients) with a refined, performance-focused landing page that prioritises typography, whitespace, and clarity.

Layout

• Hero — full-viewport, Playfair Display at clamp(3rem, 10vw, 5.5rem), ghost outline CTA (border: 1px solid var(--accent-gold))
• Why You'll Love It — 3-column auto-fit grid; cards use a single 2px coloured top border (magenta / teal / gold) instead of dashed ornate frames
• How to Play — numbered list with large ghost step-numerals (opacity: 0.12) as typographic decoration
• Final CTA — solid var(--accent-gold) button with opacity/box-shadow hover only

CSS

• Single @keyframes elegantFadeIn (hero entrance); no looping animations
• Button hover targets named classes .hero-cta / .final-cta — not fragile attribute selectors
• Added --bg-near-black: #0C0A14 to :root in app.css; all hardcoded hex replaced with the variable
• Decorative scroll hint marked aria-hidden="true"

Screenshot

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• releases.astral.sh
  • Triggering command: /home/REDACTED/.local/bin/uv uv run pytest tests/ -v (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Redesign the start_screen.html component as a Minimalist Elegant landing page. This variation prioritizes refinement, readability, and performance through restrained design.

Key Characteristics:

• Clean Typography Focus: Let the serif fonts (Playfair Display) breathe with generous whitespace
• Subtle Aesthetics: Minimal decorative elements, only essential design details, understated borders
• Restrained Animations: Only critical moments get animation (page entrance, button hover); no floating elements or constant motion
• Modern Refinement: Feels contemporary and sophisticated rather than theatrical; elegant, not busy
• Layout: Hero (centered, breathing room) → Why section (3 simple cards, minimal ornamentation) → How It Works (clean step numbers, simple typography) → Final CTA (spacious, centered)
• Hover Effects: Subtle (slight color shift, minimal glow), focus on clarity not drama

Content Requirements:

• Hero: Centered "BOLLYWOOD BINGO" title, optional tagline, value proposition in clean prose
• Why Section: 3 cards with minimal borders (no dashed ornate style), focus on text content
• Steps: Simple numbered list or timeline, minimal visual flourish, clear readable copy
• Optional Testimonials: Skip or present as simple text quotes (no background cards if not essential)
• CTAs: Single prominent button, subtle glow effects

Design Constraints:

• Use existing color palette but with restraint (not every element is colorful)
• Keep HTMX functionality for /start route
• CSS-only, minimal animation complexity
• Fast loading (keep asset/animation payload minimal)
• Mobile-first responsive design with simplified layouts on small screens
• High contrast text for accessibility (WCAG AA or better)

Trade-offs for This Variation:

• ✅ PERFORMANCE: Minimal animations, smaller CSS, faster page load
• ✅ ACCESSIBILITY: Cleaner markup, less cognitive load, better screen reader experience
• ✅ PROFESSIONALISM: Sophisticated, refined look appeals to serious users
• ✅ USABILITY: Clear content hierarchy, easy to scan
• ❌ ENGAGEMENT: Less "wow" factor, might feel generic compared to theatrical alternatives
• ❌ BRAND PERSONALITY: Less distinctly Bollywood, more corporate

File to Update:

• app/templates/components/start_screen.html