Fix download card layout and enhance sci-fi theme UI effects

[Copilot]

Problem

The download cards in the "Letöltések" section were displaying incorrectly - they were bunched together inline like pills instead of displaying as proper block-level cards in a grid layout. This was caused by .download-card inheriting button styles from the collective selector nav button, .panel .btn, .quick-links a, .download-card in all three theme files.

Additionally, the theme backgrounds were not fully capturing the atmosphere of their respective universes (Star Trek LCARS, Star Wars HUD, Cyberpunk neon-glitch).

Solution

1. Fixed Download Card Layout

• Removed .download-card from the button selector in all three theme CSS files (starwars.css, lcars.css, cyberpunk.css)
• Added dedicated .download-card styling with:
  • display: block; width: 100% for proper block-level layout
  • white-space: normal; word-break: break-word for text wrapping
  • Responsive grid layout: repeat(auto-fit, minmax(320px, 1fr))
  • Single column layout on mobile (≤700px)
  • Smooth hover/focus transitions with subtle elevation effect

2. Improved Accessibility

• Added role="list" to .download-list container
• Added role="listitem" to each download card link
• Added descriptive aria-label attributes (e.g., "FormatX Light telepítő letöltése")
• Added title tooltips for better context
• Implemented visible focus states with outline: 2px solid (theme-specific colors) and outline-offset: 2px for keyboard navigation

3. Enhanced Theme-Specific Visual Effects

Star Wars Theme:

• More dynamic starfield with 7 gradient layers at varying opacities
• Slower, subtler scanlines (opacity reduced to 0.12, animation slowed to 8s)
• Added radial holographic sweep with circular scanning motion (12s rotation)
• Added concentric HUD rings with gentle pulsing animation
• Refined card styling with holo-blue borders and softer text shadows

LCARS Theme:

• Added LCARS-style curved rail panels on left/right edges
• Softened grid overlay for better readability (opacity 0.28)
• Enhanced cards with authentic LCARS panel styling and warm-toned borders on hover

Cyberpunk Theme:

• Stronger diagonal neon sweep effect (135deg angle, 8s animation)
• Added chromatic aberration effect on chrome border with pulsing animation
• Added subtle "code rain" texture with vertical gradients
• Neon/magenta accent glow on cards on hover with enhanced shadows

Visual Results

Desktop Layouts - All Three Themes Working

LCARS Theme:

Star Wars Theme:

Cyberpunk Theme:

Mobile Responsive Layout

Keyboard Focus State

Testing

• ✅ Desktop layout verified at 1920px width (3-column grid)
• ✅ Mobile layout verified at 375px width (single column)
• ✅ Keyboard navigation and focus states verified across all themes
• ✅ All three themes tested for visual effects and card functionality
• ✅ Hover and focus states work correctly with proper contrast

Files Changed

• docs/scifi-ui/styles/starwars.css - Download card fix + enhanced holographic effects
• docs/scifi-ui/styles/lcars.css - Download card fix + LCARS panels and grid refinement
• docs/scifi-ui/styles/cyberpunk.css - Download card fix + stronger neon/glitch effects
• docs/scifi-ui/index.html - Accessibility improvements (ARIA roles and labels)

Original prompt

A ‘Letöltések’ felirat alatt a linkek és feliratok össze vannak csúszva (lásd ). A .download-card elemek a gomb-stílushoz vannak kötve a témákban (nav button, .panel .btn, .quick-links a, .download-card), emiatt inline jelleggel egy sorba torlódnak és túl pill-szerűek. Emellett a háttér jelenleg nem elég hű a film-/játékuniverzumokhoz a témák szerint (Star Trek LCARS, Star Wars HUD, Cyberpunk neon-glitch).

Feladatok (hutoczky/FormatX – docs/scifi-ui):

1. Letöltések szekció – elrendezési hiba javítása

• Minden témában távolítsuk el a .download-card-ot a „nav button, .panel .btn, .quick-links a, .download-card” gyűjtő-szelektorból (lcars.css, starwars.css, cyberpunk.css), hogy ne örököljön gomb-stílusokat.
• Adjunk egységes .download-card stílust, ami biztosítja: display:block; width:100%; white-space: normal; word-break: break-word; padding; háttér; border; border-radius; text-decoration:none. Hover/focus állapotban kis emelés és kontraszt.
• A .download-list maradjon grid: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; mobilon 1 oszlop.

2. Hozzáférhetőség

• A letöltési kártyák maradjanak role="listitem", a lista role="list"; title és aria-label a kártya linkeken (már részben megvan) egységesítve.
• Fókuszállapot: jól látható outline/fény a .download-card-okon és a nav gombokon.

3. Háttér és UI finomhangolás témánként

• Star Wars (docs/scifi-ui/styles/starwars.css):
  • Erősebb „film HUD” hangulat: csillagmező kicsit dinamikusabb, de visszafogott; scanlines átlátszóság csökkentése (0.12 körül), animáció lassítása (8s), hogy ne zavarjon.
  • Holografikus „sweep” (kör alakú szkennelés) a .telemetry rétegen: finom radiális gradient lassú körmozgással; vékony HUD gyűrűk (concentric ringek) halványan.
  • Letöltési kártyák: holo-kék kontúrok, belső halvány fény, text-shadow mérsékeltebb (élesebb betűk).
• LCARS (docs/scifi-ui/styles/lcars.css):
  • Háttérben több LCARS-szerű íves panel/rail (színpalettához igazítva), felső „rail” alatt több lélegző tér, a grid-overlay halvány.
  • Letöltési kártyák: LCARS környezethez illő sötétebb panel + meleg tónusú border hoverkor.
• Cyberpunk (docs/scifi-ui/styles/cyberpunk.css):
  • Erősebb neon/glitch: diagonal neon sweep a .telemetry rétegen; enyhe chromatic aberration hatás a .chrome kereten; finom „code rain” textúra a háttérben (nagyon halvány, hogy ne zavarja a szöveget).
  • Letöltési kártyák: neon/magenta akcentus hoverkor, olvasható small szöveg.

4. Ellenőrzés

• Teszt: desktop és mobil (≤700px) töréspontnál; a kártyák több oszlopból egy oszlopba váltanak, nincs összecsúszás.
• Lighthouse/kontraszt gyors ellenőrzés; tab-fókusz jól látható.

Várható módosított fájlok:

• docs/scifi-ui/styles/starwars.css
• docs/scifi-ui/styles/lcars.css
• docs/scifi-ui/styles/cyberpunk.css
• esetleg minimális frissítés: docs/scifi-ui/index.html (role attribútumok egységesítése)

A módosítások után kérjük a PR azonnali jóváhagyását és mergelését a publikáláshoz.

Referencia:

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

A ‘Letöltések’ felirat alatt a linkek és feliratok össze vannak csúszva (lásd ). A .download-card elemek a gomb-stílushoz vannak kötve a témákban (nav button, .panel .btn, .quick-links a, .download-card), emiatt inline jelleggel egy sorba torlódnak és túl pill-szerűek. Emellett a háttér jelenleg nem elég hű a film-/játékuniverzumokhoz a témák szerint (Star Trek LCARS, Star Wars HUD, Cyberpunk neon-glitch).

Feladatok (hutoczky/FormatX – docs/scifi-ui):

1. Letöltések szekció – elrendezési hiba javítása

• Minden témában távolítsuk el a .download-card-ot a „nav button, .panel .btn, .quick-links a, .download-card” gyűjtő-szelektorból (lcars.css, starwars.css, cyberpunk.css), hogy ne örököljön gomb-stílusokat.
• Adjunk egységes .download-card stílust, ami biztosítja: display:block; width:100%; white-space: normal; word-break: break-word; padding; háttér; border; border-radius; text-decoration:none. Hover/focus állapotban kis emelés és kontraszt.
• A .download-list maradjon grid: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; mobilon 1 oszlop.

2. Hozzáférhetőség

• A letöltési kártyák maradjanak role="listitem", a lista role="list"; title és aria-label a kártya linkeken (már részben megvan) egységesítve.
• Fókuszállapot: jól látható outline/fény a .download-card-okon és a nav gombokon.

3. Háttér és UI finomhangolás témánként

• Star Wars (docs/scifi-ui/styles/starwars.css):
  • Erősebb „film HUD” hangulat: csillagmező kicsit dinamikusabb, de visszafogott; scanlines átlátszóság csökkentése (0.12 körül), animáció lassítása (8s), hogy ne zavarjon.
  • Holografikus „sweep” (kör alakú szkennelés) a .telemetry rétegen: finom radiális gradient lassú körmozgással; vékony HUD gyűrűk (concentric ringek) halványan.
  • Letöltési kártyák: holo-kék kontúrok, belső halvány fény, text-shadow mérsékeltebb (élesebb betűk).
• LCARS (docs/scifi-ui/styles/lcars.css):
  • Háttérben több LCARS-szerű íves panel/rail (színpalettához igazítva), felső „rail” alatt több lélegző tér, a grid-overlay halvány.
  • Letöltési kártyák: LCARS környezethez illő sötétebb panel + meleg tónusú border hoverkor.
• Cyberpunk (docs/scifi-ui/styles/cyberpunk.css):
  • Erősebb neon/glitch: diagonal neon sweep a .telemetry rétegen; enyhe chromatic aberration hatás a .chrome kereten; finom „code rain” textúra a háttérben (nagyon halvány, hogy ne zavarja a szöveget).
  • Letöltési kártyák: neon/magenta akcentus hoverkor, olvasható small szöveg.

4. Ellenőrzés

• Teszt: desktop és mobil (≤700px) töréspontnál; a kártyák több oszlopból egy oszlopba váltanak, nincs összecsúszás.
• Lighthouse/kontraszt gyors ellenőrzés; tab-fókusz jól látható.

Várható módosított fájlok:

• docs/scifi-ui/styles/starwars.css
• docs/scifi-ui/styles/lcars.css
• docs/scifi-ui/styles/cyberpunk.css
• esetleg minimális frissítés: docs/scifi-ui/index.html (role attribútumok egységesítése)

A módosítások után kérjük a PR azonnali jóváhagyását és mergelését a publikáláshoz.

Referencia:

---

💡 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.