kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fx-system): Itim Thai side-bearing fix + prefers-reduced-motion

Browse Source 
Phase 6.1: Itim fix — apply letter-spacing: -0.5px + margin-right: -2px
to all <em> in v7-5 sections. Per user memory, Thai display fonts ship
with wide side bearings causing visual gaps after Latin punctuation.
Scope: 20 selectors covering every .fx-* section + .fx-prose (about body).

Phase 6.2: prefers-reduced-motion — kill animations when user prefers.
Disables .fx-marquee-track, .fx-sparkle, .fx-reveal, .fx-stagger animations.
Also hides .fx-hero::after and .fx-faq-a::after decorations.

Phase 6.3: production build verified (22 pages, 0 errors, 1.96s)

Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 6.1-6.3
This commit is contained in:
Kunthawat Greethong
2026-06-13 18:02:07 +07:00
parent caa412dbe2
commit b8ac07996e
1 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles/fx-system.css
View File

@@ -508,4 +508,52 @@ img{max-width:100%;display:block}
.fx-nav-dropdown{position:static;box-shadow:none;border:none;background:var(--paper-2);opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;padding:0;transition:max-height 0.25s,padding 0.25s}
.fx-nav-dropdown-open>.fx-nav-dropdown{max-height:400px;padding:8px 0}
.fx-nav-cta{margin-top:12px;align-self:flex-start}
}
/* ============================================
ITIM THAI SIDE-BEARING FIX (added 2026-06-13)
Per user memory: Thai display fonts (Itim) ship
with wide side bearings causing visual gaps
after Latin punctuation. Apply tight letter-
spacing to all <em> in v7-5 sections.
============================================ */
.fx-utility-bar em,
.fx-marquee em,
.fx-nav em,
.fx-nav-logo-text em,
.fx-hero-title em,
.fx-hero-lede em,
.fx-case-stat-num em,
.fx-service-title em,
.fx-callout-text em,
.fx-portfolio-name em,
.fx-process-text em,
.fx-pricing-tier em,
.fx-pricing-cta em,
.fx-faq-q em,
.fx-faq-a em,
.fx-contact-title em,
.fx-contact-desc em,
.fx-footer-bottom em,
.fx-prose em,
.fx-prose :global(em) {
letter-spacing: -0.5px;
margin-right: -2px;
display: inline-block;
}
/* ============================================
PREFERS-REDUCED-MOTION (added 2026-06-13)
Per plan Phase 6.2: respect user motion preferences.
============================================ */
@media (prefers-reduced-motion: reduce) {
.fx-marquee-track,
.fx-sparkle,
.fx-reveal,
.fx-stagger {
animation: none !important;
transition: none !important;
}
.fx-hero::after,
.fx-faq-a::after { display: none !important; }
}