* { box-sizing: border-box; }
:root { --ink:#201a28; --muted:#71677b; --paper:#fffaf8; --brand:#fc4f78; --purple:#6d3ec5; --line:#eee2e8; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; } .shell { width:min(1160px,calc(100% - 32px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,250,248,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); } .header-inner { min-height:70px; display:flex; align-items:center; gap:32px; }
.brand { flex:none; color:var(--brand); font-size:24px; font-weight:900; letter-spacing:-1px; } .brand:before { content:"✦"; margin-right:6px; } .nav-list { display:flex; align-items:center; gap:5px; list-style:none; padding:0; margin:0; overflow:auto; } .nav-link { white-space:nowrap; display:block; padding:8px 10px; border-radius:10px; font-size:14px; } .nav-link:hover { background:#ffe3eb; color:var(--brand); }
.hreo { margin-top:34px; overflow:hidden; border-radius:24px; box-shadow:0 18px 45px rgba(65,31,89,.13); } .hreo-track { display:flex; } .hreo-slide { min-width:100%; display:none; position:relative; height:390px; background:#311c45; overflow:hidden; } .hreo-slide.is-active { display:block; } .hreo-slide img { width:100%; height:100%; object-fit:cover; opacity:.54; } .hreo-copy { position:absolute; left:8%; bottom:17%; max-width:560px; color:white; } .hreo-copy h2 { font-size:clamp(28px,4vw,48px); line-height:1.25; margin:10px 0; }
.eyebrow { display:inline-block; color:var(--brand); font-size:13px; font-weight:700; } .hreo .eyebrow { color:#ffd5df; } .button { display:inline-block; margin-top:8px; border-radius:999px; padding:9px 18px; color:white; background:var(--brand); font-size:14px; font-weight:bold; } .subtle { background:#eee6f6; color:var(--purple); }
.content-section { margin-top:46px; } .section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; } h1,h2,h3,p { margin-top:0; } .section-head h2,.about h2,.app-subscribe h2 { margin-bottom:0; font-size:25px; } .more-link { color:var(--purple); font-weight:bold; font-size:14px; } .more-link:after { content:" →"; } .section-intro { color:var(--muted); margin:6px 0 17px; } .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .news-card { min-width:0; height:100%; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; } .news-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .card-copy { padding:14px 15px 16px; flex:1; } .card-title { display:block; font-size:17px; line-height:1.45; margin:5px 0 7px; } .card-copy p { color:var(--muted); font-size:13px; margin:0; }
.about,.seo-copy { margin-top:46px; padding:28px; background:#fff0f4; border-radius:18px; } .about p,.seo-copy p { color:#554b5c; margin-bottom:0; } .app-subscribe { margin-top:46px; padding:30px; border-radius:20px; color:white; background:linear-gradient(120deg,var(--purple),var(--brand)); display:flex; align-items:center; justify-content:space-between; gap:20px; } .subscribe-copy p { margin:6px 0 0; } .qr-placeholder { width:98px; height:98px; display:grid; place-items:center; text-align:center; color:var(--purple); font-weight:900; line-height:1.1; background:repeating-linear-gradient(45deg,#fff 0 8px,#f0e6ff 8px 12px); border-radius:12px; } .site-footer { margin-top:48px; padding:28px 0; color:#766c7a; border-top:1px solid var(--line); font-size:13px; }
.page-hero { margin-top:38px; padding:32px; background:white; border-radius:20px; } .page-hero h1 { margin:14px 0 4px; font-size:36px; } .breadcrumb { color:var(--muted); font-size:13px; } .breadcrumb a { color:var(--purple); } .article-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .article-page { max-width:880px; padding-top:34px; } .article-header { padding:24px 0 18px; border-bottom:1px solid var(--line); } .article-header h1 { margin:6px 0; font-size:36px; line-height:1.35; } .meta { color:var(--muted); font-size:14px; } .article-body { padding:28px 0; font-size:17px; } .article-body h2 { margin-top:34px; font-size:24px; } .article-body img { display:block; width:min(100%,720px); aspect-ratio:16/10; object-fit:cover; margin:18px auto; border-radius:14px; } .chapter-end { padding:16px; text-align:center; color:var(--purple); background:#f2ebfc; border-radius:12px; } .pager { display:flex; flex-wrap:wrap; gap:10px; padding-bottom:38px; }
@media (max-width:760px) { .shell { width:min(100% - 24px,1160px); } .header-inner { gap:12px; min-height:60px; } .brand { font-size:19px; } .nav-link { padding:7px 8px; font-size:13px; } .hreo { margin-top:20px; border-radius:16px; } .hreo-slide { height:330px; } .hreo-copy { left:7%; right:7%; bottom:12%; } .card-grid,.article-list { grid-template-columns:1fr; } .content-section { margin-top:32px; } .app-subscribe { padding:22px; } .qr-placeholder { width:72px; height:72px; font-size:12px; flex:none; } .page-hero { margin-top:22px; padding:22px; } .page-hero h1,.article-header h1 { font-size:28px; } .article-body { font-size:16px; } }