/* ATF Frontend Language Switcher * v1.0.9 — Trend tags 2×2 grid, mega-menu EN alignment override, auth-page flash-fix. */ /* Topbar switch button (v1.0.4) */ .atf-lang-switch{display:inline-flex;align-items:center;gap:4px;margin-left:12px;padding:6px 10px;border:1px solid transparent;border-radius:14px;background:transparent;color:#666;font-size:12px;line-height:1;height:28px;box-sizing:border-box;cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s,color .18s} .atf-lang-switch:hover{background:#EDFE63;border-color:transparent;color:#111} .atf-lang-switch:focus-visible{outline:2px solid #222;outline-offset:2px} .atf-lang-switch .atf-lang-icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6} .atf-lang-switch .atf-lang-label{font-family:inherit;font-weight:500;letter-spacing:.02em} html[data-atf-lang="en"] .trp-language-switcher-container, html[data-atf-lang="en"] .trp-floater{display:none!important} /* v1.0.9.1: Kill the legacy "English version coming soon" toast injected by * atf-header-topbar's own EN button — we now own the real toggle. */ #atf-lang-hint,.atf-lang-hint{display:none!important} /* ========================================================================== * v1.0.9 fix #1 — Trend-forecast card tag grid must be a clean 2×2. * * Root cause of the 3+1 wrap Joanna reported: the theme's `.trend-tags` uses * flex-wrap with intrinsic-width chips, so with mixed short/long English * labels ("Show Frontiers", "Consumer Electronics", "Future Home", "Award * Insights") three short chips fit on line 1 and the long chip drops to * line 2. Force an explicit 2-column grid on the JS-rebuilt block. * ========================================================================== */ html[data-atf-lang="en"] body.home .trend-forecast-section .trend-tags.trend-tags-2col{ display:grid !important; grid-template-columns:1fr 1fr !important; justify-content:end; justify-items:end; gap:6px 10px !important; } html[data-atf-lang="en"] body.home .trend-forecast-section .trend-tags.trend-tags-2col > span{ text-align:right; white-space:nowrap; } /* ========================================================================== * v1.0.9 fix #2 — Mega-menu Fashion & Lifestyle column right-alignment. * * atf-trend-forecast-menu v1.2.4 shipped `.mega-column-text:last-child { text-align:right }` * plus `align-items:flex-end` so the whole rightmost column hugs the edge in * English mode. Joanna wants those four items (Smart Home Appliances / * Fashion Bags / Fine Jewelry / Future Home) centered like the CN state. * Override the plugin CSS instead of shipping another header-plugin build. * ========================================================================== */ html[data-atf-lang="en"] .atf-tfm-grid .mega-column-text:last-child, html[data-atf-lang="en"] body > .submenu-dropdown.mega-menu.mega-menu-portaled .atf-tfm-grid .mega-column-text:last-child{ text-align:center !important; } html[data-atf-lang="en"] .atf-tfm-grid .mega-column-text:last-child .mega-third-list:not(.mega-third-list-columns){ align-items:center !important; } html[data-atf-lang="en"] .atf-tfm-grid .mega-column-text:last-child .mega-third-list:not(.mega-third-list-columns) .mega-third-link{ text-align:center !important; } /* ========================================================================== * v1.0.9 fix #4 — Kill flash-of-Chinese-content on login/register pages. * * The auth pages render CN text in server-side HTML, then switcher.js swaps * to EN after DOMContentLoaded → mutation observer settle. That's the 1–2s * flash. The inline head script in atf-lang-switcher.php sets * before body paints; this rule hides the * translatable auth text until the first apply() pass finishes and * switcher.js removes the loading attribute. * Scoped narrowly to auth surfaces so we never white-out normal pages. * ========================================================================== */ html[data-atf-lang-loading="en"] body.page-register .auth-title, html[data-atf-lang-loading="en"] body.page-register .auth-desc, html[data-atf-lang-loading="en"] body.page-register .auth-modal__title, html[data-atf-lang-loading="en"] body.page-register .auth-modal__desc, html[data-atf-lang-loading="en"] body.page-login .auth-title, html[data-atf-lang-loading="en"] body.page-login .auth-desc, html[data-atf-lang-loading="en"] body.page-login .auth-modal__title, html[data-atf-lang-loading="en"] body.page-login .auth-modal__desc, html[data-atf-lang-loading="en"] .atf-auth-modal .auth-modal__title, html[data-atf-lang-loading="en"] .atf-auth-modal .auth-modal__desc, html[data-atf-lang-loading="en"] [data-atf-auth-title], html[data-atf-lang-loading="en"] [data-atf-auth-desc]{ visibility:hidden !important; } /* Safety net: never keep content hidden for longer than 1.2s even if JS never runs. */ @keyframes atf-lang-reveal { to { visibility:visible; } } html[data-atf-lang-loading="en"] body.page-register .auth-title, html[data-atf-lang-loading="en"] body.page-register .auth-desc, html[data-atf-lang-loading="en"] body.page-login .auth-title, html[data-atf-lang-loading="en"] body.page-login .auth-desc, html[data-atf-lang-loading="en"] .atf-auth-modal .auth-modal__title, html[data-atf-lang-loading="en"] .atf-auth-modal .auth-modal__desc{ animation: atf-lang-reveal 0s linear 1.2s forwards; }