Fine-tune Sci-Fi UI spacing and readability across themes (PR #57 follow-up)

[Copilot]

Overview

This PR implements CSS-only fine-tuning for the Sci-Fi UI to improve readability and spacing across all themes (LCARS, HOLO, CYBER) on both desktop and mobile devices. These changes address user validation feedback following PR #57.

Changes Made

Desktop Enhancements

• Safe inline padding: Added responsive safe-insets using clamp(1.25rem, 4vw, 3rem) to ensure hero content never hugs the rounded shell borders
• Centered layout: Hero title, subtitle, and CTA buttons are now properly centered on all screen sizes
• Improved readability: Limited subtitle width to 72ch and title to 18ch for optimal reading experience

Mobile Optimizations (≤640px)

• Increased safe padding: Enhanced inline padding to clamp(1.4rem, 7vw, 3.25rem) for better spacing on small screens
• Responsive typography: Fine-tuned subtitle font size with clamp(.95rem, 2.9vw, 1.05rem)
• Enhanced spacing: Added responsive padding-top to hero section and adjusted title letter-spacing for better legibility

Implementation Approach

• ✅ Append-only CSS: All changes appended to docs/scifi-ui/styles/site.css without modifying existing rules
• ✅ CSS-only: No JavaScript changes
• ✅ Theme-agnostic: Works seamlessly with all themes without color modifications
• ✅ Preserves PR [WIP] Implement UI readability improvements and HOLO pill label contrast fixes #57: HOLO pill label contrast improvements remain intact

Visual Verification

LCARS Theme

Desktop:

Mobile:

HOLO Theme

Desktop:

Mobile:

CYBER Theme

Desktop:

Mobile:

Testing

All three themes verified on:

• ✅ Desktop viewports (1280px width)
• ✅ Mobile viewports (375px width)
• ✅ Text properly centered with comfortable horizontal padding
• ✅ No text collision with rounded shell borders
• ✅ Subtitle readability improved on phones
• ✅ No regressions in visual effects or color schemes

Files Changed

• docs/scifi-ui/styles/site.css - Added 17 lines of CSS for spacing and readability improvements

Original prompt

Follow‑up fine‑tuning for Sci‑Fi UI readability and spacing across themes, based on user validation after PR #57.

Goals

• Nudge the hero content further in from the sides on small screens so text never hugs the rounded shell borders.
• Keep the hero title (“FormatX”), subtitle, and CTA row centered on all screen sizes.
• Make subtitle slightly more readable on phones by limiting line length further and adjusting font size subtly.
• Preserve previous changes from [WIP] Implement UI readability improvements and HOLO pill label contrast fixes #57 (no regressions) and avoid altering non‑HOLO color sets.

Scope

• Update docs/scifi-ui/styles/site.css with append‑only CSS to ensure overrides are safe and localized.
  • Add mobile‑first safe‑insets and hero spacing refinements via media queries.
  • Keep all changes strictly CSS‑only.

Proposed CSS to append

:root { --safe-inline: clamp(1.25rem, 4vw, 3rem); --hero-max: 72ch; --title-maxch: 18ch; }
.shell { padding-inline: var(--safe-inline) !important; }
.hero { padding-inline: var(--safe-inline) !important; text-align: center !important; }
.title, .subtitle { margin-inline: auto !important; text-align: center !important; }
.subtitle { max-width: var(--hero-max); }
.title { max-width: min(100%, var(--title-maxch)); }
.cta-row { display: flex; justify-content: center; }

/* Fine‑tuning on small screens */
@media (max-width: 640px) {
:root { --safe-inline: clamp(1.4rem, 7vw, 3.25rem); }
.hero { padding-top: clamp(0.9rem, 4vw, 1.6rem); }
.subtitle { font-size: clamp(.95rem, 2.9vw, 1.05rem); }
.title { letter-spacing: clamp(1px, .3vw, 2px); }
}

Constraints

• CSS‑only. No JS changes.
• Append‑only; do not modify or remove existing rules.
• Do not change color tokens for non‑HOLO themes.

Acceptance criteria

• On https://hutoczky.github.io/FormatX/scifi-ui/?theme=lcars, ?theme=cyber, and ?theme=holo:
  • Hero title/subtitle remain centered and have comfortable horizontal padding on mobile and desktop.
  • Subtitle is more readable on phones; no text collides with rounded shell borders.
• No color or effect changes outside of spacing/typography; HOLO pill label contrast added in [WIP] Implement UI readability improvements and HOLO pill label contrast fixes #57 remains intact.

Relevant screenshots for current context

• LCARS theme hero spacing and centering:
  
• HOLO theme current appearance after prior changes:
  

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

Follow‑up fine‑tuning for Sci‑Fi UI readability and spacing across themes, based on user validation after PR #57.

Goals

• Nudge the hero content further in from the sides on small screens so text never hugs the rounded shell borders.
• Keep the hero title (“FormatX”), subtitle, and CTA row centered on all screen sizes.
• Make subtitle slightly more readable on phones by limiting line length further and adjusting font size subtly.
• Preserve previous changes from [WIP] Implement UI readability improvements and HOLO pill label contrast fixes #57 (no regressions) and avoid altering non‑HOLO color sets.

Scope

• Update docs/scifi-ui/styles/site.css with append‑only CSS to ensure overrides are safe and localized.
  • Add mobile‑first safe‑insets and hero spacing refinements via media queries.
  • Keep all changes strictly CSS‑only.

Proposed CSS to append

:root { --safe-inline: clamp(1.25rem, 4vw, 3rem); --hero-max: 72ch; --title-maxch: 18ch; }
.shell { padding-inline: var(--safe-inline) !important; }
.hero { padding-inline: var(--safe-inline) !important; text-align: center !important; }
.title, .subtitle { margin-inline: auto !important; text-align: center !important; }
.subtitle { max-width: var(--hero-max); }
.title { max-width: min(100%, var(--title-maxch)); }
.cta-row { display: flex; justify-content: center; }

/* Fine‑tuning on small screens */
@media (max-width: 640px) {
:root { --safe-inline: clamp(1.4rem, 7vw, 3.25rem); }
.hero { padding-top: clamp(0.9rem, 4vw, 1.6rem); }
.subtitle { font-size: clamp(.95rem, 2.9vw, 1.05rem); }
.title { letter-spacing: clamp(1px, .3vw, 2px); }
}

Constraints

• CSS‑only. No JS changes.
• Append‑only; do not modify or remove existing rules.
• Do not change color tokens for non‑HOLO themes.

Acceptance criteria

• On https://hutoczky.github.io/FormatX/scifi-ui/?theme=lcars, ?theme=cyber, and ?theme=holo:
  • Hero title/subtitle remain centered and have comfortable horizontal padding on mobile and desktop.
  • Subtitle is more readable on phones; no text collides with rounded shell borders.
• No color or effect changes outside of spacing/typography; HOLO pill label contrast added in [WIP] Implement UI readability improvements and HOLO pill label contrast fixes #57 remains intact.

Relevant screenshots for current context

• LCARS theme hero spacing and centering:
  
• HOLO theme current appearance after prior changes:
  

---

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