Center-align hero subtitle, buttons, and Program leírás intro on Sci-Fi UI page

[Copilot]

Overview

This PR implements center alignment for the hero section elements (subtitle and action buttons) and the introductory paragraph in the Program leírás section on the Sci-Fi UI page, matching Word's center alignment behavior while preserving all neon frame aesthetics.

Changes

Hero Section

The main hero block now has fully centered content:

• Title: "FORMÁZÁS A JÖVŐBŐL" is center-aligned
• Subtitle: The cyan text "Gyors. Moduláris. Bővíthető. Azonos eszközök, eltérő stílusok." is center-aligned
• Action Buttons: The three CTA buttons (LETÖLTÉS, FUNKCIÓK, DOKUMENTUMOK) are centered with proper wrapping behavior

Program Leírása Section

The introductory paragraph "FormatX Pro — lemezek és USB eszközök kezelése." is now center-aligned with a maximum width of 70 characters for optimal readability.

Technical Implementation

CSS Changes (docs/scifi-ui/styles/site.css):

.title {
  text-align: center;
}

.subtitle {
  text-align: center;
  margin-inline: auto;
}

.cta-row {
  justify-content: center;  /* Added to existing flex container */
}

.panel .intro {
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
  padding: 0 1.1rem;
}

HTML Changes (docs/scifi-ui/index.html):

• Added class="intro" to the first descriptive paragraph in the Program leírása section

Visual Results

Before

After - Desktop (LCARS Theme)

Mobile Responsive (375px)

Star Wars Theme

Cyberpunk Theme

Testing

✅ All three themes tested: LCARS (Star Trek), Star Wars (Hologram), and Cyberpunk
✅ Responsive design verified: Elements properly center and wrap on mobile devices
✅ No visual regressions: Neon frames, glows, and all decorative elements preserved
✅ No overflow issues: No horizontal scrollbars or text clipping detected
✅ Accessibility maintained: Proper semantic HTML structure preserved

Files Changed

• docs/scifi-ui/styles/site.css - Added centering styles
• docs/scifi-ui/index.html - Added intro class to target paragraph

The implementation uses modern CSS best practices (text-align: center for text, justify-content: center for flex containers, and margin-inline: auto for block elements) to achieve precise center alignment while maintaining full backward compatibility and theme switching functionality.

Original prompt

Context
On the Sci‑Fi UI page at https://hutoczky.github.io/FormatX/scifi-ui/ (sci-fi theme), the hero block under the main title contains a cyan subtitle line and a set of rounded "chip" buttons. The user wants the red-circled region (subtitle + buttons) centered exactly like Word's center alignment. Additionally, ensure the opening paragraph under the first "Program leírás" section is centered as an intro.

References from chat:

Goals

• Center-align the hero subtitle (small cyan text) and the action chips/buttons directly underneath the main header inside the hero frame.
• Ensure the first intro paragraph under the "Program leírás" section is center-aligned.
• Keep the neon frame aesthetics unchanged. No clipping or overflow side-effects.

Implementation

1. Identify the hero container (that wraps the huge heading + the cyan subtitle + the chips). Apply:
   • text-align: center on the text wrapper for the subtitle and title where safe.
   • For the chip/button row (likely a flex container), set justify-content: center and allow wrapping.
   • Add margin-inline: auto to the inner content block so it centers within the bordered/glow frame.
2. For the Program leírás section:
   • Center-align the first descriptive paragraph below its heading (not the full section list). Use a dedicated class (e.g., .intro or .lead) to avoid centering all paragraphs site-wide.
3. Ensure no text clipping occurs:
   • Remove/avoid overflow: hidden on immediate wrappers of the centered text. If overflow is required for decoration, nest a text wrapper with overflow: visible.
   • Keep adequate inline padding so text shadows/glow don't get clipped.
4. Responsiveness
   • Ensure centered chips wrap and remain centered on narrow screens (gap maintained). Use gap and flex-wrap.

CSS to introduce (selectors to be mapped to actual classes):

/* hero */
.hero .subtitle { text-align: center; margin-inline: auto; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.hero .title { text-align: center; }

/* program leírás intro */
.section-program .intro { text-align: center; max-width: 70ch; margin-inline: auto; }

Acceptance criteria

• On desktop and mobile, the cyan subtitle and the chip buttons are centered in the hero.
• The first paragraph under Program leírás is centered.
• No horizontal scrollbars or clipped text.
• Visual style (neon frames) remains intact.

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

Context
On the Sci‑Fi UI page at https://hutoczky.github.io/FormatX/scifi-ui/ (sci-fi theme), the hero block under the main title contains a cyan subtitle line and a set of rounded "chip" buttons. The user wants the red-circled region (subtitle + buttons) centered exactly like Word's center alignment. Additionally, ensure the opening paragraph under the first "Program leírás" section is centered as an intro.

References from chat:

Goals

• Center-align the hero subtitle (small cyan text) and the action chips/buttons directly underneath the main header inside the hero frame.
• Ensure the first intro paragraph under the "Program leírás" section is center-aligned.
• Keep the neon frame aesthetics unchanged. No clipping or overflow side-effects.

Implementation

1. Identify the hero container (that wraps the huge heading + the cyan subtitle + the chips). Apply:
   • text-align: center on the text wrapper for the subtitle and title where safe.
   • For the chip/button row (likely a flex container), set justify-content: center and allow wrapping.
   • Add margin-inline: auto to the inner content block so it centers within the bordered/glow frame.
2. For the Program leírás section:
   • Center-align the first descriptive paragraph below its heading (not the full section list). Use a dedicated class (e.g., .intro or .lead) to avoid centering all paragraphs site-wide.
3. Ensure no text clipping occurs:
   • Remove/avoid overflow: hidden on immediate wrappers of the centered text. If overflow is required for decoration, nest a text wrapper with overflow: visible.
   • Keep adequate inline padding so text shadows/glow don't get clipped.
4. Responsiveness
   • Ensure centered chips wrap and remain centered on narrow screens (gap maintained). Use gap and flex-wrap.

CSS to introduce (selectors to be mapped to actual classes):

/* hero */
.hero .subtitle { text-align: center; margin-inline: auto; }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.hero .title { text-align: center; }

/* program leírás intro */
.section-program .intro { text-align: center; max-width: 70ch; margin-inline: auto; }

Acceptance criteria

• On desktop and mobile, the cyan subtitle and the chip buttons are centered in the hero.
• The first paragraph under Program leírás is centered.
• No horizontal scrollbars or clipped text.
• Visual style (neon frames) remains intact.

---

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