:root { --ink:#24232a; --muted:#787681; --line:#e8e5e2; --paper:#fbfaf8; --accent:#f27c68; --soft:#f5eee8; --dark:#2e2a35; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Microsoft YaHei",sans-serif; line-height:1.7; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .wrap { width:min(1200px,calc(100% - 48px)); margin-left:auto; margin-right:auto; } .site-header { background:rgba(251,250,248,.95); border-bottom:1px solid var(--line); position:relative; z-index:2; } .header-inner { width:min(1200px,calc(100% - 48px)); height:82px; margin:auto; display:flex; align-items:center; gap:36px; } .brand { display:flex; align-items:center; gap:10px; min-width:210px; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:var(--dark); border-radius:50% 50% 45% 50%; font-weight:bold; font-size:18px; transform:rotate(-8deg); } .brand strong { display:block; font-size:17px; letter-spacing:1px; } .brand small { display:block; color:#aaa5a4; font-size:8px; letter-spacing:1.4px; } .main-nav { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; } .main-nav a { display:flex; align-items:center; gap:6px; padding:10px 11px; color:var(--muted); font-size:13px; border-radius:20px; white-space:nowrap; } .main-nav a:hover,.main-nav a.active { color:var(--ink); background:#f0ebe7; } .nav-icon { font-size:16px; color:var(--accent); } .header-search { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:22px; } .hero { margin-top:44px; min-height:388px; padding:62px 76px; display:flex; align-items:center; justify-content:space-between; background:#f3e8df; overflow:hidden; } .hero-copy { max-width:580px; } .hero-kicker,.section-kicker { display:block; color:#b28b7e; font-size:10px; font-weight:bold; letter-spacing:2px; } h1,h2,h3,p { margin-top:0; } .hero h1 { margin:15px 0 10px; font-size:64px; line-height:1.05; letter-spacing:-3px; } .hero h1 a:hover { color:var(--accent); } .hero p { max-width:470px; color:#71696a; font-size:15px; } .hero-actions { display:flex; align-items:center; gap:25px; margin-top:27px; } .button { display:inline-flex; align-items:center; gap:28px; padding:12px 18px; border:0; border-radius:2px; font-size:13px; cursor:pointer; } .button-dark { color:#fff; background:var(--dark); } .button-light { color:var(--dark); background:#fff; } .text-link { font-size:12px; font-weight:bold; } .text-link span { color:var(--accent); margin-left:8px; } .hero-art { position:relative; width:310px; height:270px; } .hero-character { position:absolute; inset:20px 35px; display:grid; place-items:center; color:#f8d9ca; background:#d27e6c; border-radius:47% 53% 42% 58%; font-size:110px; font-weight:bold; transform:rotate(10deg); box-shadow:20px 25px 0 #e8baa8; } .hero-note,.hero-caption { position:absolute; z-index:1; font-size:11px; letter-spacing:2px; line-height:1.2; } .hero-note { right:5px; top:8px; color:#85706b; transform:rotate(8deg); } .hero-note strong { color:var(--accent); font-size:18px; } .hero-caption { bottom:15px; left:0; color:#9e8279; } .hero-caption strong { color:var(--dark); font-size:36px; } .orbit { position:absolute; border:1px solid #d9b7a9; border-radius:50%; transform:rotate(-25deg); } .orbit-one { inset:4px -5px 14px 28px; } .orbit-two { inset:27px 19px 1px 0; } .section { margin-top:92px; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; } .section h2 { margin:8px 0 0; font-size:29px; line-height:1.2; letter-spacing:-1px; } .heading-note { color:#aaa3a2; font-size:11px; text-align:right; line-height:1.5; } .category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .category-card { min-height:124px; padding:22px; display:flex; align-items:center; gap:16px; border-radius:3px; transition:transform .2s; } .category-card:hover { transform:translateY(-4px); } .category-card.mint { background:#dceee9; }.category-card.coral { background:#f8ddd4; }.category-card.rose { background:#f4e0e9; }.category-card.gold { background:#f5e9be; }.category-card.violet { background:#e6dff1; }.category-card.blue { background:#dae8ef; } .category-icon { font-size:31px; } .category-card strong { display:block; font-size:16px; } .category-card small { display:block; color:#777376; font-size:11px; line-height:1.5; margin-top:3px; } .category-card b { margin-left:auto; font-size:20px; font-weight:normal; } .comic-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .comic-card { min-width:0; } .cover { display:block; position:relative; overflow:hidden; aspect-ratio:4/5; background:#eee; } .cover img { width:100%; height:100%; object-fit:cover; transition:transform .3s; } .cover:hover img { transform:scale(1.04); } .cover-tag { position:absolute; left:9px; bottom:9px; padding:2px 7px; color:#fff; background:rgba(37,34,40,.78); font-size:10px; } .card-body { padding-top:12px; } .eyebrow { color:#aaa4a1; font-size:9px; letter-spacing:.5px; text-transform:uppercase; } .card-body h3 { margin:4px 0 4px; font-size:16px; line-height:1.3; } .card-body h3 a:hover { color:var(--accent); } .card-body p { height:44px; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.6; } .card-meta { display:flex; justify-content:space-between; color:#aaa4a1; font-size:10px; border-top:1px solid var(--line); padding-top:8px; } .feature-band { margin-top:95px; min-height:310px; padding:55px 75px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:#34313b; overflow:hidden; } .feature-band h2 { margin:12px 0; font-size:39px; line-height:1.2; } .feature-band em { color:#f5b3a2; font-style:normal; } .feature-band p { max-width:470px; color:#c4bec5; font-size:13px; } .feature-stamp { width:130px; height:130px; display:grid; place-content:center; border:1px solid #827a86; border-radius:50%; color:#c5bec5; font-size:11px; line-height:1.2; letter-spacing:2px; text-align:center; transform:rotate(-12deg); } .feature-stamp strong { color:#f5b3a2; font-size:45px; } .ranking-panel { border-top:1px solid var(--line); } .ranking-panel ol { margin:0; padding:0; list-style:none; } .ranking-panel li { display:grid; grid-template-columns:50px 1fr 60px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); } .ranking-panel li span { color:var(--accent); font-size:13px; font-weight:bold; }.ranking-panel li a { font-size:15px; }.ranking-panel li a:hover { color:var(--accent); }.ranking-panel li b { color:#aaa4a1; font-size:11px; text-align:right; }.rank-more { display:block; padding-top:18px; color:var(--accent); font-size:12px; text-align:right; }.about { display:grid; grid-template-columns:180px 1fr; gap:55px; padding:52px 75px; background:#f2ede8; }.about-icon { width:112px; height:112px; display:grid; place-items:center; color:#f2c4b5; background:#d97f6c; border-radius:50%; font-size:52px; font-weight:bold; }.about h2 { font-size:35px; line-height:1.25; }.about p { max-width:720px; color:#726b6b; font-size:13px; }.about-points { display:flex; gap:28px; color:#9a7870; font-size:11px; }.newsletter { display:grid; grid-template-columns:1fr auto 100px; align-items:center; gap:35px; padding:42px 0 76px; border-bottom:1px solid var(--line); }.newsletter h2 { font-size:24px; }.newsletter p { color:var(--muted); font-size:12px; margin:0; }.subscribe-form { display:flex; }.subscribe-form input { width:235px; height:44px; padding:0 14px; border:1px solid var(--line); background:#fff; outline:none; }.subscribe-form .button { height:44px; }.qr-mark { width:84px; height:84px; display:grid; place-content:center; border:1px dashed #d0b2a5; color:var(--accent); font-size:9px; text-align:center; line-height:1.2; }.qr-mark strong { font-size:27px; }.site-footer { padding:32px 0 42px; }.footer-inner { width:min(1200px,calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; }.footer-brand { font-size:16px; font-weight:bold; }.site-footer p { color:#aaa4a1; font-size:11px; margin:3px 0 0; }.footer-links { display:flex; justify-content:center; gap:22px; font-size:11px; color:#777376; }.copyright { text-align:right; }.page-intro { margin-top:52px; padding:20px 0 25px; border-bottom:1px solid var(--line); }.breadcrumbs { display:flex; gap:12px; align-items:center; margin-bottom:35px; color:#aaa4a1; font-size:11px; }.breadcrumbs a:hover { color:var(--accent); }.page-intro h1 { margin:11px 0; font-size:48px; }.page-intro p { color:var(--muted); font-size:13px; }.listing-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.listing-toolbar h2 { font-size:23px; }.listing-toolbar span { color:#aaa4a1; font-size:11px; }.reader { max-width:860px; margin-top:48px; }.reader-header { padding-bottom:30px; border-bottom:1px solid var(--line); }.reader-header h1 { margin:12px 0; font-size:42px; line-height:1.25; }.reader-info { color:#9a9494; font-size:12px; }.reading-notice { display:flex; gap:15px; align-items:center; margin:28px 0; padding:18px 22px; background:#f2ede8; }.reading-notice span { color:var(--accent); font-size:25px; }.reading-notice p { margin:0; color:#807878; font-size:12px; line-height:1.7; }.reading-notice strong { color:var(--ink); }.reader-content { max-width:700px; margin:0 auto; background:#e9e5e3; }.reader-page { margin:0; }.reader-page img { width:100%; aspect-ratio:3/4; object-fit:cover; }.reader-page figcaption { padding:9px; color:#898282; background:#f2efed; font-size:10px; text-align:center; }.chapter-end { padding:50px 0 25px; text-align:center; }.chapter-end > span { color:var(--accent); font-size:22px; }.chapter-end h2 { margin:10px 0; font-size:22px; }.chapter-end p { color:#948d8d; font-size:12px; }.chapter-nav { display:flex; justify-content:space-between; padding:22px 0 80px; border-top:1px solid var(--line); }.chapter-button { min-width:130px; padding:10px 15px; border:1px solid var(--line); font-size:12px; text-align:center; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:900px) { .header-inner { gap:15px; }.brand { min-width:auto; }.main-nav { justify-content:flex-end; overflow:auto; }.main-nav a { padding:8px; }.main-nav a span:last-child { display:none; }.hero { padding:45px; }.comic-grid { grid-template-columns:repeat(3,1fr); row-gap:35px; }.newsletter { grid-template-columns:1fr auto; }.qr-mark { display:none; }.footer-inner { grid-template-columns:1fr 1fr; gap:20px; }.copyright { grid-column:1/-1; text-align:left; } }
@media (max-width:600px) { .wrap,.header-inner,.footer-inner { width:min(100% - 28px,1200px); }.site-header { position:sticky; top:0; }.header-inner { height:66px; }.brand strong { font-size:14px; }.brand small { display:none; }.main-nav { gap:0; }.main-nav a { padding:7px; }.header-search { width:32px; height:32px; }.hero { margin-top:22px; min-height:430px; padding:30px 24px; display:block; }.hero h1 { font-size:48px; }.hero-art { width:235px; height:190px; margin:25px auto 0; }.hero-character { inset:10px 35px; font-size:75px; }.section { margin-top:65px; }.section-heading { align-items:start; gap:14px; }.section h2 { font-size:24px; }.category-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.category-card { min-height:130px; padding:15px; display:block; }.category-icon { display:block; margin-bottom:8px; }.category-card b { display:none; }.comic-grid { grid-template-columns:repeat(2,1fr); gap:18px 12px; }.feature-band { margin-top:65px; padding:40px 25px; min-height:340px; }.feature-band h2 { font-size:30px; }.feature-stamp { width:85px; height:85px; flex-shrink:0; }.feature-stamp strong { font-size:28px; }.about { display:block; padding:35px 25px; }.about-icon { width:75px; height:75px; font-size:32px; margin-bottom:25px; }.about h2 { font-size:28px; }.about-points { display:grid; gap:8px; }.newsletter { display:block; padding:38px 0 55px; }.subscribe-form { margin-top:22px; }.subscribe-form input { min-width:0; width:100%; }.page-intro { margin-top:30px; }.page-intro h1 { font-size:38px; }.reader { margin-top:30px; }.reader-header h1 { font-size:30px; }.chapter-nav { padding-bottom:55px; }.footer-links { justify-content:flex-start; margin-top:15px; }.footer-inner { display:block; } }