Redesign LCARS hero graphic with refined, authentic display

[Copilot]

Overview

Replaced the neon-heavy, clunky radar + ship graphic on the docs site hero section with a refined, authentic LCARS-style display. The new design uses the official LCARS V2 muted color palette, features clean concentric arcs, and maintains visual coherence with the updated LCARS header/rails.

Changes

New LCARS Hero Graphic (docs/hero-lcars.svg)

Created an authentic LCARS vector panel featuring:

• Concentric arcs using the muted LCARS V2 palette (peach #F7BFA4, rose #E08AA3, lilac #C9B3FF, cyan #7EC8FF, amber #FF9E66)
• Radial tick marks at 30-degree intervals for scale indication
• LCARS-style accent bars on left/right sides with rounded rectangles
• Animated scanning sweep line for visual interest
• Subtle blinking blips at key positions
• Dark ink background (#0B0F18) for proper contrast
• Status text indicators (SCAN ACTIVE, SYS NOMINAL, RANGE: 200, MODE: AUTO)

Updated Hero Section (docs/index.html)

• Added inline SVG hero panel in the .hero section
• Positioned absolutely behind content with 35% opacity for subtlety
• Uses aria-hidden="true" for accessibility (decorative element)
• Preserves all existing hero content

LCARS-Scoped Styling (docs/bridge-screens.css)

• Hero panel hidden by default, shown only for body.theme-lcars or html[data-franchise-theme="lcars"]
• Hides original radar/ship graphics when LCARS theme is active
• Smooth 8-second rotation animation for sweep line
• Performance optimizations: will-change hints, animations paused when tab is hidden
• Respects prefers-reduced-motion preference

Theme Compatibility

✅ LCARS theme - Shows new refined hero graphic
✅ Cyberpunk theme - Shows original radar/ship (unaffected)
✅ Star Wars theme - Shows original radar/ship (unaffected)
✅ Stargate theme - Shows original radar/ship (unaffected)

Before & After

Before (neon-heavy radar)

After (LCARS theme with refined hero)

Full Page View

Other Themes Unaffected (Cyberpunk example)

Technical Details

• Scoping: All changes strictly scoped to LCARS theme selectors
• Static site compatible: No build step required, works with GitHub Pages
• Accessible: Decorative graphics properly marked with aria-hidden="true"
• Performant: CSS animations optimized with performance hints
• User preferences: Honors prefers-reduced-motion setting
• Valid markup: SVG validated as well-formed XML

Design Rationale

The new hero graphic addresses the original issues by:

• Replacing neon colors with the official LCARS V2 muted palette
• Using clean concentric arcs instead of busy circular patterns
• Adding authentic LCARS-style accent bars (rounded rectangles)
• Implementing a subtle dark ink background that doesn't overwhelm content
• Maintaining visual coherence with the LCARS V2 header/rails design
• Keeping the graphic at 35% opacity to serve as a subtle background element

The result is a cleaner, more authentic LCARS experience that enhances the Star Trek aesthetic without distracting from the hero content.

Original prompt

Task: Redesign the hero “ship + radar” graphic on the docs site to a cleaner, authentic LCARS-style display. The current hero graphic looks clunky and neon-heavy. Replace it with a refined LCARS vector panel that is accessible, performant, and coherent with the new LCARS V2 header/rails.

Current look to fix:

Scope

• Repository: hutoczky/FormatX
• Area: docs/ only (static site, no build step). Keep GitHub Pages publishing from docs/.
• Theme: changes must be scoped to html[data-franchise-theme="lcars"] so other themes remain unaffected.

Objectives

1. Replace the hero radar + ship shapes with a new SVG-based LCARS panel

   • Create docs/hero-lcars.svg: a vector panel with concentric arcs, tick marks, subtle grid, and a scanning sweep line; optional blips. Use LCARS palette (peach/rose/lilac/amber/cyan) with dark ink background. No neon glows.
   • Replace the current hero graphic markup in docs/index.html with an or inline that loads hero-lcars.svg.
   • Add CSS in docs/lcars-ui.css (or a small new docs/hero-lcars.css) to color via CSS variables and to animate the sweep using stroke-dashoffset. Provide prefers-reduced-motion: reduce to fully disable animation.
   • Ensure the headline and CTA buttons remain readable and centered over/adjacent to the panel as they are now.

   • Performance and behavior

     • Animation must be GPU-friendly; add will-change hints on animated strokes.
     • In docs/script.js, pause the hero sweep animation when the tab is hidden (visibilitychange) using a class toggle (e.g., .hero-paused on a wrapper).
     • No console errors. Avoid layout thrash.

   • Accessibility

     • Add role="img" and aria-label (e.g., "LCARS diagnostics panel animation") to the hero SVG if inline; if decorative only, use aria-hidden="true".
     • Maintain keyboard focus order for CTAs. Ensure contrast AA for any text over the panel.

   • Mobile/responsive

     • At ≤768px: scale down the panel, reduce sweep thickness, and keep CTAs readable. No horizontal overflow.

   • Publishing

     • Keep docs/ as Pages root. Ensure docs/.nojekyll exists.

   Acceptance criteria

   • The hero graphic no longer shows the bulky “ship + radar” look; instead it renders a refined LCARS diagnostic panel.
   • Animation runs smoothly and pauses in background; fully stops in prefers-reduced-motion.
   • No regressions to layout or navigation; contrast and focus states remain accessible.
   • Pages auto-publishes after merge and loads without console errors.

   Implementation details

   • Add: docs/hero-lcars.svg (new), optional docs/hero-lcars.css (new)
   • Update: docs/index.html (swap hero graphic), docs/lcars-ui.css (hook styles), docs/script.js (pause logic)
   • Keep changes minimal and commented.

   This pull request was created as a result of the following prompt from Copilot chat.

   Task: Redesign the hero “ship + radar” graphic on the docs site to a cleaner, authentic LCARS-style display. The current hero graphic looks clunky and neon-heavy. Replace it with a refined LCARS vector panel that is accessible, performant, and coherent with the new LCARS V2 header/rails.

   Current look to fix:

   

   Scope

   • Repository: hutoczky/FormatX
   • Area: docs/ only (static site, no build step). Keep GitHub Pages publishing from docs/.
   • Theme: changes must be scoped to html[data-franchise-theme="lcars"] so other themes remain unaffected.

   Objectives

   1. Replace the hero radar + ship shapes with a new SVG-based LCARS panel

      • Create docs/hero-lcars.svg: a vector panel with concentric arcs, tick marks, subtle grid, and a scanning sweep line; optional blips. Use LCARS palette (peach/rose/lilac/amber/cyan) with dark ink background. No neon glows.
      • Replace the current hero graphic markup in docs/index.html with an or inline that loads hero-lcars.svg.
      • Add CSS in docs/lcars-ui.css (or a small new docs/hero-lcars.css) to color via CSS variables and to animate the sweep using stroke-dashoffset. Provide prefers-reduced-motion: reduce to fully disable animation.
      • Ensure the headline and CTA buttons remain readable and centered over/adjacent to the panel as they are now.

   2. Performance and behavior

      • Animation must be GPU-friendly; add will-change hints on animated strokes.
      • In docs/script.js, pause the hero sweep animation when the tab is hidden (visibilitychange) using a class toggle (e.g., .hero-paused on a wrapper).
      • No console errors. Avoid layout thrash.

   3. Accessibility

      • Add role="img" and aria-label (e.g., "LCARS diagnostics panel animation") to the hero SVG if inline; if decorative only, use aria-hidden="true".
      • Maintain keyboard focus order for CTAs. Ensure contrast AA for any text over the panel.

   4. Mobile/responsive

      • At ≤768px: scale down the panel, reduce sweep thickness, and keep CTAs readable. No horizontal overflow.

   5. Publishing

      • Keep docs/ as Pages root. Ensure docs/.nojekyll exists.

   Acceptance criteria

   • The hero graphic no longer shows the bulky “ship + radar” look; instead it renders a refined LCARS diagnostic panel.
   • Animation runs smoothly and pauses in background; fully stops in prefers-reduced-motion.
   • No regressions to layout or navigation; contrast and focus states remain accessible.
   • Pages auto-publishes after merge and loads without console errors.

   Implementation details

   • Add: docs/hero-lcars.svg (new), optional docs/hero-lcars.css (new)
   • Update: docs/index.html (swap hero graphic), docs/lcars-ui.css (hook styles), docs/script.js (pause logic)
   • Keep changes minimal and commented.

   ---

   ✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.