* { box-sizing: border-box; }
:root { --ink:#1e2430; --muted:#677083; --paper:#ffffff; --bg:#f5f7fb; --line:#e6e9f0; --brand:#f05b3c; --dark:#242a38; --gold:#ffc858; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--brand); }
.site-header { background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.header-inner { max-width:1200px; min-height:72px; margin:auto; padding:0 20px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:9px; flex:none; font-weight:800; font-size:20px; color:var(--dark); }
.brand-mark { width:35px; height:35px; border-radius:50% 50% 45% 45%; display:grid; place-items:center; color:#fff; background:var(--brand); font-size:15px; box-shadow:inset 0 -4px 0 rgba(0,0,0,.1); }
.main-nav { flex:1; display:flex; justify-content:space-between; gap:3px; }
.main-nav a { padding:9px 7px; border-radius:8px; font-size:14px; white-space:nowrap; }
.main-nav .is-active,.main-nav a:hover { color:var(--brand); background:#fff0eb; }
.nav-icon { margin-right:4px; color:var(--brand); } .nav-toggle { display:none; border:0; background:none; font-size:22px; }
.hero { max-width:1200px; margin:32px auto 26px; padding:0 20px; overflow:hidden; }
.hero-track { display:grid; } .hero-slide { grid-area:1/1; min-height:350px; border-radius:20px; overflow:hidden; color:#fff; display:grid; grid-template-columns:1fr 1fr; background:var(--dark); opacity:0; pointer-events:none; transition:opacity .45s; } .hero-slide.is-visible { opacity:1; pointer-events:auto; } .hero-copy { padding:54px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:linear-gradient(130deg,#242a38,#59413c); } .hero-copy h1,.hero-copy h2 { margin:0 0 10px; line-height:1.25; font-size:36px; } .hero-copy p { margin:0 0 22px; color:#f0edf0; } .hero-slide img { width:100%; height:350px; object-fit:cover; }
.eyebrow { margin:0 0 7px; color:var(--brand); font-size:13px; font-weight:700; letter-spacing:.08em; } .hero .eyebrow { color:var(--gold); }
.button { display:inline-block; padding:10px 17px; background:var(--brand); color:#fff; border-radius:8px; font-weight:bold; } .button:hover { color:#fff; background:#d7472c; } .button-light { background:#fff; color:var(--brand); }
.hero-dots { margin-top:12px; text-align:center; } .hero-dots button { border:0; margin:0 4px; width:10px; height:10px; border-radius:50%; color:transparent; background:#c6cad3; } .hero-dots .is-current { background:var(--brand); }
.quick-grid,.content-section,.about-section,.seo-copy,.article-page { max-width:1200px; margin:0 auto 26px; padding-left:20px; padding-right:20px; } .quick-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:12px; } .quick-grid a { min-height:116px; padding:15px 12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:5px; transition:.2s; } .quick-grid a:hover { transform:translateY(-3px); border-color:#f5b1a1; } .quick-icon { color:var(--brand); font-size:22px; } .quick-grid small { color:var(--muted); font-size:12px; line-height:1.45; }
.content-section { background:var(--paper); border-radius:16px; padding-top:26px; padding-bottom:28px; } .content-section.tinted { background:#fff8f4; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:17px; } .section-heading h2,.about-section h2,.seo-copy h2 { margin:0; font-size:25px; line-height:1.35; } .section-heading>a { font-size:14px; color:var(--brand); } .story-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; } .story-card { min-width:0; background:#fff; border:1px solid var(--line); border-radius:11px; overflow:hidden; display:flex; flex-direction:column; } .story-image { display:block; height:145px; overflow:hidden; background:#eceff4; } .cover { width:100%; height:100%; display:block; object-fit:cover; } .story-copy { display:flex; flex:1; flex-direction:column; padding:13px; } .story-meta { margin:0 0 5px; color:var(--brand); font-size:12px; } .story-copy h3 { margin:0 0 8px; font-size:16px; line-height:1.48; } .story-copy p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .feature-grid article { min-height:155px; border-radius:11px; padding:19px; color:#fff; background:linear-gradient(135deg,#413d50,#7b5261); } .feature-grid article:nth-child(2n) { background:linear-gradient(135deg,#2c5665,#486f83); } .feature-grid span { color:var(--gold); } .feature-grid h3 { margin:8px 0; font-size:18px; } .feature-grid p { margin:0; font-size:13px; color:#eef3f5; line-height:1.65; }
.about-section,.seo-copy { background:#fff; border-radius:16px; padding-top:30px; padding-bottom:30px; } .about-section p:last-child,.seo-copy p { max-width:920px; margin:14px 0 0; color:#4e596c; }
.app-subscribe { max-width:1160px; margin:0 auto 0; padding:32px 40px; border-radius:16px 16px 0 0; background:linear-gradient(120deg,#f05b3c,#e98945); color:#fff; display:flex; justify-content:space-between; align-items:center; } .app-subscribe .eyebrow { color:#fff1d5; } .app-subscribe h2 { margin:0; font-size:27px; } .app-subscribe p:not(.eyebrow) { max-width:720px; margin:7px 0 15px; } .qr-card { width:120px; height:120px; border-radius:12px; background:#fff; color:var(--brand); display:flex; flex-direction:column; justify-content:center; text-align:center; line-height:1.25; } .qr-card span { font-size:37px; font-weight:900; }
.site-footer { padding:26px 20px 40px; text-align:center; color:#9aa1af; background:var(--dark); } .site-footer a { color:#fff; margin:0 4px; } .site-footer p { margin:9px 0 0; font-size:13px; }
.inner-page { padding-top:28px; } .breadcrumb { max-width:1200px; margin:0 auto 17px; padding:0 20px; color:var(--muted); font-size:14px; } .breadcrumb span { margin:0 8px; } .channel-hero { max-width:1160px; margin:0 auto 26px; padding:38px; border-radius:16px; background:linear-gradient(115deg,#263d51,#4c687a); color:#fff; } .channel-hero .eyebrow { color:var(--gold); } .channel-hero h1 { margin:0 0 10px; font-size:34px; } .channel-hero p:last-child { margin:0; max-width:800px; color:#eff6fb; }
.article-page { padding-top:28px; } .article-page .breadcrumb { padding:0; } .article-body { padding:42px; border-radius:16px; background:#fff; } .article-body h1 { margin:0 0 15px; font-size:34px; line-height:1.35; } .article-body h2 { margin:34px 0 12px; font-size:22px; } .article-body p { color:#3f4958; } .article-info { padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; gap:16px; flex-wrap:wrap; } .lead { font-size:17px; } figure { margin:20px 0; } .article-image { width:100%; aspect-ratio:16/8; display:block; object-fit:cover; border-radius:10px; } figcaption { margin-top:6px; color:var(--muted); font-size:13px; text-align:center; } .chapter-end { text-align:center; color:var(--brand)!important; padding:20px; background:#fff6f2; } .article-nav { margin:25px 0 18px; display:flex; justify-content:space-between; gap:15px; } .article-nav a { color:var(--brand); font-weight:bold; } .article-nav span { color:var(--muted); }
@media (max-width:980px) { .main-nav { overflow:auto; justify-content:flex-start; } .quick-grid { grid-template-columns:repeat(4,1fr); } .story-grid { grid-template-columns:repeat(3,1fr); } .feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .header-inner { min-height:60px; padding:0 14px; gap:10px; } .nav-toggle { display:block; margin-left:auto; } .main-nav { display:none; position:absolute; top:60px; left:0; right:0; padding:10px 14px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; } .main-nav.is-open { display:flex; } .hero { margin-top:18px; padding:0 14px; } .hero-slide { min-height:440px; grid-template-columns:1fr; } .hero-copy { min-height:260px; padding:28px; } .hero-copy h1,.hero-copy h2 { font-size:27px; } .hero-slide img { height:180px; } .quick-grid,.content-section,.about-section,.seo-copy,.article-page { padding-left:14px; padding-right:14px; } .quick-grid { grid-template-columns:repeat(2,1fr); } .story-grid { grid-template-columns:repeat(2,1fr); gap:11px; } .story-image { height:122px; } .story-copy { padding:11px; } .story-copy h3 { font-size:14px; } .feature-grid { grid-template-columns:1fr; } .section-heading h2,.about-section h2 { font-size:22px; } .channel-hero { margin:0 14px 22px; padding:27px; } .channel-hero h1,.article-body h1 { font-size:27px; } .article-body { padding:25px 18px; } .app-subscribe { margin:0; border-radius:0; padding:28px 20px; gap:18px; } .app-subscribe h2 { font-size:22px; } .qr-card { flex:none; width:92px; height:92px; } .qr-card span { font-size:29px; } }