/* zh-web-lolesports.com — editorial design 17 */
:root { --bg:#101722; --surface:#182433; --text:#f1f5f9; --accent:#5bd6c2; --secondary:#f0b65a; --line:#5bd6c255; --radius:32px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.8 "Microsoft YaHei",Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; } .zhweblolesports-topbar { position:sticky; top:0; z-index:5; background:#101722f2; border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.zhweblolesports-nav-wrap { max-width:1240px; margin:auto; padding:15px 24px; display:flex; flex-direction:column; gap:9px; } .zhweblolesports-brand { font-size:1.2rem; font-weight:850; color:var(--text); letter-spacing:.03em; } .zhweblolesports-nav-links { display:flex; flex-wrap:wrap; gap:7px 19px; } .zhweblolesports-nav-links a { color:var(--text); font-size:.91rem; }
main { max-width:1240px; margin:auto; padding:32px 24px 78px; } .zhweblolesports-hero { padding:clamp(24px,5vw,58px); background:linear-gradient(125deg,var(--surface),#5bd6c218); border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden; }
.zhweblolesports-hero:after { content:""; position:absolute; width:280px; height:280px; right:-100px; top:-110px; border-radius:50%; background:radial-gradient(circle,#f0b65a66,transparent 70%); } .zhweblolesports-eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:800; } h1 { font-size:clamp(2rem,5vw,3.6rem); line-height:1.25; max-width:1000px; margin:12px 0 18px; } .zhweblolesports-hero p { max-width:1000px; font-size:1.05rem; margin:0; }
.zhweblolesports-brand-intro { margin:30px 0 46px; padding:27px 30px; border-left:4px solid var(--accent); background:var(--surface); } .zhweblolesports-brand-intro p { margin:0; line-height:2; } section { margin:46px 0; scroll-margin-top:120px; } .zhweblolesports-section-title { display:flex; align-items:end; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:20px; } h2 { font-size:clamp(1.45rem,3vw,2.15rem); margin:0; } h3 { line-height:1.45; } .zhweblolesports-news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.zhweblolesports-news-card,.zhweblolesports-faq-card,.zhweblolesports-topic-card,.zhweblolesports-community-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .zhweblolesports-news-card:nth-child(2) { border-top:3px solid var(--accent); } .zhweblolesports-news-card h3 { margin:9px 0; font-size:1.19rem; } .zhweblolesports-news-card p { margin:0; } .zhweblolesports-meta { color:#aebbc8; font-size:.83rem; letter-spacing:.04em; } .zhweblolesports-faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } details summary { cursor:pointer; font-weight:750; } .zhweblolesports-answer { color:#c4cfda; } .zhweblolesports-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; } .zhweblolesports-topic-card h3 { margin:0 0 8px; color:var(--accent); } .zhweblolesports-community-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } footer { border-top:1px solid var(--line); padding:24px; text-align:center; color:#aebbc8; }
@media(max-width:720px) { .zhweblolesports-nav-wrap { padding:12px 16px; } main { padding:18px 14px 54px; } .zhweblolesports-news-grid,.zhweblolesports-faq-list,.zhweblolesports-topic-grid,.zhweblolesports-community-grid { grid-template-columns:1fr; } .zhweblolesports-hero { padding:24px 20px; } .zhweblolesports-brand-intro { padding:21px; } }

.zhweblolesports-schedule-card{padding:24px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}.zhweblolesports-schedule-timeline{display:grid;gap:12px;padding-left:24px}.zhweblolesports-schedule-timeline li{padding:12px 14px;border-left:3px solid var(--accent)}.zhweblolesports-schedule-timeline strong,.zhweblolesports-schedule-timeline span{display:block}.zhweblolesports-schedule-note{font-size:.9rem;opacity:.82}.zhweblolesports-match-table-wrap{overflow-x:auto;margin:20px 0}.zhweblolesports-match-table{width:100%;border-collapse:collapse;min-width:690px;background:var(--bg)}.zhweblolesports-match-table caption{text-align:left;font-size:1.1rem;font-weight:750;padding:12px 0;color:var(--accent)}.zhweblolesports-match-table th,.zhweblolesports-match-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}.zhweblolesports-match-table th{color:var(--accent);white-space:nowrap}.zhweblolesports-match-table tbody tr:nth-child(even){background:var(--surface)}

.zhweblolesports-feature-image{display:block;max-width:100%;height:auto;border-radius:var(--radius)}.zhweblolesports-hero>.zhweblolesports-feature-image{max-width:min(44%,560px);float:right;margin:0 0 18px 28px}.zhweblolesports-card-media{display:block;max-width:100%;height:auto;border-radius:calc(var(--radius)/2)}

.zhweblolesports-brand-intro{display:grid;grid-template-columns:150px 1fr;gap:24px}.zhweblolesports-brand-intro:before{content:"赛事视角";color:var(--accent);font-weight:800}.zhweblolesports-news-card{box-shadow:7px 7px 0 color-mix(in srgb,var(--accent) 17%,transparent)}

/* layout family 1 */
.zhweblolesports-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:end}.zhweblolesports-hero .zhweblolesports-eyebrow{grid-column:1/-1}.zhweblolesports-hero p{max-width:62ch}.zhweblolesports-news-card{border-radius:4px 24px 4px 24px}