:root { --ink:#101b2d; --muted:#6f7b8d; --cream:#f5f2ed; --paper:#fffdf9; --line:#dedbd4; --violet:#5b4df0; --orange:#ff7448; --cyan:#b8e7e1; --shadow:0 24px 70px rgba(16,27,45,.12); } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Microsoft YaHei",sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } img { display:block; width:100%; height:auto; object-fit:cover; } .wrap { width:min(1180px,calc(100% - 40px)); margin:auto; } .topbar { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand { display:flex; gap:10px; align-items:center; font-weight:900; letter-spacing:-.04em; font-size:22px; } .brand-mark { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:white; background:linear-gradient(135deg,var(--violet),var(--orange)); box-shadow:0 8px 18px rgba(91,77,240,.25); } nav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } nav a { padding:9px 12px; border-radius:99px; color:#566174; font-size:13px; } nav a:hover, nav a.active { color:var(--ink); background:#e9e5df; } .menu { display:none; } .hero { padding:62px 0 72px; position:relative; overflow:hidden; } .hero:after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-190px; top:-140px; background:radial-gradient(circle,#d8d0ff 0 18%,transparent 19%),radial-gradient(circle at 60% 40%,rgba(255,116,72,.35),transparent 55%); opacity:.75; pointer-events:none; } .eyebrow { color:var(--violet); text-transform:uppercase; letter-spacing:.2em; font-weight:800; font-size:12px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(44px,7vw,92px); line-height:.98; letter-spacing:-.075em; max-width:760px; margin:18px 0 24px; } h2 { font-size:clamp(28px,4vw,48px); line-height:1.05; letter-spacing:-.055em; margin-bottom:14px; } h3 { font-size:20px; line-height:1.15; margin-bottom:8px; } .lead { max-width:580px; color:#5e6879; font-size:18px; } .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; } .btn { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--ink); padding:12px 18px; border-radius:99px; font-weight:800; font-size:14px; } .btn.primary { color:#fff; border-color:var(--violet); background:var(--violet); } .btn.light { border-color:var(--line); background:var(--paper); } .section { padding:72px 0; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; } .section-head p { max-width:480px; color:var(--muted); margin-bottom:0; } .grid { display:grid; gap:18px; } .grid.five { grid-template-columns:repeat(5,1fr); } .grid.three { grid-template-columns:repeat(3,1fr); } .card { background:var(--paper); border:1px solid rgba(222,219,212,.8); border-radius:20px; overflow:hidden; box-shadow:0 8px 28px rgba(16,27,45,.04); } .poster { aspect-ratio:3/4; background:#d7d1c8; overflow:hidden; } .poster img { height:100%; } .card-body { padding:16px; } .meta { color:var(--muted); font-size:12px; } .desc { color:#687386; font-size:14px; } .feature { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:stretch; } .feature-image { min-height:440px; border-radius:28px; overflow:hidden; position:relative; background:#202943; } .feature-image img { height:100%; } .feature-image .caption { position:absolute; inset:auto 20px 18px; color:white; } .feature-image:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(8,12,25,.8)); } .feature-image .caption { z-index:1; } .feature-copy { padding:28px; background:var(--cyan); border-radius:28px; display:flex; flex-direction:column; justify-content:space-between; } .number { font-size:56px; color:rgba(16,27,45,.16); font-weight:900; line-height:1; } .calendar { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .day { padding:18px; min-height:170px; border-radius:18px; background:var(--paper); border:1px solid var(--line); } .day strong { color:var(--orange); font-size:13px; } .day p { margin:16px 0 0; font-weight:800; } .pill { display:inline-flex; padding:5px 9px; background:#edeafd; border-radius:99px; color:var(--violet); font-size:11px; font-weight:800; } .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .step { padding:22px; background:#efeae2; border-radius:20px; } .step b { display:block; font-size:28px; color:var(--orange); margin-bottom:22px; } .faq { display:grid; grid-template-columns:1fr 1fr; gap:14px; } details { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:17px 18px; } summary { cursor:pointer; font-weight:800; } details p { color:var(--muted); margin:12px 0 0; } .subscribe { padding:42px; border-radius:28px; background:var(--ink); color:white; display:flex; align-items:center; justify-content:space-between; gap:30px; } .subscribe p { color:#c0c9d7; max-width:560px; } footer { padding:34px 0 50px; color:var(--muted); font-size:13px; } .footer-links { display:flex; flex-wrap:wrap; gap:14px; margin:18px 0; } .breadcrumbs { padding:24px 0 8px; font-size:13px; color:var(--muted); } .detail { display:grid; grid-template-columns:300px 1fr; gap:42px; padding:44px 0 72px; } .detail-poster { border-radius:20px; overflow:hidden; } .detail h1 { font-size:clamp(42px,6vw,72px); } .info-row { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; } .watch { margin-top:32px; background:#121c2e; padding:20px; border-radius:24px; color:white; } video { width:100%; border-radius:14px; display:block; background:#000; } .notice { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:14px 0 0; color:#b9c2d1; font-size:12px; } .episode-nav { display:flex; justify-content:space-between; gap:12px; margin-top:22px; } .empty-state { padding:40px; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:20px; } @media (max-width:900px) { .grid.five { grid-template-columns:repeat(3,1fr); } .feature { grid-template-columns:1fr; } .feature-image { min-height:360px; } nav a { padding:8px 7px; } } @media (max-width:640px) { .wrap { width:min(100% - 28px,1180px); } .topbar { height:68px; } nav { display:none; } .menu { display:block; border:0; background:transparent; font-size:22px; } .hero { padding:42px 0 54px; } h1 { font-size:54px; } .grid.five,.grid.three,.calendar,.steps,.faq { grid-template-columns:1fr 1fr; } .grid.five .card:first-child { grid-column:span 2; } .subscribe { padding:28px; flex-direction:column; align-items:flex-start; } .detail { grid-template-columns:1fr; gap:24px; } .detail-poster { max-width:280px; } .detail h1 { font-size:48px; } .section { padding:52px 0; } } @media (max-width:420px) { .grid.five,.grid.three,.calendar,.steps,.faq { grid-template-columns:1fr; } .grid.five .card:first-child { grid-column:auto; } }