feat(scifi-ui): visual polish pass — hierarchy, spacing, checkout flow clarity#76
Merged
hutoczky merged 2 commits intoJul 10, 2026
Conversation
Copilot
AI
changed the title
[WIP] Refine scifi-ui website for improved clarity and professionalism
feat(scifi-ui): visual polish pass — hierarchy, spacing, checkout flow clarity
Jul 10, 2026
hutoczky
merged commit 3a98f10
into
copilot/extend-checkout-payment-confirmation
1 check failed
github-actions
Bot
added
the
automerge
Contributor
There was a problem hiding this comment.
Pull request overview
Information-architecture and visual polish pass for the docs/scifi-ui static checkout/demo UI, aiming to improve hierarchy/spacing and make the checkout flow clearer while preserving existing theme behavior and payment/privacy semantics.
Changes:
- Updated layout/typography/spacing in
site.css, including new.span-2grid utility, checkout action separator, footer rework, and new skip-link styling. - Restructured
index.htmlcontent (hero CTA order, simplified Pro intro, “Demo checkout” section copy, footer navigation) and added skip-to-content target on<main>. - Added consistent sub-page headers/back-links on support/terms/privacy pages, plus quick cross-navigation links on terms/privacy.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/scifi-ui/index.html | Reorders hero CTAs, simplifies Pro/checkout copy, adds skip-link + main target, and updates footer structure/navigation. |
| docs/scifi-ui/styles/site.css | Visual spacing/type tweaks, adds .span-2, checkout-actions separator, footer layout/nav styles, and skip-link styles. |
| docs/scifi-ui/support.html | Adds a consistent header/back-link on the support sub-page. |
| docs/scifi-ui/terms.html | Adds a consistent header/back-link and in-card navigation links on the terms sub-page. |
| docs/scifi-ui/privacy.html | Adds a consistent header/back-link and in-card navigation links on the privacy sub-page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| /* ===== Kisegítő ===== */ | ||
| .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } | ||
| .skip-link { position: absolute; top: -100%; left: .5rem; padding: .5rem 1rem; background: var(--accent); color: #0a0c0f; font-weight: 700; border-radius: 0 0 8px 8px; z-index: 100; text-decoration: none } |
| </header> | ||
|
|
||
| <main class="container shell"> | ||
| <main id="main-content" class="container shell"> |
| <div class="card span-12"> | ||
| <p>A jelenlegi checkout felület bemutató célú. Ez az oldal a FormatX Suite Pro előfizetéses feltételeinek és a későbbi éles checkout jogi alapjainak helye.</p> | ||
| <p>A végleges produkciós jogi tartalmat az üzemeltetőnek kell feltöltenie az éles indulás előtt.</p> | ||
| <div style="display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem;"> |
| <div class="card span-12"> | ||
| <p>A checkout felület jelenleg demo módban működik: a céges és fizetési adatok kliensoldali ellenőrzésre szolgálnak, és nem kerülnek elküldésre vagy eltárolásra. A FormatX publikus honlap nem kér be és nem tárol élő bankkártyaadatokat.</p> | ||
| <p>A végleges produkciós adatkezelési tájékoztatót az üzemeltetőnek kell közzétennie az éles indulás előtt.</p> | ||
| <div style="display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem;"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Information-architecture and visual polish pass on
docs/scifi-ui. Preserves the sci-fi/holographic identity, theme switching, and all payment/privacy behavior. No JS logic changes.Bug fix
.span-2CSS undefined:confirmation-currencyandconfirmation-amountfields had no column rule, rendering as a 1-column sliver on desktop. Addedspan 12(mobile) /span 2(desktop).Information architecture
Visual / spacing
margin-top1.6 → 2rem; hero margins increasedpanel-titletype scale:clamp(1.2rem…1.65rem)→clamp(1.35rem…1.8rem)max-width: 72chon prose inside.paneland.cardcheckout-actionsgets aborder-topseparatorAccessibility
<a class="skip-link" href="#main-content">)id="main-content"on<main>Sub-pages (support / terms / privacy)
<header>with "← Főoldal" back-link and cross-navigation links within each pageFooter
footer-rowcontaining copyright and afooter-nav(Support / ÁSZF / Privacy / ↑ Tetejére)