/* ==========================================================================
ehyong.com — typographic and layout corrections
--------------------------------------------------------------------------
Loaded LAST on every public page, after geo-page.css / style.css and after
every other override sheet. Nothing here changes content, colour, brand or
layout direction: it corrects measurable defects found by rendering all 35
documents in both languages at 1440 / 768 / 390 and measuring the result.
The source stylesheets are deliberately left untouched, which is how the
rest of this site's overrides already work (nav.css, radar.css, glass-
acrylic.css). Every fix below is traceable to a number.
========================================================================== */
/* ──────────────────────────────────────────────────────────────────────────
1. THE TABLET CARD GRID — the single largest defect found
--------------------------------------------------------------------------
.grid steps straight from repeat(3,1fr) to 1fr at max-width:760px. So at
768px it is still THREE columns inside a 720px wrap: each card measures
227px, and after 28px of padding on each side the text has 171px to live
in. Measured consequence: 29 of the 86 stranded headings in the whole audit
were H3s at tablet width, all of them in these cards — "Creative direction"
over two lines, "Visual consistency" over two lines, and so on.
A 2-column step between 761px and 1000px gives each card ~330px of text.
The 3-column desktop layout and the 1-column phone layout are unchanged.
────────────────────────────────────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1000px) {
.grid { grid-template-columns: repeat(2, 1fr); }
/* A 4-card group would otherwise leave one card alone on a second row at
half width; the last child spans both columns so the row reads as a pair
and a full-width closing card rather than a pair and an orphan. */
.grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ──────────────────────────────────────────────────────────────────────────
2. HEADING WRAP — consistency between the two page families
--------------------------------------------------------------------------
geo-page.css sets `h1,h2,h3 { text-wrap: balance }`. The landing family
(style.css) does not: an H3 there computes `text-wrap: wrap`, so headings
on the homepage, radar and Style Lab break differently from headings on
every other page. Measured directly in the browser before and after.
`balance` evens the line lengths of short multi-line headings; `pretty`
is the right setting for running copy, where it pulls a word down rather
than leaving one alone on the final line. Both degrade to normal wrapping
in browsers that do not implement them.
────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4,
.hero-name, .eyebrow {
text-wrap: balance;
}
p, li, figcaption, blockquote,
.lede, .hero-lede, .press-lede, .radar-page-lede, .sl-lede {
text-wrap: pretty;
}
/* ──────────────────────────────────────────────────────────────────────────
3. DISPLAY TYPE SIZED TO ITS COLUMN, NOT THE VIEWPORT
--------------------------------------------------------------------------
`h2 { font-size: clamp(1.8rem, 4vw, 3.4rem) }` scales off viewport width,
which is right for a full-bleed heading and wrong for one sitting in a
narrow column. In .proof the text column is 0.9fr of a 1120px wrap — about
490px — while the heading still renders at 54.4px. That is what strands
"experience." alone under "25+ years of creative-industry".
Scoped to the two-column blocks only. Full-width headings keep the original
scale, so the page's visual hierarchy is unchanged.
────────────────────────────────────────────────────────────────────────── */
.proof h2,
.legacy-hero h2,
.event-hero h2 {
font-size: clamp(1.65rem, 2.9vw, 2.5rem);
line-height: 1.16;
}
/* Chinese sets denser and carries more meaning per glyph, so the same column
takes a little more size before it looks undersized. */
html[lang^="zh"] .proof h2,
html[lang^="zh"] .legacy-hero h2,
html[lang^="zh"] .event-hero h2 {
font-size: clamp(1.55rem, 2.7vw, 2.3rem);
line-height: 1.32;
}
/* --- the same defect, landing family -------------------------------------
style.css sizes h2 at clamp(1.95rem, 3.4vw, 3.4rem) — 49px at 1440, 54px
at 1920. Six two-column copy blocks on the homepage put that heading in a
column the container caps at roughly 430-510px, and the column does NOT
grow with the viewport, so past about 1360px the type keeps growing inside
a fixed measure. Measured at 1440px, English:
.proof-copy 475px "Training / credibility / should be seen, /
not claimed." — 4 lines, 6 words
.curriculum-copy 508px 5 lines, ending "curriculum" / "development."
.field-copy 499px 4 lines, "attention," alone on line 2
.faq-copy 427px "Frequently / Asked / Questions"
.contact-copy 495px 4 lines (6 at 1920px)
and Chinese .method-copy breaks 到真实工作流程落地。 one glyph short, leaving
地。 alone on a third line — the worst stranding in the whole audit.
`min()` rather than a new clamp: below the cap nothing changes at all, so
the original scale still governs every narrower viewport. It only stops the
heading outgrowing the column it lives in. Each block is gated at its own
collapse breakpoint — 1350px for proof/method/contact/field, 980px for faq,
900px for curriculum — so a heading that has gone full width keeps the
full-width scale.
Result, English 1440px: proof 4→3 lines, curriculum 5→4, field 4→3,
faq 3→2, contact 6→4 at 1920. Chinese: method 3→2, 地。 gone;
curriculum 4→3. No route at any tested width got worse.
---------------------------------------------------------------------- */
@media (min-width: 1351px) {
.proof-copy h2,
.method-copy h2,
.contact-copy h2,
.field-copy h2 { font-size: min(2.45rem, 3.4vw); line-height: 1.14; }
html[lang^="zh"] :is(.proof-copy, .method-copy, .contact-copy, .field-copy) h2 {
font-size: min(2.25rem, 3.4vw);
line-height: 1.3;
}
}
@media (min-width: 981px) {
.faq-copy h2 { font-size: min(2.45rem, 3.4vw); line-height: 1.14; }
html[lang^="zh"] .faq-copy h2 { font-size: min(2.25rem, 3.4vw); line-height: 1.3; }
}
@media (min-width: 901px) {
.curriculum-copy h2 { font-size: min(2.45rem, 3.4vw); line-height: 1.14; }
html[lang^="zh"] .curriculum-copy h2 { font-size: min(2.25rem, 3.4vw); line-height: 1.3; }
}
/* The two home grids collapse at 760px, but their headings only outgrow the
614px copy column above about 1100px, so the gate sits there — lower and
the cap would make the 768px heading SMALLER than it is today (26px against
31px), which is the opposite of the point. English at 1440: the HeyGen
heading goes 3 lines → 2, and Creative Legacy 4 → 3 at 1920. Chinese is
unchanged in line count and simply joins the 36px other Chinese two-column
headings already use. */
@media (min-width: 1101px) {
.legacy-home-grid h2,
.heygen-home-grid h2 { font-size: min(2.45rem, 3.4vw); line-height: 1.14; }
html[lang^="zh"] :is(.legacy-home-grid, .heygen-home-grid) h2 {
font-size: min(2.25rem, 3.4vw);
line-height: 1.3;
}
}
/* --- the homepage H1, which is the worst instance on the site -------------
`.hero-copy` is capped at max-width:600px, so above 1140px the hero H1's
measure stops growing — but `clamp(2.9rem, 5.15vw, 5rem)` keeps scaling it
with the viewport: 74px at 1440, 80px at 1920, in the same 600px column.
Measured lines at 1440px, before:
EN Corporate / AI Creative / Trainer in / Malaysia 4 lines, 5 words
ZH 把 AI 工具转 / 化为你的创 / 意竞争优势。 3 lines
The Chinese is the worse of the two: 转化 and 创意 are each split across a
line break. At 1000px and below the same headline sets in two clean lines
in both languages, which is what the cap restores. English 4 → 3 lines,
Chinese 3 → 2 with both words intact. Below 1141px the hero is one column
and nothing here applies. */
@media (min-width: 1141px) {
.hero h1 { font-size: min(3.75rem, 5.15vw); }
}
/* --- and the same, one-to-one intensive page ------------------------------
`.split-heading` is a .85fr / 1.15fr grid, so its heading sits in 598px
while the generic geo h2 clamp reaches its 3.4rem ceiling. English read
"You have / learned AI. / Why is the result / still missing?" — four lines
for seven words, with the author's own
already splitting the sentence.
3 lines after. Chinese was already two lines and is unchanged. */
@media (min-width: 761px) {
.split-heading h2 { font-size: min(2.7rem, 4vw); line-height: 1.16; }
html[lang^="zh"] .split-heading h2 { font-size: min(2.5rem, 4vw); line-height: 1.32; }
}
/* --- the closing CTA on the same page, Chinese only ----------------------
`h2 { clamp(2.25rem, 5vw, 4.8rem) }` renders 72px at 1440 inside an 862px
panel. 建立属于你的 AI 创意系统。 needs about 870px at that size — eight pixels
more than it has — so it drops 统。 to a third line and splits 系统 in half.
Capping at 4rem gives it roughly 780px and the line closes up.
English is deliberately left at full scale here: it sets as a balanced
two-and-two around the author's own
, which is how a closing statement
of this size is meant to read. */
@media (min-width: 761px) {
html[lang^="zh"] .intensive-cta-panel h2 { font-size: min(4rem, 5vw); line-height: 1.28; }
}
/* ──────────────────────────────────────────────────────────────────────────
4. LINE MEASURE
--------------------------------------------------------------------------
13 English paragraphs were measured at 105–135 characters per line at
1440px, the worst on /about-han-yong/. Comfortable measure is roughly
45–90; past about 95 the eye loses the line return and re-reads.
The cap is expressed in `ch`, so it tracks the font rather than a fixed
pixel width, and it is applied only to paragraphs that are direct children
of a text container. Anything inside a card, a grid cell or a component
already has its own width and is left alone.
────────────────────────────────────────────────────────────────────────── */
.section > .wrap > p,
.section > .wrap > ul li,
.wrap.proof > div > p,
.section > .container > p {
max-width: 72ch;
}
/* CJK counts glyphs, not letters: 72ch of Chinese is an enormously long line.
~38 characters is the comfortable maximum. */
html[lang^="zh"] .section > .wrap > p,
html[lang^="zh"] .section > .wrap > ul li,
html[lang^="zh"] .wrap.proof > div > p,
html[lang^="zh"] .section > .container > p {
max-width: 40ch;
}
/* A centred block keeps its centring when the measure is capped. */
.container.center > p,
.container.narrow > p { margin-inline: auto; }
/* The remaining over-long lines are inside components, so the rule above
deliberately did not reach them. Each of these was measured individually
at 1440px rather than guessed at:
.ga-mark-copy p 930px → 118 chars (the injected mark blocks)
.card > p 1062px → 102 chars /heygen-training-malaysia/
.module-card p 976px → 98 chars /one-to-one/
.event-cta p 898px → 107 chars /heygen-...-event/
.radar-entry-stat 1180px → 98 chars /ai-radar/ at tablet
Only the cap is added; nothing about the components changes. */
.ga-mark-copy p,
.section > .wrap > .card > p,
.module-card p,
.event-cta .wrap > div > p,
.radar-entry-stat { max-width: 72ch; }
/* Chinese again takes the glyph measure, including the radar summary, whose
source stylesheet caps it at a Latin 72ch — 57 glyphs of Chinese. */
html[lang^="zh"] :is(.ga-mark-copy, .module-card, .event-cta) p,
html[lang^="zh"] .section > .wrap > .card > p,
html[lang^="zh"] .radar-entry-stat,
html[lang^="zh"] .radar-entry-summary { max-width: 40ch; }
/* And the last group, found on the second pass: the Style Lab support note
and step list run the full rail at tablet width (105 and 94 chars), the
featured legacy card reads 93 English / 73 Chinese inside its own 830px
cap, and the one-to-one FAQ answers run 68 glyphs in Chinese. */
.sl-support-p,
.sl-steps li p,
.faq-list details p { max-width: 72ch; }
html[lang^="zh"] :is(.sl-support-p, .legacy-card p, .faq-list details p),
html[lang^="zh"] .sl-steps li p { max-width: 40ch; }
/* ──────────────────────────────────────────────────────────────────────────
5. TAP TARGETS — the geo-page language switcher was never covered
--------------------------------------------------------------------------
An earlier mobile pass raised the landing family's .lang-toggle to 40px.
The geo pages use a different component, .lang-switch, which was missed:
its links measure 19 x 23px on a phone — less than half the 44px target
size, on the control that switches the entire site between languages.
.text-link (28px) and .source-link (26px) are styled calls to action
rather than links inside running prose, so they are raised too. Inline
links inside paragraphs are deliberately left alone: padding those out
breaks the line box they sit in.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
/* .lang-switch is a flex ITEM of .site-head nav, so it shrinks below its
content by default. Enlarging its children without this makes them
overflow their own container and cross into the "Discuss training" button
beside it — which is exactly what the first attempt at this fix did, by
7px. flex-shrink:0 lets the container carry its children instead.
Measured: logo 75 + lang 90 + CTA 102 + gaps = 285px inside a 350px
header, so there is room. */
.lang-switch {
gap: 2px;
flex: 0 0 auto;
}
.site-head .cta { flex: 0 0 auto; }
/* With 44px language targets the geo header needs 386px of content inside a
350px row on the worst page (/one-to-one/, whose CTA reads "Book a
conversation"). Rather than shrink the logo, clip the CTA label or drop a
target back below size, the header wraps to two rows: logo above, controls
below and right-aligned. Nothing is removed and nothing is truncated.
The geo header is not sticky, so the extra height scrolls away. */
.site-head {
flex-wrap: wrap;
row-gap: 12px;
}
.site-head > nav {
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 8px;
}
.lang-switch a,
.lang-switch strong {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 44px;
height: 44px; /* explicit, so the flex row cannot stretch it */
padding: 0 8px;
border-radius: 10px;
}
.lang-switch a:hover,
.lang-switch a:focus-visible { background: rgba(255, 255, 255, .06); }
.button-row .text-link,
.radar-entry-source .source-link,
p > .text-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* .source-link is already display:inline-block and sits on its own line,
never inside running prose, so it can carry a target height without
disturbing any line box. The citation links on /creative-legacy/ — the
only ones the first pass left under size, at 26px — are covered by this.
align-items:flex-start keeps a wrapped two-line citation top-aligned
rather than letting the box centre it away from its paragraph. */
.source-link {
display: inline-flex;
align-items: flex-start;
min-height: 44px;
padding-block: 10px;
margin-top: 0;
}
.source-stack { gap: 0; }
}
/* ──────────────────────────────────────────────────────────────────────────
6. SECTION RHYTHM
--------------------------------------------------------------------------
Two adjacent .section blocks each carry their own vertical padding, so
where one follows another the gap is the sum of both. That is the intended
rhythm. What is not intended is the doubled gap where an injected
illustration block sits between them — this keeps the spacing even.
────────────────────────────────────────────────────────────────────────── */
.ga-lead + .section,
.section + .ga-lead { margin-top: 0; }
.ga-lead > .container { padding-block: 0; }
/* ──────────────────────────────────────────────────────────────────────────
7. THE TWO LANGUAGE VERSIONS DID NOT MATCH — HeyGen event section
--------------------------------------------------------------------------
The English homepage builds this section with `.legacy-home-grid`, a defined
two-column component: copy left, event photograph right, vertically centred.
The Chinese homepage builds the same section with `.heygen-home-grid` and
`.heygen-home-copy` — class names that appear NOWHERE in any stylesheet.
So the Chinese block has no layout at all. It falls back to plain flow: the
copy stacks, and the photograph goes full container width. Measured at
1440px, the identical section renders 450 x 281 on the English page and
1180 x 737 on the Chinese one — a 5.6x area difference, in a section whose
text, image, link and heading are otherwise a straight translation. It is
the largest visual divergence between the two versions.
The undefined names are pointed at the existing component rather than the
markup being rewritten, so nothing in either document changes and the two
pages converge on the layout that was already designed.
────────────────────────────────────────────────────────────────────────── */
.heygen-home-grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(3rem, 8vw, 7rem);
align-items: center;
}
.heygen-home-grid h2 { max-width: 760px; }
.heygen-home-copy > p:not(.eyebrow) {
max-width: 700px;
color: var(--text-muted);
}
@media (max-width: 760px) {
.heygen-home-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
/* ──────────────────────────────────────────────────────────────────────────
8. A VISIBLE SEAM WHERE TWO IDENTICAL GLOWS STACK
--------------------------------------------------------------------------
`.creative-legacy-home` paints a gold radial glow anchored at 85% 20% of
its own box. On the English homepage that class is on the HeyGen event
section AND on the Creative Legacy section immediately below it, so the
second glow restarts at the section boundary. Sampled on the rendered page
at 1440px, the backdrop on the right-hand side jumps 9 → 27 across five
pixels: an 18/255 step drawn as a hard horizontal line most of the way
across the page. The black-artwork edges in this same build were held to
1/255, for scale.
The Chinese page does not have it — its HeyGen section carries a different
class — so this is also a parity fix. The glow is suppressed on the HeyGen
section only, matched by the label it already carries, which leaves the
real Creative Legacy glow exactly as designed.
────────────────────────────────────────────────────────────────────────── */
.creative-legacy-home[aria-labelledby^="heygen-event-title"] { background: none; }
/* ──────────────────────────────────────────────────────────────────────────
9. SMALL-SCREEN SAFETY
--------------------------------------------------------------------------
Long unbroken tokens — a URL, a hyphenated compound, a product name — are
the usual cause of a stray horizontal scrollbar on a phone. The audit found
none, and this keeps it that way without switching on `anywhere`, which
would break ordinary English words mid-syllable.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
h1, h2, h3, p, li, figcaption, blockquote { overflow-wrap: break-word; }
/* Chinese may break between any two characters, so it needs no help here —
and `break-word` on CJK can split a two-character word across lines. */
html[lang^="zh"] :is(h1, h2, h3, p, li, figcaption, blockquote) {
overflow-wrap: normal;
line-break: normal;
}
}
/* ──────────────────────────────────────────────────────────────────────────
10. THE PRESS CREDIT LINE
--------------------------------------------------------------------------
The magazine feature now opens with a visible, linked credit to the
publisher rather than naming it in running text. A credit that lives only
in alt text or a figcaption does not survive a screenshot, a scrape or a
quote, which is exactly how a section like this travels.
It sets smaller and dimmer than the lede so it reads as attribution rather
than as a third paragraph of argument, and the links keep the gold
underline the rest of the site uses for outbound references.
────────────────────────────────────────────────────────────────────────── */
.press-credit {
margin-top: 18px;
font-size: .92rem;
line-height: 1.7;
color: var(--text-dim, #9a948c);
max-width: 62ch;
}
html[lang^="zh"] .press-credit { max-width: 36ch; line-height: 1.85; }
.press-credit a {
color: var(--gold, #cda356);
text-decoration: underline;
text-underline-offset: .18em;
text-decoration-thickness: from-font;
}
.press-credit a:hover,
.press-credit a:focus-visible { text-decoration-thickness: 2px; }
.press-credit-latin {
font-variant: all-small-caps;
letter-spacing: .04em;
}
html[lang^="zh"] .press-credit-latin { font-variant: normal; letter-spacing: 0; }
/* The press section now sits directly under the showreel, so the two dark
blocks meet. Keep the rhythm the rest of the page uses rather than letting
the doubled padding read as a gap. */
.showreel + .press-feature,
.showreel + .ga-lead + .press-feature { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 560px) {
.press-credit { font-size: .88rem; }
}