:root { --ink:#20232b; --muted:#6d7180; --paper:#fffdfb; --line:#ece8e4; --pink:#ff6085; --violet:#7668ff; --cream:#fff2e9; --shadow:0 16px 42px rgba(54,36,46,.09); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",sans-serif; line-height:1.7; } a { color:inherit; text-decoration:none; } img { display:block; width:100%; max-width:100%; object-fit:cover; } .shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; } .site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,251,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); } .header-row { min-height:76px; display:flex; align-items:center; gap:28px; justify-content:space-between; } .brand { display:inline-flex; align-items:center; gap:9px; font-size:19px; font-weight:800; white-space:nowrap; } .brand span span { color:var(--pink); } .brand-mark { display:grid; place-items:center; width:34px; height:34px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--violet)); border-radius:11px; font-size:17px; } .nav-list { display:flex; align-items:center; justify-content:center; gap:5px; margin:0; padding:0; list-style:none; } .nav-list a { display:flex; align-items:center; gap:4px; padding:8px 9px; color:#515464; border-radius:10px; font-size:14px; } .nav-list a:hover,.nav-list a[aria-current="page"] { color:var(--pink); background:#fff0f3; } .nav-icon { font-size:15px; } .menu-button { display:none; border:0; background:none; font-size:24px; } .hero { padding:62px 0; background:radial-gradient(circle at 80% 20%,#ffe2ed 0,transparent 28%),linear-gradient(135deg,#fff8f4,#f7f5ff); } .hero-wrap { display:grid; grid-template-columns:.92fr 1.08fr; gap:52px; align-items:center; } .eyebrow { margin:0 0 9px; color:var(--pink); font-size:12px; font-weight:800; letter-spacing:.14em; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(34px,5vw,62px); line-height:1.15; letter-spacing:-.04em; } h2 { font-size:clamp(25px,3vw,36px); line-height:1.3; letter-spacing:-.03em; } h3 { font-size:20px; line-height:1.35; } .hero-copy>p:not(.eyebrow) { max-width:500px; font-size:18px; color:var(--muted); } .button { display:inline-block; padding:12px 22px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--pink),#f855a7); font-weight:700; box-shadow:0 10px 22px rgba(255,96,133,.24); } .hero-slides { min-height:370px; position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--shadow); } .hero-slide { display:none; height:370px; position:relative; } .hero-slide.active { display:block; } .hero-slide:after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(22,20,31,.68),transparent 65%); } .hero-slide img { height:100%; } .hero-slide div { position:absolute; z-index:1; right:28px; bottom:25px; left:28px; color:#fff; } .hero-slide strong,.hero-slide span { display:block; } .hero-slide strong { font-size:25px; } .section { padding:84px 0; } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:29px; } .section-heading h2 { margin-bottom:0; } .section-heading>p { max-width:360px; margin:0; color:var(--muted); } .text-link { color:var(--pink); font-weight:800; white-space:nowrap; } .channel-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } .channel-card { min-height:176px; display:flex; flex-direction:column; gap:9px; padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; transition:.2s ease; } .channel-card:hover,.story-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); } .channel-card>span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--pink); background:#fff0f3; font-size:22px; } .channel-card strong { font-size:17px; } .channel-card small { color:var(--muted); font-size:12px; line-height:1.5; } .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .story-card { overflow:hidden; display:flex; flex-direction:column; min-height:410px; border:1px solid var(--line); border-radius:18px; background:#fff; transition:.2s ease; } .image-link { height:215px; overflow:hidden; } .image-link img { height:100%; transition:.4s ease; } .story-card:hover img { transform:scale(1.05); } .card-body { display:flex; flex:1; flex-direction:column; padding:20px; } .card-body h3 { margin-bottom:10px; } .card-body p:last-child { color:var(--muted); font-size:14px; } .card-meta { margin-bottom:8px; color:var(--pink); font-size:12px; } .split-section { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; margin:20px auto 84px; border-radius:25px; background:#f4f1ff; } .split-section.reverse { background:#fff1e8; } .feature-image { min-height:390px; } .feature-image img { height:100%; } .feature-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:56px; } .feature-copy p:not(.eyebrow) { color:var(--muted); font-size:17px; } .warm-panel { padding:75px 0; background:linear-gradient(110deg,#ff678b,#8d75ff); color:#fff; } .warm-panel .eyebrow { color:#fff4be; } .warm-panel h2 { margin-bottom:11px; } .warm-panel p:not(.eyebrow) { max-width:580px; opacity:.9; } .warm-panel .text-link { color:#fff; } .quote-section { padding:76px max(40px,10vw); text-align:center; } .quote-section>span { color:#ffb0c2; font-family:Georgia,serif; font-size:80px; line-height:.6; } blockquote { margin:15px 0; font-size:clamp(23px,3vw,34px); font-weight:700; line-height:1.5; } .quote-section p { color:var(--muted); } .about-box { display:grid; grid-template-columns:.7fr 1.3fr; gap:55px; padding:55px; margin-bottom:84px; border:1px solid #f2dbe3; border-radius:24px; background:#fff8fa; } .about-box h2 { margin-bottom:0; } .about-box p { margin:0; color:#565967; font-size:17px; } .app-box { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:47px 55px; border-radius:25px 25px 0 0; color:#fff; background:#252332; } .app-box h2 { margin-bottom:10px; } .app-box p:not(.eyebrow) { max-width:630px; color:#d6d5de; } .button-light { color:#252332; background:#fff; box-shadow:none; } .qr { display:grid; flex:0 0 116px; place-content:center; width:116px; height:116px; color:#252332; background:repeating-linear-gradient(45deg,#fff 0 8px,#f1e6f5 8px 15px); border-radius:14px; text-align:center; font-weight:900; } .qr small { letter-spacing:.15em; } .site-footer { padding:30px 0; color:#a7a5b0; background:#252332; } .footer-row { display:flex; align-items:center; justify-content:space-between; gap:20px; } .footer-row p { margin:0; font-size:13px; } .footer-brand { color:#fff; } .inner-hero { padding:72px 0 64px; background:linear-gradient(135deg,#fff0f4,#f0edff); } .inner-hero h1 { margin-bottom:10px; } .inner-hero p:not(.eyebrow) { max-width:590px; margin-bottom:0; color:var(--muted); font-size:18px; } .breadcrumb { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; color:var(--muted); font-size:14px; } .breadcrumb a { color:var(--pink); } .channel-note { padding:42px; margin-bottom:84px; border-left:5px solid var(--pink); background:#fff5f7; } .channel-note h2 { font-size:25px; } .channel-note p { max-width:760px; margin-bottom:0; color:var(--muted); } .article-page { max-width:850px; padding-top:44px; padding-bottom:84px; } .article-header { padding-bottom:25px; text-align:center; } .article-header h1 { font-size:clamp(34px,5vw,52px); } .article-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:14px; } .article-cover { margin:0 0 34px; } .article-cover img { aspect-ratio:16/8; border-radius:20px; } figcaption { padding-top:9px; color:var(--muted); text-align:center; font-size:13px; } .article-content { font-size:17px; } .article-content p { margin-bottom:25px; } .article-content h2 { margin-top:48px; font-size:29px; } .article-content img { aspect-ratio:16/9; margin:28px 0; border-radius:16px; } .chapter-end { padding:38px 20px; margin-top:48px; border-top:1px solid var(--line); text-align:center; } .chapter-end span { color:var(--pink); font-size:25px; } .chapter-end p { color:var(--muted); } @media (max-width:850px) { .header-row { min-height:64px; } .menu-button { display:block; } .header-row nav { display:none; position:absolute; top:64px; right:0; left:0; padding:14px 20px 20px; background:#fffdfb; border-bottom:1px solid var(--line); } .header-row nav.open { display:block; } .nav-list { display:grid; grid-template-columns:repeat(2,1fr); } .nav-list a { padding:10px; } .hero { padding:38px 0; } .hero-wrap,.split-section,.about-box { grid-template-columns:1fr; gap:0; } .hero-copy { padding-bottom:28px; } .hero-slides,.hero-slide { min-height:280px; height:280px; } .channel-grid { grid-template-columns:repeat(3,1fr); } .feature-image { min-height:280px; } .feature-copy { padding:38px 27px; } .split-section.reverse .feature-image { order:0; } .about-box { padding:35px 27px; } .app-box { padding:36px 28px; } } @media (max-width:600px) { .shell { width:min(100% - 28px,1180px); } .card-grid { grid-template-columns:1fr; gap:18px; } .story-card { min-height:0; } .image-link { height:auto; aspect-ratio:16/9; } .channel-grid { grid-template-columns:repeat(2,1fr); } .section { padding:55px 0; } .section-heading { align-items:start; flex-direction:column; gap:8px; } .section-heading>p { font-size:14px; } .warm-panel { padding:55px 0; } .quote-section { padding:60px 20px; } .app-box,.footer-row { align-items:flex-start; flex-direction:column; } .qr { align-self:center; } .article-page { padding-top:30px; } .article-content { font-size:16px; } .article-cover img { aspect-ratio:4/3; } }