Enhance LCARS theme with console-style Star Trek visuals

[Copilot]

Overview

This PR implements a comprehensive visual enhancement to the LCARS theme, transforming it into an authentic Star Trek-style console interface with segmented amber/cyan blocks, rounded panels, micro labels, and a dark ink background.

Changes Made

Enhanced Console Palette

Added authentic LCARS color tokens with high contrast:

• Ink background: Nearly black (#0B0F18) with subtle vertical pinstripes
• Accent colors: Amber (#FFAA66), Gold (#FFB84D), Cyan (#88D4FF), Rose (#E88AAA), Magenta (#DD77AA), Peach (#FFCCAA), Lilac (#CCB3FF)

LCARS Panel Styling

All major content sections now feature console-like panels:

• Rounded rectangles with dark fills and subtle inner shadows
• Glowing cyan borders (1.5-2px) with box-shadow effects
• Segmented accent bars at top using repeating-linear-gradient with color patterns:
  • Hero: Amber → Rose → Gold
  • Feature cards: Amber → Rose
  • Download cards: Gold → Magenta
  • Docs cards: Peach → Lilac

Micro Labels

Tiny uppercase labels positioned at top-right of panels for authentic LCARS aesthetic:

• HERO (cyan) on hero section
• DL (amber) on download cards
• DOC (lilac) on documentation cards
• CTA (amber) on call-to-action section

Button & UI Elements

• Primary buttons: Cyan gradient backgrounds with dark ink text
• Ghost buttons: Transparent with cyan borders and glow effects
• Chips/Pills: Amber/gold gradient with high contrast text
• Focus states: Amber outlines for accessibility (WCAG AA compliant)

Responsive Design

Mobile optimizations (≤768px):

• Reduced border-radius (20px → 14px)
• Smaller padding and micro labels
• Maintained visual hierarchy

Technical Details

• File modified: docs/lcars-ui.css (+502 lines)
• No HTML changes: Pure CSS implementation
• Properly scoped: All styles use body.theme-lcars and html[data-franchise-theme="lcars"] selectors
• Non-breaking: Other themes (Cyberpunk, Star Wars, Stargate) remain unaffected

Screenshots

Before

After (Desktop)

Mobile View

Testing

• ✅ Desktop view (1440x900)
• ✅ Mobile view (375x667)
• ✅ Theme isolation verified (other themes unaffected)
• ✅ Keyboard navigation and focus states
• ✅ Color contrast meets WCAG AA standards

Result

The LCARS theme now provides an authentic Star Trek console experience with segmented panels, micro labels, and LCARS-style color blocking, while maintaining modern web standards, accessibility, and full responsiveness.

Original prompt

Objective: Update the LCARS theme visuals to resemble the Star Trek-style console shown, without changing the page structure. Implement a visual pass in lcars-ui.css so that the site, when LCARS theme is active, more closely matches the segmented amber/cyan block style, micro-labels, rounded panels, and dark ink background seen on the console.

References (for visual parity and current site state)

• Inspiration (STO console):
• Current site screenshot:

Constraints

• Do not change HTML structure. Apply styling via CSS only, scoped to LCARS theme selectors (html[data-franchise-theme="lcars"], body.theme-lcars ...).
• Keep the animated bridge overlay disabled for LCARS (guard remains in lcars-prime.css and bridge-screens.css).
• Maintain accessibility: legible contrast, focus outlines, and keyboard usability.

Tasks

1. Palette and base

• Define LCARS console-like palette tokens in lcars-ui.css (amber/gold, cyan, rose/magenta, ink). Ensure high contrast on dark backgrounds.
• Strengthen background to a nearly black "ink" with very subtle vertical pinstripes to mimic LCARS glass.

2. Header and navigation

• Convert the header nav appearance to segmented LCARS pads:
  • Nav items appear as flat amber/cyan blocks with left-side rounded corners and micro label ticks using ::before or ::after.
  • Active/hover states lift slightly and brighten.
  • Keep sticky single top rail from lcars-prime.css; these lcars-ui.css changes should complement (not fight) it.

3. Section panels & cards

• Style .hero, .features .card, .download .download-card, .docs .docs-card as LCARS "panels":
  • Rounded rectangles, dark fill, subtle inner shadow inset, 1–2px cyan outline with glow.
  • Add segmented accent bars using repeating-linear-gradient with amber/rose for titles and separators.
  • Add tiny uppercase microtext labels using data-label (fallback to text if unset) placed at the top-right.

4. Microtext and status pills

• Provide tiny pill elements style (status dots, chips) with LCARS amber/cyan backgrounds and narrow rounded shapes.

5. Responsiveness

• Ensure pads don’t overflow; reduce padding/radius on <=768px.

6. Non-regression with existing LCARS files

• Do not remove prior rules; add or refine so that LCARS still looks clean if lcars-prime.css is present. These changes should enhance lcars-ui.css visuals while respecting lcars-prime’s header rail and the overlay’s LCARS guard.

Acceptance criteria

• With LCARS theme enabled, the hero, cards, and nav visually echo the console in : segmented amber/cyan accents, rounded pads, micro labels, darker ink base.
• No HTML edits; no new classes required in markup.
• Focus outline is visible; color contrast passes WCAG AA for text on pads.
• No changes to non-LCARS themes.

Files to change

• docs/lcars-ui.css only.

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

Objective: Update the LCARS theme visuals to resemble the Star Trek-style console shown, without changing the page structure. Implement a visual pass in lcars-ui.css so that the site, when LCARS theme is active, more closely matches the segmented amber/cyan block style, micro-labels, rounded panels, and dark ink background seen on the console.

References (for visual parity and current site state)

• Inspiration (STO console):
• Current site screenshot:

Constraints

• Do not change HTML structure. Apply styling via CSS only, scoped to LCARS theme selectors (html[data-franchise-theme="lcars"], body.theme-lcars ...).
• Keep the animated bridge overlay disabled for LCARS (guard remains in lcars-prime.css and bridge-screens.css).
• Maintain accessibility: legible contrast, focus outlines, and keyboard usability.

Tasks

1. Palette and base

• Define LCARS console-like palette tokens in lcars-ui.css (amber/gold, cyan, rose/magenta, ink). Ensure high contrast on dark backgrounds.
• Strengthen background to a nearly black "ink" with very subtle vertical pinstripes to mimic LCARS glass.

2. Header and navigation

• Convert the header nav appearance to segmented LCARS pads:
  • Nav items appear as flat amber/cyan blocks with left-side rounded corners and micro label ticks using ::before or ::after.
  • Active/hover states lift slightly and brighten.
  • Keep sticky single top rail from lcars-prime.css; these lcars-ui.css changes should complement (not fight) it.

3. Section panels & cards

• Style .hero, .features .card, .download .download-card, .docs .docs-card as LCARS "panels":
  • Rounded rectangles, dark fill, subtle inner shadow inset, 1–2px cyan outline with glow.
  • Add segmented accent bars using repeating-linear-gradient with amber/rose for titles and separators.
  • Add tiny uppercase microtext labels using data-label (fallback to text if unset) placed at the top-right.

4. Microtext and status pills

• Provide tiny pill elements style (status dots, chips) with LCARS amber/cyan backgrounds and narrow rounded shapes.

5. Responsiveness

• Ensure pads don’t overflow; reduce padding/radius on <=768px.

6. Non-regression with existing LCARS files

• Do not remove prior rules; add or refine so that LCARS still looks clean if lcars-prime.css is present. These changes should enhance lcars-ui.css visuals while respecting lcars-prime’s header rail and the overlay’s LCARS guard.

Acceptance criteria

• With LCARS theme enabled, the hero, cards, and nav visually echo the console in : segmented amber/cyan accents, rounded pads, micro labels, darker ink base.
• No HTML edits; no new classes required in markup.
• Focus outline is visible; color contrast passes WCAG AA for text on pads.
• No changes to non-LCARS themes.

Files to change

• docs/lcars-ui.css only.

---

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