img{ height: auto; } /* --------------------------------------------------------------------------- Traditional Chinese navigation The design sizes every nav item at a fixed 16.6667% — one sixth of the row — which fits the English labels but not the Chinese ones: 我們的活動 and 我們的伙伴 are wide enough to wrap onto a second line. Above the mobile breakpoint, let each item size to its own text instead and give the row more room between items. Only zh-hant is touched, so the English nav keeps the designer's even six-column rhythm. Below 992px the nav collapses into the full-width dropdown, where the labels already have a whole row each — that layout is left alone. --------------------------------------------------------------------------- */ @media screen and (min-width: 992px) { html[lang="zh-hant"] .nav-wrap { grid-column-gap: 20px; grid-row-gap: 20px; } html[lang="zh-hant"] .nav-link { width: auto; flex: 0 0 auto; white-space: nowrap; } } @media screen and (min-width: 1280px) { html[lang="zh-hant"] .nav-wrap { grid-column-gap: 30px; grid-row-gap: 30px; } } /* --------------------------------------------------------------------------- The Programme Details pillar cards flip on hover The export gave each `.recognize-area-card-container` a data-w-id and two IX2 events — MOUSE_OVER runs a-7 (rotateY -180deg over 500ms), MOUSE_OUT runs a-8 (back to 0). Both are `useEventTarget: true`, so **the element IX2 rotates is the element it takes the hover from**, and that is the whole bug: a rotated box is hit-tested on its projected quad, which is only `cos θ` as wide. Half a card is 270px, so a pointer 20px inside the edge is 250px off centre and falls outside the card as soon as it has turned 22° — about 60ms in. That fires MOUSE_OUT, a-8 rotates it back under the pointer, MOUSE_OVER fires again, and the card sits there juddering a few degrees off true. Dead centre it never happens, which is why it looks like it works. So the trigger and the transform are split onto two elements. The container is a plain, untransformed box the pointer can never fall out of — its rect is exactly the card's, the two faces being `inset: 0` and `position: relative` inside it — and the rotation moves to `-flip`, which nothing hit-tests. Hovering the very edge now flips the card once, all the way, every time. `transform-style: preserve-3d` is what makes the two `backface-visibility: hidden` faces swap over at 90°. IX2 rotated a `flat` container, which flattens its children into one plane before turning it, and a flattened face has no backface to hide — the front simply came round mirrored. No `perspective`: the designer's flip has none, so it stays an orthographic turn rather than gaining a depth cue that was never drawn. The 500ms and the ease are a-7's own. As a CSS transition it also runs on the compositor instead of a per-frame rAF write, so it is smoother than what it replaces — and it cannot be interrupted halfway by its own geometry. --------------------------------------------------------------------------- */ .recognize-area-card-flip { height: 100%; position: relative; transform-style: preserve-3d; transition: transform 500ms ease-in-out; } .recognize-area-card-container:hover .recognize-area-card-flip { transform: rotateX(0) rotateY(-180deg) rotateZ(0); } /* --------------------------------------------------------------------------- Lists on the back of the Programme Details pillar cards In the export the card backs are hand-written markup: a `.common-list.bullet` holding `.common-list-item.bullet` (disc) on card 1 and `.common-list-item.num` (decimal) on card 2. That text is a CMS editor field now, so the admin's rich-text output is a plain