* { box-sizing: border-box; }
:root { --ink:#1d2440; --muted:#69708b; --paper:#fbfbff; --purple:#6d55d8; --coral:#f06f67; --line:#e8e9f2; --sky:#e9f1ff; }
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; }
.site-shell { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.site-header { background:rgba(251,251,255,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.header-inner { min-height:82px; display:flex; align-items:center; gap:32px; }
.brand { display:flex; align-items:center; gap:10px; white-space:nowrap; font-weight:800; font-size:20px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:linear-gradient(135deg,var(--purple),var(--coral)); border-radius:13px 13px 13px 3px; }
.brand-text span { display:block; color:var(--coral); font-size:11px; letter-spacing:1px; margin-top:-6px; }
.primary-nav { margin-left:auto; }
.primary-nav ul { margin:0; padding:0; display:flex; gap:3px; list-style:none; }
.primary-nav a { display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:10px; font-size:13px; color:#505873; white-space:nowrap; }
.primary-nav li.is-active a, .primary-nav a:hover { color:var(--purple); background:#eeeaff; font-weight:700; }
.nav-icon { font-size:16px; }
.menu-toggle { display:none; border:0; background:transparent; font-size:24px; color:var(--ink); }
.hero { min-height:475px; margin-top:48px; padding:62px 72px; overflow:hidden; position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:55px; border-radius:30px; color:#fff; background:linear-gradient(125deg,#33295f 0%,#5846b1 57%,#9c5fbb 100%); }
.hero:after { content:""; position:absolute; inset:auto -70px -120px auto; width:330px; height:330px; border-radius:50%; background:rgba(255,255,255,.08); }
.hero-copy { position:relative; z-index:1; }
.eyebrow { margin:0 0 7px; color:var(--coral); letter-spacing:1.6px; font-size:12px; font-weight:800; }
.hero .eyebrow { color:#ffd3a5; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:42px; line-height:1.2; letter-spacing:1px; }
h2 { font-size:27px; line-height:1.3; }
h3 { font-size:18px; line-height:1.35; }
.hero-copy > p:not(.eyebrow) { max-width:560px; color:#ebe7ff; font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0; }
.button { display:inline-flex; align-items:center; gap:12px; padding:11px 17px; border-radius:12px; font-weight:700; transition:transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--coral); box-shadow:0 8px 18px rgba(240,111,103,.25); }
.button-light { color:var(--purple); background:#fff; }
.hero-stats { display:flex; gap:28px; font-size:12px; color:#e5dfff; }
.hero-stats span { display:grid; }
.hero-stats b { color:#fff; font-size:21px; }
.hero-art { min-height:320px; position:relative; z-index:1; }
.hero-cover { position:absolute; width:195px; right:56px; top:9px; padding:9px; background:#fff; border-radius:18px; transform:rotate(7deg); box-shadow:0 24px 35px rgba(23,14,75,.32); }
.hero-cover img { aspect-ratio:3/4; border-radius:11px; }
.hero-badge { position:absolute; left:0; bottom:40px; padding:14px 20px; border-radius:15px; color:var(--ink); background:#ffe5b9; box-shadow:0 12px 20px rgba(0,0,0,.13); line-height:1.4; }
.hero-badge b { font-size:20px; }
.hero-orbit { position:absolute; border:1px solid rgba(255,255,255,.3); border-radius:50%; }
.orbit-one { width:330px; height:330px; top:0; right:-5px; } .orbit-two { width:210px; height:210px; top:55px; right:55px; }
.quick-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:25px; background:#fff; border:1px solid var(--line); border-radius:17px; overflow:hidden; }
.quick-strip a { padding:18px 20px; border-right:1px solid var(--line); font-size:14px; font-weight:700; } .quick-strip a:last-child { border:0; } .quick-strip span { color:var(--purple); font-size:20px; margin-right:10px; }
.content-section,.genre-panel,.schedule,.ranking-module,.reader-quote,.feature-tiles,.about-panel,.app-panel,.spotlight { margin-top:76px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-heading h2 { margin-bottom:0; } .text-link { color:var(--purple); font-size:14px; font-weight:800; white-space:nowrap; } .section-intro { color:var(--muted); margin:10px 0 22px; }
.cover-grid,.wide-grid { display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
.comic-card { overflow:hidden; border:1px solid var(--line); background:#fff; border-radius:17px; transition:transform .2s, box-shadow .2s; } .comic-card:hover { transform:translateY(-5px); box-shadow:0 15px 28px rgba(50,47,93,.1); }
.comic-image { display:block; overflow:hidden; background:#ececf5; } .comic-image img { aspect-ratio:3/4; transition:transform .3s; } .comic-card:hover img { transform:scale(1.04); }
.comic-meta { padding:15px 16px 17px; } .comic-meta span { color:var(--coral); font-size:12px; font-weight:800; } .comic-meta h3 { margin:3px 0 7px; } .comic-meta p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.spotlight { display:grid; grid-template-columns:300px 1fr 170px; gap:35px; align-items:center; padding:26px; background:#172141; color:#fff; border-radius:25px; } .spotlight-image img { aspect-ratio:4/3; border-radius:15px; } .spotlight-copy p:not(.eyebrow) { color:#cfd5f1; } .spotlight .text-link { color:#ffb895; } .spotlight-notes { display:grid; gap:10px; } .spotlight-notes span { padding:9px 11px; border:1px solid #475170; border-radius:9px; font-size:12px; }
.ranking-module { display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:stretch; } .rank-feature { min-height:322px; display:grid; grid-template-columns:47% 53%; overflow:hidden; border-radius:23px; background:#ece8ff; } .rank-feature img { height:100%; } .rank-feature div { padding:35px 30px; } .rank-feature p:not(.eyebrow) { color:#5e6179; } .rank-list { margin:0; padding:17px 25px; list-style:none; border:1px solid var(--line); border-radius:22px; background:#fff; } .rank-list li { display:grid; grid-template-columns:44px 1fr auto; align-items:center; min-height:70px; border-bottom:1px solid var(--line); } .rank-list li:last-child { border:0; } .rank-list b { color:var(--purple); font-size:18px; } .rank-list em { color:var(--muted); font-size:12px; font-style:normal; }
.genre-panel { padding:40px; border-radius:25px; background:linear-gradient(140deg,#fff2e7,#f3f0ff); } .genre-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:23px; } .genre-card { min-height:152px; padding:20px; border:1px solid rgba(116,94,181,.13); border-radius:15px; background:rgba(255,255,255,.8); } .genre-card:hover { background:#fff; } .genre-card span { color:var(--purple); font-size:25px; } .genre-card h3 { margin:5px 0; } .genre-card p { margin:0; color:var(--muted); font-size:13px; }
.schedule { padding:30px 35px; border:1px solid var(--line); background:#fff; border-radius:22px; } .schedule-heading { display:flex; justify-content:space-between; align-items:end; } .schedule-heading h2 { margin-bottom:0; } .schedule-days { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:24px; } .schedule-days div { padding:14px 12px; border-radius:13px; background:#f6f6fb; } .schedule-days b,.schedule-days span,.schedule-days em { display:block; } .schedule-days b { color:var(--purple); } .schedule-days span { min-height:46px; padding-top:5px; font-size:13px; font-weight:700; } .schedule-days em { color:var(--coral); font-size:11px; font-style:normal; }
.reader-quote { position:relative; padding:48px 100px; border-radius:24px; text-align:center; color:#fff; background:linear-gradient(115deg,#4b3c9c,#7860d0); } .quote-mark { position:absolute; top:2px; left:50px; margin:0; color:#a99bea; font-size:95px; line-height:1; } blockquote { position:relative; margin:0; font-size:21px; line-height:1.8; } .reader-quote > p:last-child { margin:18px 0 0; color:#ddd8ff; font-size:13px; }
.feature-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .feature-tiles article { padding:28px; background:#fff; border:1px solid var(--line); border-radius:19px; } .feature-tiles span { color:var(--coral); font-size:28px; } .feature-tiles h2 { margin:6px 0 8px; font-size:20px; } .feature-tiles p { color:var(--muted); margin:0; font-size:14px; }
.about-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:65px; padding:48px; border-radius:25px; background:#e5f0ff; } .about-panel h2 { margin-bottom:0; } .about-panel p { color:#475777; } .about-panel p:last-child { margin-bottom:0; }
.app-panel { display:flex; align-items:center; justify-content:space-between; gap:50px; padding:46px 85px; overflow:hidden; border-radius:25px; background:#ffe8d8; } .app-copy { max-width:600px; } .app-copy h2 { margin-bottom:10px; } .app-copy p:not(.eyebrow) { color:#666075; } .qr-card { min-width:178px; padding:15px; border-radius:17px; text-align:center; background:#fff; } .qr-card p { margin:10px 0 0; color:var(--muted); font-size:11px; } .qr-pattern { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; aspect-ratio:1; padding:11px; background:repeating-linear-gradient(90deg,#272748 0 9px,transparent 9px 15px),repeating-linear-gradient(#272748 0 7px,transparent 7px 15px); } .qr-pattern b { display:grid; place-items:center; grid-column:2/5; grid-row:2/5; background:#fff; color:var(--purple); font-size:28px; } .qr-pattern i { display:none; }
.inner-page,.reader-page { padding:43px 0 78px; } .breadcrumb { display:flex; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:13px; } .breadcrumb a { color:var(--purple); } .channel-hero { display:flex; gap:23px; align-items:center; margin:26px 0; padding:35px 43px; border-radius:22px; background:linear-gradient(135deg,#eeeaff,#fff1eb); } .channel-hero > span { display:grid; place-items:center; width:64px; height:64px; flex:none; border-radius:19px; color:#fff; background:var(--purple); font-size:30px; } .channel-hero h1 { margin:0 0 7px; font-size:34px; } .channel-hero p:last-child { margin:0; color:var(--muted); } .filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0; } .filter-bar button { padding:8px 15px; color:#575e78; border:1px solid var(--line); border-radius:20px; background:#fff; font:inherit; font-size:13px; } .filter-bar .selected { color:#fff; background:var(--purple); border-color:var(--purple); } .listing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:23px; } .listing-card { display:grid; grid-template-columns:170px 1fr; gap:20px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:18px; } .listing-card img { height:215px; border-radius:11px; } .listing-card div { padding:6px 4px 4px 0; } .listing-card div > p:first-child { color:var(--coral); font-size:12px; font-weight:700; } .listing-card h2 { margin:4px 0 9px; font-size:21px; } .listing-card div > p:nth-of-type(2) { color:var(--muted); font-size:13px; } .seo-copy { margin-top:55px; padding:32px 38px; border-left:5px solid var(--purple); background:#fff; } .seo-copy p { margin-bottom:0; color:var(--muted); }
.chapter { max-width:840px; margin:28px auto 0; } .chapter-header { padding:38px 30px 25px; text-align:center; } .chapter-header > p { color:var(--coral); font-weight:800; } .chapter-header h1 { font-size:36px; } .chapter-header div { display:flex; justify-content:center; gap:18px; color:var(--muted); font-size:13px; } .reading-note { display:flex; gap:13px; padding:17px 20px; border-radius:13px; color:#565d75; background:#edeafe; } .reading-note span { color:var(--purple); font-size:20px; } .reading-note p { margin:0; font-size:14px; } .comic-pages { display:grid; gap:27px; margin-top:29px; } .comic-pages figure { margin:0; padding:12px; border:1px solid var(--line); background:#fff; } .chapter-image { aspect-ratio:3/4; background:#eee; } figcaption { padding:8px 2px 0; color:var(--muted); text-align:center; font-size:12px; } .chapter-ending { margin-top:35px; padding:36px 20px; border-radius:19px; text-align:center; background:#fff0e8; } .chapter-ending span { color:var(--coral); font-size:25px; } .chapter-ending h2 { margin:2px 0 6px; font-size:23px; } .chapter-ending p { margin:0; color:var(--muted); font-size:14px; } .chapter-nav { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:20px; } .chapter-nav a { padding:12px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:14px; background:#fff; } .chapter-nav .return { color:#fff; border-color:var(--purple); background:var(--purple); }
.site-footer { margin-top:80px; color:#d9dcf2; background:#161c36; } .footer-grid { display:grid; grid-template-columns:1.6fr .75fr 1fr; gap:45px; padding:52px 0; } .footer-brand { display:block; color:#fff; font-size:22px; font-weight:800; } .footer-grid p { color:#aeb5d4; font-size:13px; } .footer-grid h2 { color:#fff; font-size:15px; } .footer-grid a:not(.footer-brand) { display:block; margin:8px 0; color:#c6cbea; font-size:13px; } .copyright { padding:16px 20px; border-top:1px solid #303754; color:#8992b6; text-align:center; font-size:12px; }
@media (max-width:900px) { .header-inner { gap:14px; } .menu-toggle { display:block; margin-left:auto; } .primary-nav { display:none; position:absolute; top:82px; left:0; right:0; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); } .primary-nav.is-open { display:block; } .primary-nav ul { display:grid; grid-template-columns:repeat(2,1fr); } .hero { grid-template-columns:1fr; padding:45px; } .hero-art { display:none; } .spotlight { grid-template-columns:220px 1fr; } .spotlight-notes { grid-column:1/-1; grid-template-columns:repeat(3,1fr); } .ranking-module { grid-template-columns:1fr; } .app-panel { padding:38px; } .listing-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .site-shell { width:min(100% - 28px,1200px); } .header-inner { min-height:70px; } .primary-nav { top:70px; } .brand { font-size:17px; } .brand-mark { width:33px; height:33px; } .hero { min-height:auto; margin-top:26px; padding:35px 25px; border-radius:21px; } h1 { font-size:32px; } h2 { font-size:23px; } .hero-stats { gap:13px; } .quick-strip { grid-template-columns:repeat(2,1fr); } .quick-strip a { padding:13px 11px; font-size:12px; } .quick-strip a:nth-child(2) { border-right:0; } .quick-strip a:nth-child(-n+2) { border-bottom:1px solid var(--line); } .content-section,.genre-panel,.schedule,.ranking-module,.reader-quote,.feature-tiles,.about-panel,.app-panel,.spotlight { margin-top:52px; } .cover-grid,.wide-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .comic-meta { padding:12px; } .comic-meta h3 { font-size:16px; } .comic-meta p { display:none; } .spotlight { grid-template-columns:1fr; gap:21px; padding:19px; } .spotlight-image img { aspect-ratio:16/9; } .spotlight-notes { grid-template-columns:1fr 1fr; } .rank-feature { grid-template-columns:1fr; } .rank-feature img { height:auto; aspect-ratio:16/9; } .rank-feature div { padding:25px; } .genre-panel { padding:25px 18px; } .genre-grid { grid-template-columns:1fr 1fr; gap:10px; } .genre-card { min-height:132px; padding:15px; } .schedule { padding:25px 18px; } .schedule-days { grid-template-columns:repeat(3,1fr); } .reader-quote { padding:40px 24px; } .quote-mark { left:16px; } blockquote { font-size:17px; } .feature-tiles,.about-panel { grid-template-columns:1fr; gap:20px; } .about-panel { padding:30px 25px; } .app-panel { display:block; padding:32px 25px; } .qr-card { width:160px; margin-top:25px; } .channel-hero { align-items:flex-start; padding:25px; } .channel-hero h1 { font-size:27px; } .listing-card { grid-template-columns:120px 1fr; gap:13px; } .listing-card img { height:174px; } .listing-card h2 { font-size:18px; } .listing-card div > p:nth-of-type(2) { display:none; } .chapter-header { padding:30px 4px 19px; } .chapter-header h1 { font-size:29px; } .chapter-header div { flex-direction:column; gap:2px; } .chapter-nav { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; gap:20px; padding:37px 0; } }