:root { --ink:#e9edf7; --muted:#9aa5bd; --bg:#0c1222; --panel:#121a2d; --panel2:#17213a; --line:#27324c; --accent:#ffc34d; --accent2:#ff7b52; --blue:#82a9ff; --max:1200px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.7; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; } button { font:inherit; } .skip-link { position:absolute; left:-999px; top:10px; } .skip-link:focus { left:16px; z-index:10; background:var(--accent); color:#111827; padding:8px 12px; }
.site-header { padding:20px 24px 0; } .header-inner { max-width:var(--max); margin:auto; min-height:72px; display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; font-size:19px; letter-spacing:.04em; white-space:nowrap; } .brand strong { color:var(--accent); font-size:23px; } .brand em { font-style:normal; color:var(--ink); } .brand-mark { position:relative; width:34px; height:34px; border:1px solid var(--accent); border-radius:9px; display:grid; place-items:center; color:var(--accent); } .brand-mark span { position:absolute; left:6px; right:6px; height:1px; background:var(--accent); top:9px; box-shadow:0 7px var(--accent), 0 14px var(--accent); opacity:.6; } .brand-mark b { font-size:11px; position:relative; z-index:1; } .site-nav { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; } .nav-link { display:flex; align-items:center; gap:6px; padding:9px 10px; color:var(--muted); border-radius:8px; font-size:14px; } .nav-link span { color:var(--blue); } .nav-link:hover,.nav-link:focus-visible,.nav-link.is-active { color:var(--ink); background:#1a2541; outline:none; } .nav-link.is-active { box-shadow:inset 0 -2px var(--accent); } .search-hint { border:1px solid var(--line); background:transparent; color:var(--muted); padding:8px 12px; border-radius:20px; display:flex; gap:8px; cursor:pointer; } .search-hint:hover,.search-hint:focus-visible,.button:focus-visible,button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; } .menu-toggle { display:none; background:none; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
.content-wrap { max-width:var(--max); margin:auto; padding:18px 24px 90px; } .breadcrumb { color:var(--muted); font-size:13px; display:flex; gap:10px; margin:4px 0 24px; } .breadcrumb a:hover { color:var(--accent); } .hero { min-height:500px; padding:72px 0 66px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:66px; } .eyebrow,.section-kicker { color:var(--accent); font-size:12px; letter-spacing:.18em; margin:0 0 16px; font-weight:700; } .eyebrow { display:flex; align-items:center; gap:10px; } .eyebrow-line { width:42px; height:1px; background:var(--accent); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(42px,6vw,78px); letter-spacing:-.05em; line-height:1.1; margin-bottom:20px; } h1 a:hover { color:var(--accent); } h2 { font-size:clamp(28px,4vw,42px); line-height:1.2; letter-spacing:-.04em; margin-bottom:10px; } h3 { line-height:1.35; } .hero-lead { color:var(--ink); font-size:23px; margin-bottom:10px; } .hero-text { color:var(--muted); max-width:510px; } .hero-actions { display:flex; gap:24px; align-items:center; margin-top:30px; } .button { display:inline-flex; align-items:center; gap:18px; padding:12px 17px; border-radius:7px; border:1px solid var(--line); font-weight:700; cursor:pointer; } .button-primary { background:var(--accent); color:#121827; border-color:var(--accent); } .button-primary:hover { background:#ffd36f; } .button-outline:hover { border-color:var(--accent); color:var(--accent); } .text-link,.arrow-link { color:var(--accent); font-weight:700; } .hero-screen { position:relative; } .screen-frame { position:relative; background:#060a13; border:1px solid #34415e; padding:14px; border-radius:10px; transform:rotate(2deg); box-shadow:0 22px 60px #050914; } .screen-image { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:#1b2945; } .screen-image img { width:100%; height:100%; object-fit:cover; opacity:.72; } .screen-caption { position:absolute; left:16px; top:14px; font-size:12px; color:white; } .screen-play { position:absolute; inset:0; display:grid; place-items:center; font-size:38px; color:var(--accent); text-shadow:0 3px 18px #000; } .timeline { margin:10px 0 6px; height:3px; background:#3a465d; } .timeline span { display:block; width:34%; height:100%; background:var(--accent); } .screen-controls { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; } .screen-controls i { flex:1; } .screen-controls b { color:var(--accent); font-size:16px; } .film-strip { position:absolute; right:-35px; top:20px; width:18px; display:grid; gap:10px; } .film-strip span { height:35px; border:1px solid #3c4968; border-radius:2px; } .screen-glow { position:absolute; inset:10%; background:#2a4790; filter:blur(65px); opacity:.3; }
.feature-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:88px; } .feature-strip div { padding:24px 18px; border-right:1px solid var(--line); } .feature-strip div:last-child { border:0; } .feature-strip span { display:block; color:var(--accent); font-size:12px; margin-bottom:10px; } .feature-strip strong,.feature-strip small { display:block; } .feature-strip small,.card-copy p,.short-card small,.category-card small,.rank-row small,.calendar-row small { color:var(--muted); font-size:13px; } .section-block,.shorts-section,.ranking-calendar,.guide-section,.about-faq,.subscribe-section,.split-feature { margin-bottom:90px; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:25px; } .section-head p:last-child { color:var(--muted); margin-bottom:0; } .media-grid { display:grid; gap:18px; } .media-grid.four { grid-template-columns:repeat(4,1fr); } .media-grid.five { grid-template-columns:repeat(5,1fr); } .poster { position:relative; aspect-ratio:2/3; overflow:hidden; background:#202b48; border-radius:6px; } .poster img { width:100%; height:100%; object-fit:cover; transition:transform .35s; } .media-card:hover .poster img { transform:scale(1.04); } .poster-tag { position:absolute; left:10px; top:10px; background:#10172aee; border:1px solid #ffffff35; padding:3px 7px; border-radius:3px; font-size:11px; } .play-dot { position:absolute; right:11px; bottom:11px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#101827; font-size:12px; } .card-copy h3 { font-size:16px; margin:13px 0 3px; } .card-copy p { margin:0; } .split-feature { padding:46px; background:linear-gradient(120deg,#17233d,#111929); border:1px solid var(--line); border-radius:12px; display:grid; grid-template-columns:.75fr 1.25fr; gap:44px; align-items:center; } .feature-copy p:not(.section-kicker) { color:var(--muted); } .movie-grid { grid-template-columns:repeat(3,1fr); } .featured-card { grid-row:span 1; } .dark-panel { background:#10192c; padding:45px; margin-left:-24px; margin-right:-24px; padding-left:max(24px,calc((100% - 1152px)/2)); padding-right:max(24px,calc((100% - 1152px)/2)); } .shorts-section { background:#e7edf7; color:#101827; margin-left:-24px; margin-right:-24px; padding:55px max(24px,calc((100% - 1152px)/2)); } .shorts-section .section-kicker { color:#bd6f10; } .shorts-section .section-head p:last-child { color:#647087; } .short-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#c7d0e1; border:1px solid #c7d0e1; } .short-card { min-height:150px; padding:22px; background:#e7edf7; display:flex; gap:15px; align-items:flex-start; } .short-card:hover { background:white; } .short-number { color:#bd6f10; font-size:14px; } .short-card strong,.short-card small { display:block; } .short-card b { margin-left:auto; color:#bd6f10; } .category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .category-card { display:flex; align-items:flex-start; gap:14px; border:1px solid var(--line); padding:18px; border-radius:7px; } .category-card:hover { border-color:var(--accent); background:#111a30; } .category-icon { color:var(--accent); font-size:20px; width:25px; } .category-card strong,.category-card small { display:block; } .category-card b { margin-left:auto; color:var(--accent); } .ranking-calendar { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .ranking-box,.calendar-box { background:var(--panel); padding:32px; border:1px solid var(--line); border-radius:9px; } .rank-row,.calendar-row { display:flex; align-items:center; gap:17px; border-top:1px solid var(--line); padding:14px 0; } .rank-no { color:var(--accent); font-size:22px; width:32px; } .rank-row strong,.rank-row small,.calendar-row strong,.calendar-row small { display:block; } .rank-row b { margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; } .calendar-row time { color:var(--accent); font-variant-numeric:tabular-nums; width:43px; } .calendar-row a { margin-left:auto; color:var(--accent); font-size:13px; } .guide-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; border-top:1px solid var(--line); padding-top:50px; } .guide-section>div:first-child p:last-child,.about-box>p:not(.section-kicker),.subscribe-section p:not(.section-kicker) { color:var(--muted); } .guide-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .guide-steps div { border-left:1px solid var(--line); padding-left:18px; } .guide-steps span { color:var(--accent); } .guide-steps strong { display:block; margin:26px 0 7px; } .guide-steps p { color:var(--muted); font-size:14px; } .about-faq { display:grid; grid-template-columns:1fr 1fr; gap:30px; } .about-box,.faq-box { padding:34px; background:var(--panel); border:1px solid var(--line); border-radius:9px; } .faq-box details { border-top:1px solid var(--line); padding:14px 0; } summary { cursor:pointer; font-weight:700; } .faq-box details p { color:var(--muted); margin:12px 0 0; } .subscribe-section { display:flex; align-items:center; justify-content:space-between; padding:34px; border:1px solid #67572f; background:linear-gradient(110deg,#2b2630,#17213a); border-radius:10px; } .subscribe-action { display:flex; align-items:center; gap:24px; } .qr-mark { width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--accent); color:var(--accent); font-size:38px; }
.listing-hero { padding:55px 0 45px; border-bottom:1px solid var(--line); margin-bottom:50px; } .listing-hero h1 { font-size:54px; margin-bottom:10px; } .listing-hero>p:last-child { color:var(--muted); max-width:620px; } .listing-section { min-height:500px; } .detail-page { padding-bottom:30px; } .detail-top { display:grid; grid-template-columns:240px 1fr; gap:45px; padding:45px 0 70px; } .detail-poster img { aspect-ratio:2/3; object-fit:cover; border-radius:7px; } .detail-copy { padding-top:15px; } .detail-copy h1 { font-size:clamp(36px,5vw,64px); } .detail-meta { display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:13px; margin-bottom:24px; } .detail-meta span { padding:4px 9px; border:1px solid var(--line); border-radius:3px; } .detail-description { color:var(--ink); max-width:700px; font-size:18px; } .watch-note,.player-caption { color:var(--muted); font-size:14px; } .favorite-button { margin-top:20px; background:transparent; color:var(--ink); } .favorite-button.is-saved { color:var(--accent); border-color:var(--accent); } .player-section { border-top:1px solid var(--line); padding-top:35px; } .player-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; } .player-heading h2 { font-size:26px; } .player-status { color:var(--accent); font-size:13px; } .video-wrap { background:#050914; border:1px solid var(--line); padding:10px; border-radius:8px; } video { display:block; width:100%; max-height:640px; aspect-ratio:16/9; background:#050914; } .detail-footer { display:flex; justify-content:space-between; align-items:center; padding-top:30px; } .episode-nav { display:flex; gap:18px; color:var(--muted); } .episode-nav a:hover { color:var(--accent); } .site-footer { background:#080d19; border-top:1px solid var(--line); padding:42px 24px 20px; } .footer-inner { max-width:var(--max); margin:auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; } .footer-brand { margin-bottom:14px; } .footer-inner p { color:var(--muted); max-width:320px; } .footer-links { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:14px; } .footer-links span { color:var(--accent); font-size:12px; letter-spacing:.1em; margin-bottom:5px; } .footer-links a:hover { color:var(--ink); } .footer-bottom { max-width:var(--max); margin:35px auto 0; padding-top:15px; border-top:1px solid var(--line); color:#66728c; font-size:12px; }
@media (max-width: 900px) { .site-header { padding:12px 16px 0; } .header-inner { gap:12px; } .site-nav { gap:0; } .nav-link { padding:8px 6px; font-size:12px; } .search-hint span:last-child { display:none; } .content-wrap { padding-left:16px; padding-right:16px; } .hero { gap:32px; padding-top:50px; } .media-grid.four { grid-template-columns:repeat(2,1fr); } .media-grid.five { grid-template-columns:repeat(3,1fr); } .short-list { grid-template-columns:repeat(2,1fr); } .dark-panel,.shorts-section { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; } }
@media (max-width: 640px) { body { font-size:16px; } .header-inner { flex-wrap:wrap; padding-bottom:12px; } .brand { flex:1; } .menu-toggle { display:block; order:2; } .search-hint { order:3; } .site-nav { display:none; order:4; width:100%; flex-direction:column; align-items:stretch; padding-top:10px; } .site-nav.is-open { display:flex; } .nav-link { padding:11px 8px; font-size:15px; } .hero { grid-template-columns:1fr; padding:44px 0 55px; min-height:0; } .hero-screen { max-width:92%; margin:0 auto; } h1 { font-size:48px; } .feature-strip { grid-template-columns:repeat(2,1fr); margin-bottom:55px; } .feature-strip div:nth-child(2) { border-right:0; } .feature-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); } .section-block,.shorts-section,.ranking-calendar,.guide-section,.about-faq,.subscribe-section,.split-feature { margin-bottom:60px; } .section-head { align-items:start; flex-direction:column; } .media-grid.four,.media-grid.five,.movie-grid { grid-template-columns:repeat(2,1fr); gap:14px; } .split-feature { grid-template-columns:1fr; padding:25px; } .dark-panel { padding-top:32px; padding-bottom:32px; } .shorts-section { padding-top:35px; padding-bottom:35px; } .short-list { grid-template-columns:1fr; } .category-grid,.ranking-calendar,.guide-section,.about-faq { grid-template-columns:1fr; } .ranking-box,.calendar-box,.about-box,.faq-box { padding:24px; } .guide-steps { grid-template-columns:1fr; } .guide-steps strong { margin-top:8px; } .subscribe-section { align-items:flex-start; flex-direction:column; gap:20px; padding:25px; } .detail-top { grid-template-columns:130px 1fr; gap:20px; padding-top:25px; } .detail-copy h1 { font-size:34px; } .detail-description { font-size:16px; } .detail-footer { align-items:flex-start; flex-direction:column; gap:20px; } .player-heading { align-items:flex-start; flex-direction:column; gap:8px; } .footer-inner { grid-template-columns:1fr 1fr; } .footer-inner>div:first-child { grid-column:1/-1; } .listing-hero h1 { font-size:46px; } }