/* mobile-huasport.com.cn · identity stack */
:root { color-scheme: light; --mhp-paper:#fffaf0; --mhp-ink:#20242a; --mhp-muted:#687079; --mhp-blue:#3566a0; --mhp-sand:#ead5a4; --mhp-line:#e3dccd; --mhp-white:#fff; font-family:"Segoe UI","Microsoft YaHei",sans-serif; color:var(--mhp-ink); background:var(--mhp-paper); }
* { box-sizing:border-box; } body { margin:0; line-height:1.75; background:var(--mhp-paper); } a { color:inherit; text-underline-offset:3px; }
.mhp-header { background:var(--mhp-white); border-bottom:1px solid var(--mhp-line); } .mhp-identity { width:min(1280px,calc(100% - 40px)); margin:auto; padding:20px 0 11px; display:flex; justify-content:space-between; align-items:baseline; } .mhp-identity>a { font-size:1.55rem; font-weight:800; text-decoration:none; } .mhp-identity span,.mhp-section small,.mhp-hero-copy small,.mhp-page-title small { color:var(--mhp-blue); font-size:.82rem; font-weight:700; letter-spacing:.06em; }
.mhp-nav { width:min(1280px,calc(100% - 40px)); margin:auto; padding:9px 0 14px; display:flex; gap:18px; overflow:auto; white-space:nowrap; } .mhp-nav a { text-decoration:none; font-size:.88rem; }
.mhp-home,.mhp-inner { width:min(1280px,calc(100% - 40px)); margin:auto; padding:30px 0 72px; } h1 { margin:0 0 20px; font-size:clamp(1.65rem,3vw,2.55rem); line-height:1.25; }
.mhp-hero { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:25px; padding:26px; background:var(--mhp-white); border:1px solid var(--mhp-line); border-left:7px solid var(--mhp-blue); } .mhp-hero-copy { align-self:center; } .mhp-hero-copy h2 { margin:4px 0 12px; font-size:clamp(1.45rem,2.8vw,2.2rem); } .mhp-collage { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:repeat(3,minmax(60px,1fr)); gap:9px; min-height:330px; } .mhp-collage figure { display:grid; place-items:center; overflow:hidden; margin:0; background:#f2ead9; } .mhp-collage img { display:block; width:auto; height:auto; max-width:100%; max-height:250px; object-fit:contain; } .mhp-image-main { grid-row:1/4; border-radius:3px 28px 3px 3px; } .mhp-image-a { border-radius:3px 3px 3px 16px; } .mhp-image-b { border-radius:16px 3px 3px 3px; } .mhp-image-c { border-radius:3px 16px 3px 3px; }
.mhp-section { margin-top:34px; padding:24px 27px; background:var(--mhp-white); border:1px solid var(--mhp-line); scroll-margin-top:14px; } .mhp-section h2 { margin:2px 0 10px; font-size:1.5rem; line-height:1.35; } .mhp-section p { max-width:94ch; }
.mhp-faq { display:grid; grid-template-columns:.7fr 1.3fr; gap:20px; } .mhp-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; } .mhp-faq-card { padding:14px; border-left:3px solid var(--mhp-blue); background:#f8f6f0; } .mhp-faq-card h3 { margin:0 0 8px; font-size:1rem; } .mhp-faq-card p { margin:0; }
.mhp-team { display:grid; grid-template-columns:1fr .8fr; gap:25px; } .mhp-team aside { display:grid; grid-template-columns:90px 1fr; align-content:center; } .mhp-team aside>* { padding:8px; border-bottom:1px solid var(--mhp-line); } .mhp-team aside b { color:var(--mhp-blue); }
.mhp-rule-tags { display:flex; flex-wrap:wrap; gap:8px; } .mhp-rule-tags span { padding:5px 12px; border:1px solid var(--mhp-sand); border-radius:18px; }
.mhp-event-scale,.mhp-insight-band { display:flex; align-items:center; gap:15px; padding:16px; background:#f5f0e5; } .mhp-event-scale i { flex:1; height:1px; background:var(--mhp-blue); } .mhp-insights { display:grid; grid-template-columns:.7fr 1.3fr; gap:10px 25px; } .mhp-insights header { grid-row:span 2; } .mhp-insight-band { justify-content:space-between; }
.mhp-gallery { display:grid; grid-template-columns:.8fr 1.2fr; gap:20px; } .mhp-ground-lines { grid-column:1/-1; display:flex; justify-content:space-around; padding:14px; border:1px dashed var(--mhp-blue); color:var(--mhp-blue); }
.mhp-community-stack { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; } .mhp-community-stack article { padding:15px; background:#f8f6f0; } .mhp-community-stack article:first-child { grid-row:span 2; background:#f3ead7; } .mhp-community-stack h3 { margin:0 0 7px; } .mhp-community-stack p { margin:0; }
.mhp-news-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .mhp-news-card { padding:14px; border-top:4px solid var(--mhp-blue); background:#f8f6f0; } .mhp-news-card h3 { margin:0 0 7px; font-size:1rem; } .mhp-news-card p { margin:0; }
.mhp-stats dl { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--mhp-line); } .mhp-stats dl div { padding:12px; background:#f8f6f0; } .mhp-stats dt { color:var(--mhp-blue); font-weight:800; } .mhp-stats dd { margin:0; color:var(--mhp-muted); }
.mhp-page-title { max-width:950px; padding:24px 28px; background:#f3ead7; border-radius:3px 32px 3px 3px; } .mhp-page-title h1 { margin:4px 0 10px; } .mhp-page-title p { margin:0; }
.mhp-inner-grid { display:grid; grid-template-columns:235px minmax(0,1fr); gap:24px; margin-top:25px; } .mhp-side-facts { align-self:start; padding:16px; background:var(--mhp-white); border:1px solid var(--mhp-line); } .mhp-side-facts h2 { margin:0 0 8px; font-size:1.1rem; } .mhp-side-facts div { padding:11px 0; border-top:1px solid var(--mhp-line); } .mhp-side-facts b { color:var(--mhp-blue); } .mhp-side-facts p { margin:3px 0 0; font-size:.9rem; }
.mhp-about-list,.mhp-language-list,.mhp-app-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .mhp-about-list article,.mhp-language-list article,.mhp-app-list article { padding:16px; border:1px solid var(--mhp-line); background:var(--mhp-white); } .mhp-about-list article:first-child,.mhp-language-list article:last-child { grid-column:span 2; }
.mhp-article-stack { display:grid; gap:16px; } .mhp-full-article { padding:19px; border:1px solid var(--mhp-line); background:var(--mhp-white); scroll-margin-top:15px; } .mhp-full-article h2 { margin:5px 0 10px; } .mhp-story-photo { display:block; width:auto; max-width:100%; max-height:128px; object-fit:contain; } .mhp-form-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .mhp-form-card { position:relative; padding:16px 16px 16px 50px; background:var(--mhp-white); border:1px solid var(--mhp-line); scroll-margin-top:15px; } .mhp-form-card>span { position:absolute; left:16px; top:15px; color:var(--mhp-blue); font-weight:800; } .mhp-form-card h2 { margin:0 0 8px; font-size:1.1rem; }
.mhp-photo-strip { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; padding:14px; background:#f3ead7; } .mhp-photo-strip figure { display:grid; place-items:center; flex:1 1 21%; min-width:110px; margin:0; } .mhp-photo-strip img { width:auto; height:auto; max-width:100%; max-height:128px; object-fit:contain; } .mhp-photo-strip figcaption { font-size:.8rem; color:var(--mhp-muted); text-align:center; }
.mhp-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:22px max(20px,calc((100vw - 1280px)/2)); background:var(--mhp-white); border-top:1px solid var(--mhp-line); font-size:.88rem; } .mhp-footer p { margin:5px 0 0; color:var(--mhp-muted); } .mhp-footer nav { display:flex; gap:14px; }
@media(max-width:900px) { .mhp-hero,.mhp-faq,.mhp-team,.mhp-gallery,.mhp-insights,.mhp-inner-grid { grid-template-columns:1fr; } .mhp-faq-grid,.mhp-news-grid { grid-template-columns:1fr 1fr; } .mhp-insights header { grid-row:auto; } }
@media(max-width:620px) { .mhp-identity,.mhp-nav,.mhp-home,.mhp-inner { width:calc(100% - 26px); } .mhp-identity { align-items:flex-start; flex-direction:column; gap:0; } .mhp-nav { gap:15px; } .mhp-home,.mhp-inner { padding-top:21px; } .mhp-hero,.mhp-section { padding:17px; } .mhp-collage { grid-template-columns:1fr 1fr; grid-template-rows:130px 90px 75px; min-height:0; } .mhp-image-main { grid-column:1/3; grid-row:auto; } .mhp-faq-grid,.mhp-news-grid,.mhp-about-list,.mhp-language-list,.mhp-app-list,.mhp-form-list { grid-template-columns:1fr; } .mhp-about-list article:first-child,.mhp-language-list article:last-child { grid-column:auto; } .mhp-community-stack { grid-template-columns:1fr; } .mhp-community-stack article:first-child { grid-row:auto; } .mhp-ground-lines { flex-direction:column; gap:8px; } .mhp-event-scale,.mhp-insight-band { align-items:flex-start; flex-direction:column; } .mhp-event-scale i { width:100%; flex:0 0 1px; } .mhp-stats dl { grid-template-columns:1fr 1fr; } .mhp-footer { padding:17px 13px; } }