:root { --banana: #ffd84d; --ink: #172033; --muted: #667085; --cream: #fffaf0; --line: #e9e5dc; --orange: #ff9d45; --shadow: 0 14px 36px rgba(30, 37, 52, .09); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #fffdf9; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.7; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; } .container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; } .site-header { background: rgba(255,253,249,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); } .nav-wrap { min-height: 82px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 22px; white-space: nowrap; } .brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--banana); border-radius: 12px; } .main-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; } .nav-link { display: flex; gap: 5px; padding: 8px 9px; border-radius: 9px; font-size: 13px; white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--ink); background: var(--banana); font-weight: 800; } .search-button { display: flex; gap: 5px; align-items: center; padding: 9px 13px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 13px; white-space: nowrap; } .hero { padding: 76px 0 44px; } .hero-grid { min-height: 390px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 74px; align-items: center; } .eyebrow { color: #be7b09; font-size: 12px; letter-spacing: .14em; font-weight: 800; } h1,h2,h3,p { margin-top: 0; } h1 { font-size: clamp(42px, 7vw, 76px); line-height: 1.08; margin: 10px 0 22px; letter-spacing: -.06em; } h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.25; letter-spacing: -.035em; margin-bottom: 15px; } h3 { line-height: 1.35; } .hero-copy > p:not(.eyebrow) { color: var(--muted); max-width: 560px; font-size: 18px; } .hero-poster { height: 390px; overflow: hidden; position: relative; border-radius: 28px; box-shadow: var(--shadow); } .hero-poster img { height: 100%; object-fit: cover; } .hero-poster span { position: absolute; bottom: 18px; left: 18px; background: rgba(23,32,51,.88); color: #fff; padding: 8px 13px; border-radius: 8px; font-size: 13px; } .hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; } .button { display: inline-block; padding: 12px 20px; background: var(--banana); border-radius: 10px; font-weight: 800; transition: transform .2s; } .button:hover { transform: translateY(-2px); } .button.dark { background: var(--ink); color: #fff; } .text-link { color: #a25f00; font-weight: 800; } .quick-strip { padding: 20px 0; } .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .quick-grid a { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-right: 1px solid var(--line); } .quick-grid a:last-child { border: 0; } .quick-grid b { font-size: 25px; color: #cc8a00; } small { color: var(--muted); } .section { padding: 58px 0; } .section.soft { background: var(--cream); } .section.peach { background: #fff3e3; } .section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; } .section-title h2 { margin: 5px 0 0; } .card-grid { display: grid; gap: 22px; } .card-grid.four { grid-template-columns: repeat(4, 1fr); } .comic-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 5px 16px rgba(30,37,52,.04); } .cover { display:block; aspect-ratio: 3 / 4; overflow: hidden; } .cover img { height:100%; object-fit:cover; transition: transform .3s; } .comic-card:hover .cover img { transform: scale(1.05); } .comic-info { padding: 14px; } .tag { display:inline-block; padding: 2px 9px; border-radius: 999px; background: #fff0bd; color:#9c6300; font-size: 12px; font-weight:800; } .comic-info h3 { margin: 8px 0 6px; font-size:18px; } .comic-info p { color: var(--muted); font-size:13px; min-height:45px; margin-bottom:6px; } .feature-story { display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; } .feature-story img { height:300px; object-fit:cover; border-radius:20px; } .feature-story p { color:var(--muted); } .category-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; } .category-card { padding:22px; border:1px solid var(--line); background:#fff; border-radius:14px; transition:.2s; } .category-card:hover { border-color:var(--banana); transform:translateY(-3px); } .category-card b { color:#bd7b00; font-size:25px; } .category-card h3 { margin:6px 0; } .category-card p { color:var(--muted); font-size:13px; margin:0; } .rank-list { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; } .rank-list a { display:grid; grid-template-columns:auto 56px 1fr; gap:10px; align-items:center; background:#fffdf9; padding:12px; border-radius:12px; } .rank-list b { color:#e2791a; font-size:21px; } .rank-list img { height:76px; object-fit:cover; border-radius:7px; } .rank-list span { display:block; min-width:0; } .rank-list strong,.rank-list small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .rank-list em { grid-column:2 / 4; font-style:normal; font-size:11px; color:#b66e00; } .wide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .wide-grid article { position:relative; min-height:300px; overflow:hidden; border-radius:18px; color:#fff; background:var(--ink); } .wide-grid img { width:100%; height:100%; object-fit:cover; position:absolute; opacity:.58; } .wide-grid article div { position:relative; z-index:1; padding:25px; min-height:300px; display:flex; flex-direction:column; justify-content:end; background:linear-gradient(transparent,rgba(10,16,28,.88)); } .wide-grid p { font-size:13px; color:#f1f1f1; } .dark-section { background:var(--ink); color:#fff; } .mood-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .dark-section .eyebrow { color:var(--banana); } .dark-section p { color:#c9d0dd; } .mood-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .mood-links a { display:flex; align-items:center; justify-content:space-between; padding:17px; border:1px solid #44506a; border-radius:12px; } .mood-links b { color:var(--banana); font-size:22px; } .quote-section { text-align:center; background:var(--cream); } .quote-section span { font-size:60px; color:var(--orange); line-height:1; } blockquote { font-size:clamp(20px,3vw,32px); max-width:780px; margin:0 auto 15px; font-weight:800; } .quote-section p { color:var(--muted); } .about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; } .about p { color:var(--muted); } .about-points { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:center; } .about-points div { padding:17px; background:#fff5cc; border-radius:12px; display:flex; gap:10px; font-size:24px; } .about-points b,.about-points small { display:block; font-size:14px; } .app-panel { background:var(--banana); padding:48px 0; } .app-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; } .app-inner h2 { margin-top:5px; } .app-inner p { max-width:650px; } .qr-card { width:150px; height:150px; background:#fffdf9; border:7px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:14px; text-align:center; } .qr-card span { font-size:38px; } .qr-card small { font-size:10px; } .site-footer { background:var(--ink); color:#e6eaf2; padding:22px 0; } .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; } .footer-inner p { margin:0; } .footer-inner div { display:flex; gap:17px; } .inner-page { padding:34px 0 20px; } .breadcrumb { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:26px; flex-wrap:wrap; } .breadcrumb a { color:#a56200; } .channel-hero { padding:44px; border-radius:22px; color:#fff; background:linear-gradient(120deg,#172033,#435270); margin-bottom:34px; } .channel-hero h1 { font-size:48px; margin:8px 0; } .channel-hero .eyebrow { color:var(--banana); } .channel-hero p { margin:0; color:#e2e8f0; } .no-top { padding-top:0; } .filter-bar { display:flex; gap:16px; padding:12px 0 25px; border-bottom:1px solid var(--line); margin-bottom:25px; flex-wrap:wrap; } .filter-bar span { font-weight:800; margin-right:auto; } .filter-bar a { color:var(--muted); font-size:14px; } .seo-copy { margin:50px 0; padding:30px; border-left:4px solid var(--banana); background:var(--cream); } .seo-copy h2 { font-size:25px; } .seo-copy p { color:var(--muted); margin:0; } .reader-page { padding:34px 0 0; } .reader-container { width:min(850px,calc(100% - 40px)); margin:0 auto; } .reader-head { text-align:center; padding:30px 0 18px; border-bottom:1px solid var(--line); } .reader-head h1 { font-size:38px; letter-spacing:-.04em; } .reader-head > div { display:flex; justify-content:center; gap:18px; color:var(--muted); font-size:13px; flex-wrap:wrap; } .reader-head p { margin:20px auto 0; color:var(--muted); font-size:14px; max-width:650px; } .chapter-images { padding:34px 0; } figure { margin:0 0 28px; } figure img { border-radius:12px; aspect-ratio:3 / 4; object-fit:cover; background:#f2eee5; } figcaption { text-align:center; color:var(--muted); padding:9px; font-size:13px; } .chapter-end { padding:38px 20px; text-align:center; background:var(--cream); border-radius:18px; margin-bottom:24px; } .chapter-end > span { color:#b87400; font-size:25px; } .chapter-end h2 { font-size:26px; margin:5px; } .chapter-end p { color:var(--muted); } .chapter-nav { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding-bottom:54px; } .chapter-nav a,.chapter-nav span { padding:12px; text-align:center; border:1px solid var(--line); border-radius:9px; font-size:14px; } .chapter-nav a:hover { background:var(--banana); } @media (max-width: 900px) { .nav-wrap { flex-wrap:wrap; padding:12px 0; } .main-nav { order:3; flex-basis:100%; overflow-x:auto; justify-content:flex-start; padding-bottom:2px; } .hero { padding-top:48px; } .hero-grid,.feature-story,.mood-grid,.about-grid { grid-template-columns:1fr; gap:30px; } .hero-poster { height:330px; } .card-grid.four { grid-template-columns:repeat(2,1fr); } .category-grid { grid-template-columns:repeat(2,1fr); } .rank-list { grid-template-columns:repeat(2,1fr); } .wide-grid { grid-template-columns:1fr; } } @media (max-width: 560px) { .container { width:min(100% - 28px,1200px); } .search-button { margin-left:auto; } .nav-link { font-size:12px; } .hero-actions { align-items:flex-start; flex-direction:column; gap:14px; } .quick-grid { grid-template-columns:1fr 1fr; } .quick-grid a { border-bottom:1px solid var(--line); } .quick-grid a:nth-child(2) { border-right:0; } .quick-grid a:nth-child(3),.quick-grid a:nth-child(4) { border-bottom:0; } .section { padding:42px 0; } .section-title { align-items:start; gap:15px; } .section-title .text-link { font-size:13px; white-space:nowrap; } .card-grid.four { gap:13px; } .comic-info { padding:11px; } .comic-info h3 { font-size:15px; } .comic-info p { font-size:12px; min-height:58px; } .rank-list { grid-template-columns:1fr; } .mood-links { grid-template-columns:1fr; } .app-inner,.footer-inner { align-items:flex-start; flex-direction:column; } .qr-card { width:120px; height:120px; } .channel-hero { padding:28px; } .channel-hero h1 { font-size:38px; } .reader-head h1 { font-size:30px; } .chapter-nav { grid-template-columns:1fr; } }