/* ============================================================ ECP – Language Toggle (EN | 中文) Matches lang.js toggle structure: .lt-en / .lt-divider / .lt-zh / .lt-active ============================================================ */ /* ── Core Toggle Button ── */ .lang-toggle { display: inline-flex; align-items: center; gap: 0; padding: 5px 12px; background: transparent; border: 1.5px solid var(--ecp-cool-gray); border-radius: 99px; cursor: pointer; transition: border-color 0.22s ease, background 0.22s ease; flex-shrink: 0; white-space: nowrap; } .lang-toggle:hover { border-color: var(--ecp-gold); background: rgba(200, 165, 98, 0.06); } /* Segments */ .lang-toggle .lt-en, .lang-toggle .lt-zh { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ecp-text-muted); padding: 0 5px; transition: color 0.18s ease; line-height: 1; cursor: pointer; } /* Chinese label uses Noto Sans SC for proper rendering */ .lang-toggle .lt-zh { font-family: 'Noto Sans SC', var(--font-body), sans-serif; text-transform: none; letter-spacing: 0.02em; } /* Active segment — highlights in navy */ .lang-toggle .lt-active { color: var(--ecp-navy); font-weight: 700; } /* Divider pipe */ .lang-toggle .lt-divider { font-size: 10px; color: var(--ecp-cool-gray); padding: 0 1px; line-height: 1; pointer-events: none; user-select: none; } /* ── Desktop header placement ── */ /* Sits between .nav and .header__cta — injected by lang.js */ .header__inner .lang-toggle { background: var(--ecp-light-gray); border-color: var(--ecp-cool-gray); } .header__inner .lang-toggle:hover { border-color: var(--ecp-gold); background: rgba(200, 165, 98, 0.08); } /* When in ZH mode, active segment shows gold for extra clarity */ .lang-toggle:hover .lt-active { color: var(--ecp-navy); } /* ── Mobile nav footer placement ── */ .lang-toggle--mobile { align-self: stretch; justify-content: center; width: 100%; padding: 10px 16px; border-radius: var(--radius-md); background: var(--ecp-light-gray); border-color: var(--ecp-cool-gray); } .lang-toggle--mobile .lt-en, .lang-toggle--mobile .lt-zh { font-size: 12.5px; padding: 0 8px; } .lang-toggle--mobile .lt-divider { font-size: 12px; color: var(--ecp-cool-gray); } .lang-toggle--mobile:hover { border-color: var(--ecp-gold); background: rgba(200, 165, 98, 0.08); } /* ── ZH lang attribute on — switch Noto Sans SC for body text ── */ html[lang="zh-CN"] body { font-family: 'Noto Sans SC', var(--font-body), sans-serif; } /* Keep headings in Playfair Display even in ZH mode */ html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] h4, html[lang="zh-CN"] h5 { font-family: var(--font-heading); } /* Slightly looser line-height for Chinese body text */ html[lang="zh-CN"] p, html[lang="zh-CN"] li, html[lang="zh-CN"] .section-desc, html[lang="zh-CN"] .intro-body { line-height: 1.90; letter-spacing: 0.01em; } /* ── Class-based body language helpers ── */ /* Hide EN-only elements in ZH mode */ body.lang-zh .en-only { display: none !important; } /* Hide ZH-only elements in EN mode (default) */ body.lang-en .zh-only { display: none !important; } /* Default hide zh-only until lang-en is set (before JS runs) */ .zh-only { display: none !important; } body.lang-zh .zh-only { display: block !important; } body.lang-zh .zh-only.zh-flex { display: flex !important; } body.lang-zh .zh-only.zh-grid { display: grid !important; } /* ── Hero Keyword Strip (ZH-only) ── */ .hero__keywords { margin-top: 28px; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,0.15); } .hero__keywords span { font-family: 'Noto Sans SC', var(--font-body), sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; line-height: 1.6; } /* ── ZH Service Cards Grid (企业出海 section) ── */ body.lang-zh .zh-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .zh-service-card { background: var(--ecp-white); border: 1px solid var(--ecp-cool-gray); border-radius: var(--radius-lg); padding: 32px 28px; transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .zh-service-card:hover { box-shadow: 0 8px 32px rgba(34,49,63,0.10); border-color: var(--ecp-gold); transform: translateY(-3px); } .zh-service-card__icon { width: 48px; height: 48px; background: rgba(200,165,98,0.10); border: 1px solid rgba(200,165,98,0.25); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--ecp-gold); font-size: 18px; } .zh-service-card__title { font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--ecp-navy); margin-bottom: 12px; line-height: 1.3; } .zh-service-card__desc { font-family: 'Noto Sans SC', var(--font-body), sans-serif; font-size: 14px; color: var(--ecp-slate); line-height: 1.85; margin: 0; } /* ── ZH Integrated Section (一站式) ── */ .zh-integrated-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .zh-integrated-text .section-label { margin-bottom: 12px; } .zh-integrated-text .section-title { margin-bottom: 16px; } .zh-integrated-text .section-desc { margin-top: 20px; max-width: 480px; } .zh-integrated-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .zh-pillar { display: flex; align-items: center; gap: 12px; background: var(--ecp-white); border: 1px solid var(--ecp-cool-gray); border-radius: var(--radius-md); padding: 16px 20px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .zh-pillar:hover { border-color: var(--ecp-gold); box-shadow: 0 4px 16px rgba(34,49,63,0.07); } .zh-pillar i { color: var(--ecp-gold); font-size: 16px; flex-shrink: 0; } .zh-pillar span { font-family: 'Noto Sans SC', var(--font-body), sans-serif; font-size: 13px; font-weight: 500; color: var(--ecp-navy); letter-spacing: 0.03em; } /* Responsive adjustments for ZH sections */ @media (max-width: 1024px) { body.lang-zh .zh-service-grid { grid-template-columns: repeat(2, 1fr); } .zh-integrated-inner { grid-template-columns: 1fr; gap: 40px; } .zh-integrated-pillars { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { body.lang-zh .zh-service-grid { grid-template-columns: 1fr; } .zh-integrated-pillars { grid-template-columns: repeat(2, 1fr); } .hero__keywords span { font-size: 11px; } } /* ── Transition fade on language switch ── */ [data-i18n] { transition: opacity 0.15s ease; } body.lang-switching [data-i18n] { opacity: 0.35; } /* ── Responsive: on ≤1024px the desktop toggle is hidden (nav collapses), the mobile footer toggle (injected into .mobile-nav__footer) takes over ── */ @media (max-width: 1024px) { /* The injected desktop toggle inside .header__inner gets hidden with .nav */ /* Nothing extra needed — lang.js injects into mobile-nav__footer separately */ } @media (max-width: 640px) { .lang-toggle--mobile { font-size: 13px; } }