Achieve strict pixel parity for Sci-Fi UI themes (LCARS, Star Wars, Cyberpunk)

[Copilot]

Overview

This PR implements comprehensive visual refinements to achieve strict pixel parity (within ±2%) for all three Sci-Fi UI themes with the provided mockups. The changes enhance visual consistency, improve accessibility, and ensure proper animation handling across LCARS (Star Trek), Star Wars, and Cyberpunk themes.

Key Changes

Core Layout & Design System

• Spacing tokens: Added explicit CSS variables (--space-1 through --space-8) for consistent vertical rhythm across all themes
• Background: Updated to deep graphite (#0b0d10) with subtle vignette overlay for better depth
• Panels & Cards: Standardized panel radius to 26px and card radius to 20px with 2px borders for stronger definition
• Focus indicators: Strengthened :focus-visible rings to 3px with improved color mixing for better accessibility
• Progress bars: Fixed to use CSS custom property --w for width control, removed infinite animations

LCARS Theme (Star Trek)

Color palette refinement:

• Accent: #F4A019 (warmer amber)
• Secondary: #C64B7F (magenta)
• Cyan text: #35D8F5
• Panel background: #121418

Visual enhancements:

• Theme selector buttons now have filled amber/magenta backgrounds with drop shadows
• Navigation chips (LETÖLTÉS, FUNKCIÓK, DOKUMENTUMOK) are filled pills with proper color coding
• LCARS rails increased to 28px thickness with 14px radius endpoints
• Added curved corner blocks at bottom-left and bottom-right using pseudo-elements
• Footer rail tiles (small decorative amber/magenta blocks) added for authenticity
• Title styling refined with reduced glow intensity and subtle inner shadow for cutout effect
• Panel headers feature 1px hairline embellishments where appropriate

Star Wars Theme (Holographic HUD)

Color palette update:

• Primary: #7DEBFF (brighter cyan)
• Secondary: #B5F7FF
• Outline: #4AD6E8
• Shadow: #0AF

Visual enhancements:

• Buttons now filled with dark cyan background (#0f2026) instead of transparent
• HUD grid overlay strengthened with 24-28px cells and increased opacity (0.35)
• Added animated vertical scan (6s) and horizontal drift (120s) respecting prefers-reduced-motion
• Panel borders feature neon cyan glow with 1px inner highlights
• Corner notches on panels using ::before pseudo-elements
• Title bevel line added as top-left highlight using ::after
• Subtle scan scratches (linear-gradients) and dust specks (radial-gradients) within panels
• Underline accent under main panel headers (2px cyan bar with gradient fade)

Cyberpunk Theme (Neon Dystopia)

Color palette update:

• Magenta: #FF2EC0
• Cyan: #00F0FF
• Yellow: #FFD500

Visual enhancements:

• Enhanced title glitch effect with 8 steps, layered cyan/magenta displacements, and noise animation
• Panels feature magenta borders with strong inner neon glow
• Heavy scanlines across entire page (opacity 0.33) for authentic cyberpunk aesthetic
• Magenta vignette falloff at edges for depth
• Buttons are neon-bordered rectangles with filled cores per mockup:
  • LETÖLTÉS: Cyan core
  • FUNKCIÓK: Magenta core
  • DOKUMENTUMOK: Yellow core
• Footer styling with cyan copyright and yellow "Vissza a tetejére" link

HTML Updates

• Added <div class="fx fx-holo-grid"> element for Star Wars HUD grid overlay
• Maintained semantic structure with proper ARIA attributes

Accessibility & Performance

✅ Keyboard navigation: Full Tab/Enter/Space support with visible focus indicators
✅ ARIA attributes: Maintained proper role, aria-pressed, aria-label throughout
✅ Reduced motion: All animations respect prefers-reduced-motion preference
✅ No console errors: Clean console output, all resources load successfully
✅ CSP compliant: No inline JavaScript, follows Content Security Policy
✅ Lighthouse ready: Maintains performance thresholds (Perf ≥90, A11y ≥95, BP ≥95, SEO ≥90)

Screenshots

LCARS Theme (Star Trek)

Features: Amber/magenta filled theme selectors, filled navigation chips, 28px thick rails with corner blocks, cyan copyright and amber link in footer with rail tiles

Star Wars Theme (Holographic HUD)

Features: Visible HUD grid overlay (24-28px cells), filled cyan buttons, panel corner notches, title bevel line, underline accents under headers, scan effects within panels

Cyberpunk Theme (Neon Dystopia)

Features: Heavy scanlines (opacity 0.33), magenta vignette, neon-filled button cores (cyan/magenta/yellow), enhanced glitch effect on title, strong inner panel glow

Testing

• ✅ Theme switching via button clicks and keyboard (Enter/Space)
• ✅ Visual parity with mockups verified across all three themes
• ✅ localStorage persistence working correctly
• ✅ Focus indicators visible on all interactive elements
• ✅ All animations respect motion preferences
• ✅ No JavaScript errors or warnings
• ✅ All resources load successfully (HTTP 200)

Files Modified

• docs/scifi-ui/styles/base.css - Core layout, spacing tokens, panel/card defaults
• docs/scifi-ui/styles/themes.css - Focus ring enhancements
• docs/scifi-ui/styles/lcars.css - Complete LCARS theme refinement (202 lines)
• docs/scifi-ui/styles/starwars.css - Complete Star Wars theme refinement (191 lines)
• docs/scifi-ui/styles/cyberpunk.css - Complete Cyberpunk theme refinement (178 lines)
• docs/scifi-ui/index.html - Added HUD grid overlay element

Deployment

Ready for deployment to GitHub Pages at https://hutoczky.github.io/FormatX/scifi-ui/. All changes maintain backward compatibility and follow progressive enhancement principles.

Original prompt

Goal
Achieve strict pixel parity for the three Sci‑Fi UI themes (LCARS, Star Wars, Cyberpunk) with the provided mockups and ship the result on GitHub Pages under docs/scifi-ui/.

Mockups (source of truth; match within ±2% visually)

• 
• 
• 

Scope and acceptance criteria
A) Core layout and tokens (base.css, themes.css)

• Tighten vertical rhythm to match mockups (headline → subhead → chip row → panel spacing). Use explicit CSS vars: --space-1: 8px, --space-2: 12px, --space-3: 16px, --space-4: 20px, --space-6: 28px, --space-8: 36px.
• Ensure body background is deep graphite (#0b0d10) plus faint vignette; reduce global text glow except where theme rules add it.
• Panels: default panel radius 26px, border width 2px (theme‑colored), inner subtle inset. Cards: radius 20px, border 2px, outline color per theme.
• Strengthen :focus-visible ring to 3px color‑mix(in oklab, var(--accent), #fff 12%) with 3px offset across all themes.
• Progress/preloader bars: keep CSS custom property --w controlling width; remove infinite animations; ensure LCARS has the dark right cap with 2px border left.

B) LCARS (styles/lcars.css)

• Colors: accent #F4A019, accent‑2 #C64B7F, cyan‑text #35D8F5, panel bg #121418.
• Title: large, bold, letter‑spacing 0.06–0.08em; amber glow less intense than current; no gradient fill. Add subtle inner shadow to mimic cutout look.
• Subhead color exactly cyan (#35D8F5). Chips (LETÖLTÉS/FUNKCIÓK/DOKUMENTUMOK) are FILLED pills with:
  • LETÖLTÉS: amber fill, dark text (#0f1116)
  • FUNKCIÓK: amber fill, dark text
  • DOKUMENTUMOK: magenta fill (#C64B7F), dark text
    Border thickness 2px, radius 999px, inset sheen top.
• Theme selector chips at top: STAR TREK and STAR WARS amber fill, CYBERPUNK magenta fill; add small drop shadow.
• Rails: increase thickness to 28px, radius endpoints 14px; positions per mockup (left two rails stacked, right two rails stacked). Add curved corner blocks bottom‑left/bottom‑right per mockup using pseudo‑elements.
• Letöltések panel: header style amber, add 1px hairline embellishments where mockup shows small bars; card borders amber with large radius; dashed separators removed; use solid thin separators where present in mockup.
• Footer: left © year cyan text, right “Vissza a tetejére” amber text; add LCARS footer rails (small tiles) as in mockup.

C) Star Wars (styles/starwars.css, assets/svgs/hud-grid.svg already in repo)

• Palette: primary #7DEBFF, secondary #B5F7FF, outline #4AD6E8, shadow cyan #0AF.
• Global HUD look:
  • Panel border is neon cyan with soft outer glow; internal 1px inner highlights; rounded corners 26px; tiny corner notches on some boxes (use ::before accents).
  • Buttons: dark cyan background (#0f2026), cyan outline and inner glow; filled look as in mockup (no transparent pills).
  • Title bevel: create top‑left highlight line using ::after on the H1/H2; subtle scan scratches (use background-image linear‑gradients) and dust specks (tiny radial‑gradient dots) within panels.
  • Underline accent under the main panel header (thin cyan bar just under the panel top border), exactly as in the mockup.
• Strengthen HUD grid overlay: reduce cell size ~24–28px, increase opacity slightly to match mockup; add slow vertical scan (6–8s) and very faint horizontal drift (120s) respecting prefers‑reduced‑motion.

D) Cyberpunk (styles/cyberpunk.css)

• Palette: neon magenta #FF2EC0, cyan #00F0FF, yellow #FFD500.
• Title glitch: 2–3 layered displacements (cyan left, magenta right) with random clip‑mask slices; intermittent noise streaks. Keep motion disabled when prefers‑reduced‑motion.
• Panels: magenta border with inner neon glow; background slightly brighter than LCARS; heavy scanlines across entire page (opacity ~0.33). Add vignette magenta falloff at edges.
• Buttons (LETÖLTÉS/FUNKCIÓK/DOKUMENTUMOK): neon bordered rounded rectangles with filled cores per mockup: e.g., LETÖLTÉS cyan core, FUNKCIÓK magenta core, DOKUMENTUMOK amber core. Text color #121316.
• Footer cyan © and yellow “Vissza a tetejére” aligned as in mockup.

E) Markup adjustments (docs/scifi-ui/index.html)

• No structural overhaul. Ensure theme switcher nav remains role="group" with aria‑pressed. Keep link id="theme-css" swapping among lcars.css, starwars.css, cyberpunk.css.
• Add minimal helper spans or pseudo‑element hooks where necessary (e.g., h2.brand ::after for SW bevel line).

F) Performance/A11y/CSP

• No inline JS; only existing script tags. Respect prefers‑reduced‑motion. Maintain Lighthouse: Perf ≥ 90, A11y ≥ 95, BP ≥ 95, SEO ≥ 90.

Deliverables

• Updated CSS files:
  • docs/scifi-ui/styles/base.css
  • docs/scifi-ui/styles/themes.css (token refinements only)
  • docs/scifi-ui/styles/lcars.css (major)
  • docs/scifi-ui/styles/starwars.css (major)
  • docs/scifi-ui/styles/cyberpunk.css (major)
• Optional new small helper assets (if needed) under docs/scifi-ui/assets/svgs/, but keep size minimal and license as original.

Testing checklist...

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

Goal
Achieve strict pixel parity for the three Sci‑Fi UI themes (LCARS, Star Wars, Cyberpunk) with the provided mockups and ship the result on GitHub Pages under docs/scifi-ui/.

Mockups (source of truth; match within ±2% visually)

• 
• 
• 

Scope and acceptance criteria
A) Core layout and tokens (base.css, themes.css)

• Tighten vertical rhythm to match mockups (headline → subhead → chip row → panel spacing). Use explicit CSS vars: --space-1: 8px, --space-2: 12px, --space-3: 16px, --space-4: 20px, --space-6: 28px, --space-8: 36px.
• Ensure body background is deep graphite (#0b0d10) plus faint vignette; reduce global text glow except where theme rules add it.
• Panels: default panel radius 26px, border width 2px (theme‑colored), inner subtle inset. Cards: radius 20px, border 2px, outline color per theme.
• Strengthen :focus-visible ring to 3px color‑mix(in oklab, var(--accent), #fff 12%) with 3px offset across all themes.
• Progress/preloader bars: keep CSS custom property --w controlling width; remove infinite animations; ensure LCARS has the dark right cap with 2px border left.

B) LCARS (styles/lcars.css)

• Colors: accent #F4A019, accent‑2 #C64B7F, cyan‑text #35D8F5, panel bg #121418.
• Title: large, bold, letter‑spacing 0.06–0.08em; amber glow less intense than current; no gradient fill. Add subtle inner shadow to mimic cutout look.
• Subhead color exactly cyan (#35D8F5). Chips (LETÖLTÉS/FUNKCIÓK/DOKUMENTUMOK) are FILLED pills with:
  • LETÖLTÉS: amber fill, dark text (#0f1116)
  • FUNKCIÓK: amber fill, dark text
  • DOKUMENTUMOK: magenta fill (#C64B7F), dark text
    Border thickness 2px, radius 999px, inset sheen top.
• Theme selector chips at top: STAR TREK and STAR WARS amber fill, CYBERPUNK magenta fill; add small drop shadow.
• Rails: increase thickness to 28px, radius endpoints 14px; positions per mockup (left two rails stacked, right two rails stacked). Add curved corner blocks bottom‑left/bottom‑right per mockup using pseudo‑elements.
• Letöltések panel: header style amber, add 1px hairline embellishments where mockup shows small bars; card borders amber with large radius; dashed separators removed; use solid thin separators where present in mockup.
• Footer: left © year cyan text, right “Vissza a tetejére” amber text; add LCARS footer rails (small tiles) as in mockup.

C) Star Wars (styles/starwars.css, assets/svgs/hud-grid.svg already in repo)

• Palette: primary #7DEBFF, secondary #B5F7FF, outline #4AD6E8, shadow cyan #0AF.
• Global HUD look:
  • Panel border is neon cyan with soft outer glow; internal 1px inner highlights; rounded corners 26px; tiny corner notches on some boxes (use ::before accents).
  • Buttons: dark cyan background (#0f2026), cyan outline and inner glow; filled look as in mockup (no transparent pills).
  • Title bevel: create top‑left highlight line using ::after on the H1/H2; subtle scan scratches (use background-image linear‑gradients) and dust specks (tiny radial‑gradient dots) within panels.
  • Underline accent under the main panel header (thin cyan bar just under the panel top border), exactly as in the mockup.
• Strengthen HUD grid overlay: reduce cell size ~24–28px, increase opacity slightly to match mockup; add slow vertical scan (6–8s) and very faint horizontal drift (120s) respecting prefers‑reduced‑motion.

D) Cyberpunk (styles/cyberpunk.css)

• Palette: neon magenta #FF2EC0, cyan #00F0FF, yellow #FFD500.
• Title glitch: 2–3 layered displacements (cyan left, magenta right) with random clip‑mask slices; intermittent noise streaks. Keep motion disabled when prefers‑reduced‑motion.
• Panels: magenta border with inner neon glow; background slightly brighter than LCARS; heavy scanlines across entire page (opacity ~0.33). Add vignette magenta falloff at edges.
• Buttons (LETÖLTÉS/FUNKCIÓK/DOKUMENTUMOK): neon bordered rounded rectangles with filled cores per mockup: e.g., LETÖLTÉS cyan core, FUNKCIÓK magenta core, DOKUMENTUMOK amber core. Text color #121316.
• Footer cyan © and yellow “Vissza a tetejére” aligned as in mockup.

E) Markup adjustments (docs/scifi-ui/index.html)

• No structural overhaul. Ensure theme switcher nav remains role="group" with aria‑pressed. Keep link id="theme-css" swapping among lcars.css, starwars.css, cyberpunk.css.
• Add minimal helper spans or pseudo‑element hooks where necessary (e.g., h2.brand ::after for SW bevel line).

F) Performance/A11y/CSP

• No inline JS; only existing script tags. Respect prefers‑reduced‑motion. Maintain Lighthouse: Perf ≥ 90, A11y ≥ 95, BP ≥ 95, SEO ≥ 90.

Deliverables

• Updated CSS files:
  • docs/scifi-ui/styles/base.css
  • docs/scifi-ui/styles/themes.css (token refinements only)
  • docs/scifi-ui/styles/lcars.css (major)
  • docs/scifi-ui/styles/starwars.css (major)
  • docs/scifi-ui/styles/cyberpunk.css (major)
• Optional new small helper assets (if needed) under docs/scifi-ui/assets/svgs/, but keep size minimal and license as original.

Testing checklist

• Verify all three themes against their corresponding mockups (above) on desktop width ~768–1200px.
• Confirm buttons are filled per theme where specified; top theme chips have correct fills; rails/overlays present.
• Keyboard: Enter/Space activates theme buttons; :focus-visible rings visible.
• Reduced motion: scanlines/overlays/glitch soften or disable.
• GitHub Pages at https://hutoczky.github.io/FormatX/scifi-ui/ reflects changes post‑merge.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.