/* ============================================================ 2026 世界杯专题 CSS 组件命名规范: #wc-{type}-{N} 类型: hero, stats, rules, schedule, quota, teams, stars, cities, history, records, faq ============================================================ */ :root { --wc-blue: #004687; --wc-navy: #001d3d; --wc-green: #00a651; --wc-gold: #ffcd00; --wc-red: #ee2f35; --wc-dark: #0a0e1a; --wc-gray: #f4f6f9; } .wc-section-title{font-size:2.2rem;font-weight:900;margin-bottom:8px} .wc-section-sub{color:#888;font-size:15px;margin-bottom:48px} /* ============================================================ WC-HERO: 首屏横幅 (10 变体) ============================================================ */ /* --- hero-1: 深蓝渐变 --- */ #wc-hero-1{background:linear-gradient(160deg,var(--wc-navy) 0%,#003566 40%,var(--wc-blue) 100%);color:#fff;padding:120px 0 100px;position:relative;overflow:hidden;text-align:center} #wc-hero-1::before{content:'';position:absolute;top:-40%;right:-15%;width:700px;height:700px;background:radial-gradient(circle,rgba(255,205,0,.12) 0%,transparent 65%);border-radius:50%} #wc-hero-1::after{content:'';position:absolute;bottom:-30%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(0,166,81,.1) 0%,transparent 65%);border-radius:50%} #wc-hero-1 .wc-tag{display:inline-block;background:var(--wc-red);padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:24px} #wc-hero-1 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-1 h1 .gold{color:var(--wc-gold)} #wc-hero-1 .hero-desc{font-size:18px;color:rgba(255,255,255,.75);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-1 .hero-slogan{display:inline-block;border:1px solid rgba(255,255,255,.2);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:1px} /* --- hero-2: 绿色球场 --- */ #wc-hero-2{background:linear-gradient(to bottom,#1b5e20,#2e7d32,#388e3c);color:#fff;padding:120px 0 100px;position:relative;overflow:hidden;text-align:center} #wc-hero-2::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border:3px solid rgba(255,255,255,.08);border-radius:50%} #wc-hero-2 .wc-tag{display:inline-block;background:var(--wc-gold);color:#000;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-2 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-2 h1 .gold{color:var(--wc-gold)} #wc-hero-2 .hero-desc{font-size:18px;color:rgba(255,255,255,.75);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-2 .hero-slogan{display:inline-block;background:rgba(255,255,255,.1);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:1px} /* --- hero-3: 暗紫渐变 --- */ #wc-hero-3{background:linear-gradient(135deg,#1a0033,#3d0066,#6600aa);color:#fff;padding:120px 0 100px;text-align:center;position:relative;overflow:hidden} #wc-hero-3::before{content:'';position:absolute;top:-20%;left:60%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,205,0,.1) 0%,transparent 60%);border-radius:50%} #wc-hero-3 .wc-tag{display:inline-block;background:var(--wc-gold);color:#000;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-3 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-3 h1 .gold{color:var(--wc-gold)} #wc-hero-3 .hero-desc{font-size:18px;color:rgba(255,255,255,.7);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-3 .hero-slogan{display:inline-block;border:1px solid rgba(255,255,255,.15);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:1px} /* --- hero-4: 红色激情 --- */ #wc-hero-4{background:linear-gradient(160deg,#7f0000,#b71c1c,#d32f2f);color:#fff;padding:120px 0 100px;text-align:center;position:relative;overflow:hidden} #wc-hero-4::after{content:'';position:absolute;bottom:-25%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 60%);border-radius:50%} #wc-hero-4 .wc-tag{display:inline-block;background:#fff;color:var(--wc-red);padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-4 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-4 h1 .gold{color:var(--wc-gold)} #wc-hero-4 .hero-desc{font-size:18px;color:rgba(255,255,255,.8);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-4 .hero-slogan{display:inline-block;background:rgba(0,0,0,.2);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:1px} /* --- hero-5: 深黑金字 --- */ #wc-hero-5{background:linear-gradient(180deg,#000 0%,#111 50%,#1a1a1a 100%);color:#fff;padding:120px 0 100px;text-align:center;position:relative} #wc-hero-5::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,');opacity:.5} #wc-hero-5 .wc-tag{display:inline-block;background:var(--wc-gold);color:#000;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-5 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px;color:var(--wc-gold)} #wc-hero-5 h1 .gold{color:#fff} #wc-hero-5 .hero-desc{font-size:18px;color:rgba(255,255,255,.5);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-5 .hero-slogan{display:inline-block;border:1px solid rgba(255,205,0,.3);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:var(--wc-gold);letter-spacing:1px} /* --- hero-6: 天蓝渐变 --- */ #wc-hero-6{background:linear-gradient(135deg,#0077b6,#0096c7,#00b4d8);color:#fff;padding:120px 0 100px;text-align:center;position:relative;overflow:hidden} #wc-hero-6::before{content:'';position:absolute;top:-30%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 60%);border-radius:50%} #wc-hero-6 .wc-tag{display:inline-block;background:#fff;color:#0077b6;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-6 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-6 h1 .gold{color:var(--wc-gold)} #wc-hero-6 .hero-desc{font-size:18px;color:rgba(255,255,255,.8);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-6 .hero-slogan{display:inline-block;background:rgba(0,0,0,.15);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:1px} /* --- hero-7: 墨绿金边 --- */ #wc-hero-7{background:linear-gradient(160deg,#004d40,#00695c,#00897b);color:#fff;padding:120px 0 100px;text-align:center;position:relative;overflow:hidden} #wc-hero-7 .wc-tag{display:inline-block;background:var(--wc-gold);color:#004d40;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-7 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-7 h1 .gold{color:var(--wc-gold)} #wc-hero-7 .hero-desc{font-size:18px;color:rgba(255,255,255,.75);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-7 .hero-slogan{display:inline-block;border:2px solid var(--wc-gold);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:var(--wc-gold);letter-spacing:1px} /* --- hero-8: 灰白极简 --- */ #wc-hero-8{background:linear-gradient(180deg,#fafafa,#f0f0f0);color:#1a1a2e;padding:120px 0 100px;text-align:center} #wc-hero-8 .wc-tag{display:inline-block;background:var(--wc-blue);color:#fff;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-8 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px;color:var(--wc-navy)} #wc-hero-8 h1 .gold{color:var(--wc-blue)} #wc-hero-8 .hero-desc{font-size:18px;color:#666;max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-8 .hero-slogan{display:inline-block;background:var(--wc-blue);color:#fff;padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;letter-spacing:1px} /* --- hero-9: 渐变斜线 --- */ #wc-hero-9{background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);color:#fff;padding:120px 0 100px;text-align:center;position:relative;overflow:hidden} #wc-hero-9::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.02) 40px,rgba(255,255,255,.02) 80px)} #wc-hero-9 .wc-tag{display:inline-block;background:var(--wc-green);padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-9 h1{font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-9 h1 .gold{color:var(--wc-green)} #wc-hero-9 .hero-desc{font-size:18px;color:rgba(255,255,255,.7);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-9 .hero-slogan{display:inline-block;border:1px solid rgba(255,255,255,.2);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:1px} /* --- hero-10: 三色旗 --- */ #wc-hero-10{background:linear-gradient(135deg,var(--wc-red) 0%,#fff 33%,var(--wc-green) 66%,var(--wc-navy) 100%);color:#fff;padding:120px 0 100px;text-align:center;position:relative} #wc-hero-10::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.65)} #wc-hero-10 .wc-tag{position:relative;z-index:1;display:inline-block;background:var(--wc-gold);color:#000;padding:6px 20px;border-radius:50px;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:24px} #wc-hero-10 h1{position:relative;z-index:1;font-size:3.8rem;font-weight:900;line-height:1.15;margin-bottom:24px} #wc-hero-10 h1 .gold{color:var(--wc-gold)} #wc-hero-10 .hero-desc{position:relative;z-index:1;font-size:18px;color:rgba(255,255,255,.8);max-width:680px;margin:0 auto 36px;line-height:1.8} #wc-hero-10 .hero-slogan{position:relative;z-index:1;display:inline-block;background:rgba(255,255,255,.15);padding:10px 28px;border-radius:50px;font-size:14px;font-weight:600;color:#fff;letter-spacing:1px} @media(max-width:768px){ #wc-hero-1 h1,#wc-hero-2 h1,#wc-hero-3 h1,#wc-hero-4 h1,#wc-hero-5 h1, #wc-hero-6 h1,#wc-hero-7 h1,#wc-hero-8 h1,#wc-hero-9 h1,#wc-hero-10 h1{font-size:2.4rem} } /* ============================================================ WC-STATS: 核心数据 (5 变体) ============================================================ */ #wc-stats-1{background:var(--wc-gray);padding:72px 0} #wc-stats-1 .stat-item{text-align:center;padding:36px 20px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.04);border:1px solid #eee;transition:.3s} #wc-stats-1 .stat-item:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,.08)} #wc-stats-1 .stat-icon{font-size:2rem;margin-bottom:12px} #wc-stats-1 .stat-num{font-size:3.2rem;font-weight:900;color:var(--wc-blue);line-height:1} #wc-stats-1 .stat-label{font-size:13px;color:#999;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:8px} #wc-stats-2{background:var(--wc-dark);padding:72px 0;color:#fff} #wc-stats-2 .stat-item{text-align:center;padding:36px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;transition:.3s} #wc-stats-2 .stat-item:hover{background:rgba(255,255,255,.08)} #wc-stats-2 .stat-num{font-size:3.2rem;font-weight:900;color:var(--wc-gold);line-height:1} #wc-stats-2 .stat-label{font-size:13px;color:rgba(255,255,255,.5);font-weight:700;margin-top:8px} #wc-stats-3{background:linear-gradient(135deg,var(--wc-blue),var(--wc-navy));padding:72px 0;color:#fff} #wc-stats-3 .stat-item{text-align:center;padding:36px 20px;background:rgba(255,255,255,.08);border-radius:20px;border:1px solid rgba(255,255,255,.12);transition:.3s} #wc-stats-3 .stat-item:hover{transform:translateY(-6px);background:rgba(255,255,255,.12)} #wc-stats-3 .stat-num{font-size:3.2rem;font-weight:900;color:#fff;line-height:1} #wc-stats-3 .stat-label{font-size:13px;color:rgba(255,255,255,.6);font-weight:700;margin-top:8px} #wc-stats-4{background:#fff;padding:72px 0;border-top:4px solid var(--wc-gold);border-bottom:4px solid var(--wc-gold)} #wc-stats-4 .stat-item{text-align:center;padding:36px 20px} #wc-stats-4 .stat-num{font-size:3.5rem;font-weight:900;color:var(--wc-navy);line-height:1} #wc-stats-4 .stat-label{font-size:13px;color:#aaa;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-top:8px} #wc-stats-5{background:linear-gradient(135deg,#1b5e20,#2e7d32);padding:72px 0;color:#fff} #wc-stats-5 .stat-item{text-align:center;padding:36px 20px;background:rgba(0,0,0,.15);border-radius:16px;transition:.3s} #wc-stats-5 .stat-item:hover{background:rgba(0,0,0,.25)} #wc-stats-5 .stat-num{font-size:3.2rem;font-weight:900;color:var(--wc-gold);line-height:1} #wc-stats-5 .stat-label{font-size:13px;color:rgba(255,255,255,.7);font-weight:700;margin-top:8px} /* ============================================================ WC-RULES: 赛制改革 (5 变体) ============================================================ */ #wc-rules-1{padding:88px 0;background:#fff} #wc-rules-1 .rule-card{border-radius:20px;padding:36px;height:100%;transition:.3s} #wc-rules-1 .rule-card:hover{transform:translateY(-4px)} #wc-rules-1 .rule-card.blue{background:linear-gradient(135deg,#e8f0fe,#f0f4ff);border:1px solid #d0ddf7} #wc-rules-1 .rule-card.green{background:linear-gradient(135deg,#e6f9ee,#eefbf3);border:1px solid #b8ecc8} #wc-rules-1 .rule-card.gold{background:linear-gradient(135deg,#fff9e6,#fffbee);border:1px solid #f0e0a0} #wc-rules-1 .rule-card.red{background:linear-gradient(135deg,#ffeaea,#fff0f0);border:1px solid #f5c0c0} #wc-rules-1 .rule-icon{font-size:2.5rem;margin-bottom:16px} #wc-rules-1 .rule-title{font-weight:800;font-size:1.15rem;margin-bottom:10px} #wc-rules-1 .rule-text{font-size:14px;color:#666;line-height:1.8} #wc-rules-1 .compare-table{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06)} #wc-rules-1 .compare-table th{background:var(--wc-blue);color:#fff;padding:14px 20px;font-size:14px;font-weight:700} #wc-rules-1 .compare-table td{padding:12px 20px;font-size:14px;border-bottom:1px solid #f0f0f0} #wc-rules-2{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-rules-2 .rule-card{border-radius:20px;padding:36px;height:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:.3s} #wc-rules-2 .rule-card:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)} #wc-rules-2 .rule-icon{font-size:2.5rem;margin-bottom:16px} #wc-rules-2 .rule-title{font-weight:800;font-size:1.15rem;margin-bottom:10px} #wc-rules-2 .rule-text{font-size:14px;color:rgba(255,255,255,.6);line-height:1.8} #wc-rules-2 .compare-table{background:rgba(255,255,255,.04);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)} #wc-rules-2 .compare-table th{background:rgba(255,255,255,.1);color:var(--wc-gold);padding:14px 20px;font-size:14px;font-weight:700} #wc-rules-2 .compare-table td{padding:12px 20px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.7)} #wc-rules-3{padding:88px 0;background:linear-gradient(180deg,#f8f9fa,#fff)} #wc-rules-3 .rule-card{border-radius:16px;padding:32px;height:100%;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.06);border-left:5px solid var(--wc-blue);transition:.3s} #wc-rules-3 .rule-card:nth-child(2) .rule-card{border-left-color:var(--wc-green)} #wc-rules-3 .rule-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.1)} #wc-rules-3 .rule-icon{font-size:2.5rem;margin-bottom:16px} #wc-rules-3 .rule-title{font-weight:800;font-size:1.15rem;margin-bottom:10px} #wc-rules-3 .rule-text{font-size:14px;color:#666;line-height:1.8} #wc-rules-4{padding:88px 0;background:var(--wc-blue);color:#fff} #wc-rules-4 .rule-card{border-radius:20px;padding:36px;height:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);transition:.3s} #wc-rules-4 .rule-card:hover{background:rgba(255,255,255,.15)} #wc-rules-4 .rule-icon{font-size:2.5rem;margin-bottom:16px} #wc-rules-4 .rule-title{font-weight:800;font-size:1.15rem;margin-bottom:10px} #wc-rules-4 .rule-text{font-size:14px;color:rgba(255,255,255,.7);line-height:1.8} #wc-rules-5{padding:88px 0;background:#fff} #wc-rules-5 .rule-card{border-radius:20px;padding:36px;height:100%;background:var(--wc-gray);border:2px solid transparent;transition:.3s} #wc-rules-5 .rule-card:hover{border-color:var(--wc-blue);transform:translateY(-4px)} #wc-rules-5 .rule-icon{font-size:2.5rem;margin-bottom:16px} #wc-rules-5 .rule-title{font-weight:800;font-size:1.15rem;margin-bottom:10px} #wc-rules-5 .rule-text{font-size:14px;color:#666;line-height:1.8} /* ============================================================ WC-SCHEDULE: 赛程 (5 变体) ============================================================ */ #wc-schedule-1{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-schedule-1 .phase-card{border-radius:20px;padding:40px 32px;text-align:center;transition:.3s;height:100%;position:relative;overflow:hidden} #wc-schedule-1 .phase-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px} #wc-schedule-1 .phase-card.p1{background:rgba(0,70,135,.3);border:1px solid rgba(0,70,135,.4)} #wc-schedule-1 .phase-card.p1::before{background:var(--wc-blue)} #wc-schedule-1 .phase-card.p2{background:rgba(0,166,81,.15);border:1px solid rgba(0,166,81,.3)} #wc-schedule-1 .phase-card.p2::before{background:var(--wc-green)} #wc-schedule-1 .phase-card.p3{background:rgba(238,47,53,.15);border:1px solid rgba(238,47,53,.3)} #wc-schedule-1 .phase-card.p3::before{background:var(--wc-red)} #wc-schedule-1 .phase-card.p4{background:rgba(255,205,0,.12);border:1px solid rgba(255,205,0,.3)} #wc-schedule-1 .phase-card.p4::before{background:var(--wc-gold)} #wc-schedule-1 .phase-card:hover{transform:translateY(-6px)} #wc-schedule-1 .phase-emoji{font-size:2.5rem;margin-bottom:16px} #wc-schedule-1 .phase-name{font-weight:800;font-size:1.2rem;margin-bottom:6px} #wc-schedule-1 .phase-date{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:16px} #wc-schedule-1 .phase-info{font-size:14px;color:rgba(255,255,255,.7);line-height:1.7} #wc-schedule-2{padding:88px 0;background:#fff} #wc-schedule-2 .phase-card{border-radius:16px;padding:36px;text-align:left;background:var(--wc-gray);border-left:5px solid var(--wc-blue);transition:.3s;height:100%} #wc-schedule-2 .phase-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.08);transform:translateY(-4px)} #wc-schedule-2 .phase-card.p2{border-left-color:var(--wc-green)} #wc-schedule-2 .phase-card.p3{border-left-color:var(--wc-red)} #wc-schedule-2 .phase-card.p4{border-left-color:var(--wc-gold)} #wc-schedule-2 .phase-emoji{font-size:2rem;margin-bottom:12px} #wc-schedule-2 .phase-name{font-weight:800;font-size:1.1rem;margin-bottom:4px} #wc-schedule-2 .phase-date{font-size:13px;color:#999;margin-bottom:12px} #wc-schedule-2 .phase-info{font-size:14px;color:#666;line-height:1.7} #wc-schedule-3{padding:88px 0;background:linear-gradient(135deg,#1b5e20,#004d25);color:#fff} #wc-schedule-3 .phase-card{border-radius:20px;padding:36px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:.3s;height:100%} #wc-schedule-3 .phase-card:hover{background:rgba(255,255,255,.14);transform:translateY(-4px)} #wc-schedule-3 .phase-emoji{font-size:2.5rem;margin-bottom:16px} #wc-schedule-3 .phase-name{font-weight:800;font-size:1.2rem;margin-bottom:6px} #wc-schedule-3 .phase-date{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:16px} #wc-schedule-3 .phase-info{font-size:14px;color:rgba(255,255,255,.7);line-height:1.7} #wc-schedule-4{padding:88px 0;background:var(--wc-gray)} #wc-schedule-4 .phase-card{border-radius:20px;padding:36px;text-align:center;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.04);border:1px solid #eee;transition:.3s;height:100%} #wc-schedule-4 .phase-card:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,.08)} #wc-schedule-4 .phase-emoji{font-size:2.5rem;margin-bottom:16px} #wc-schedule-4 .phase-name{font-weight:800;font-size:1.2rem;margin-bottom:6px;color:var(--wc-blue)} #wc-schedule-4 .phase-date{font-size:13px;color:#999;margin-bottom:16px} #wc-schedule-4 .phase-info{font-size:14px;color:#666;line-height:1.7} #wc-schedule-5{padding:88px 0;background:linear-gradient(160deg,#1a0033,#3d0066);color:#fff} #wc-schedule-5 .phase-card{border-radius:20px;padding:36px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:.3s;height:100%} #wc-schedule-5 .phase-card:hover{background:rgba(255,255,255,.1)} #wc-schedule-5 .phase-emoji{font-size:2.5rem;margin-bottom:16px} #wc-schedule-5 .phase-name{font-weight:800;font-size:1.2rem;margin-bottom:6px} #wc-schedule-5 .phase-date{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:16px} #wc-schedule-5 .phase-info{font-size:14px;color:rgba(255,255,255,.6);line-height:1.7} /* ============================================================ WC-QUOTA: 各大洲名额 (3 变体) ============================================================ */ #wc-quota-1{padding:88px 0;background:var(--wc-gray)} #wc-quota-1 .quota-card{background:#fff;border-radius:20px;padding:32px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.04);border:1px solid #eee;transition:.3s;height:100%} #wc-quota-1 .quota-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.08)} #wc-quota-1 .quota-emoji{font-size:2rem;margin-bottom:10px} #wc-quota-1 .quota-name{font-weight:800;font-size:1rem;margin-bottom:6px} #wc-quota-1 .quota-old{font-size:1.5rem;color:#ccc;font-weight:900;text-decoration:line-through} #wc-quota-1 .quota-arrow{font-size:1.2rem;color:var(--wc-green);margin:0 8px} #wc-quota-1 .quota-new{font-size:2rem;color:var(--wc-blue);font-weight:900} #wc-quota-2{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-quota-2 .quota-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px;text-align:center;transition:.3s;height:100%} #wc-quota-2 .quota-card:hover{background:rgba(255,255,255,.08)} #wc-quota-2 .quota-emoji{font-size:2rem;margin-bottom:10px} #wc-quota-2 .quota-name{font-weight:800;font-size:1rem;margin-bottom:6px} #wc-quota-2 .quota-old{font-size:1.5rem;color:rgba(255,255,255,.3);font-weight:900;text-decoration:line-through} #wc-quota-2 .quota-arrow{font-size:1.2rem;color:var(--wc-green);margin:0 8px} #wc-quota-2 .quota-new{font-size:2rem;color:var(--wc-gold);font-weight:900} #wc-quota-3{padding:88px 0;background:#fff} #wc-quota-3 .quota-card{background:var(--wc-gray);border-radius:16px;padding:28px;text-align:center;border:2px solid transparent;transition:.3s;height:100%} #wc-quota-3 .quota-card:hover{border-color:var(--wc-blue);transform:translateY(-4px)} #wc-quota-3 .quota-emoji{font-size:2rem;margin-bottom:10px} #wc-quota-3 .quota-name{font-weight:800;font-size:1rem;margin-bottom:6px} #wc-quota-3 .quota-old{font-size:1.5rem;color:#bbb;font-weight:900;text-decoration:line-through} #wc-quota-3 .quota-arrow{font-size:1.2rem;color:var(--wc-green);margin:0 8px} #wc-quota-3 .quota-new{font-size:2rem;color:var(--wc-navy);font-weight:900} /* ============================================================ WC-TEAMS: 参赛队伍 (3 变体) ============================================================ */ #wc-teams-1{padding:88px 0;background:#fff} #wc-teams-1 .group-label{display:inline-block;background:var(--wc-blue);color:#fff;padding:4px 14px;border-radius:8px;font-size:12px;font-weight:800;margin-bottom:16px} #wc-teams-1 .team-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f8f9fa;border-radius:12px;margin-bottom:8px;transition:.2s} #wc-teams-1 .team-item:hover{background:#e8f0fe} #wc-teams-1 .team-flag{font-size:1.6rem} #wc-teams-1 .team-name{font-weight:700;font-size:14px} #wc-teams-1 .team-titles{font-size:12px;color:#999} #wc-teams-2{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-teams-2 .group-label{display:inline-block;background:var(--wc-gold);color:#000;padding:4px 14px;border-radius:8px;font-size:12px;font-weight:800;margin-bottom:16px} #wc-teams-2 .team-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:8px;transition:.2s} #wc-teams-2 .team-item:hover{background:rgba(255,255,255,.08)} #wc-teams-2 .team-flag{font-size:1.6rem} #wc-teams-2 .team-name{font-weight:700;font-size:14px} #wc-teams-2 .team-titles{font-size:12px;color:rgba(255,255,255,.4)} #wc-teams-3{padding:88px 0;background:var(--wc-gray)} #wc-teams-3 .group-label{display:inline-block;background:var(--wc-green);color:#fff;padding:4px 14px;border-radius:8px;font-size:12px;font-weight:800;margin-bottom:16px} #wc-teams-3 .team-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:12px;margin-bottom:8px;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.04)} #wc-teams-3 .team-item:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.08)} #wc-teams-3 .team-flag{font-size:1.6rem} #wc-teams-3 .team-name{font-weight:700;font-size:14px} #wc-teams-3 .team-titles{font-size:12px;color:#999} /* ============================================================ WC-STARS: 焦点球星 (5 变体) ============================================================ */ #wc-stars-1{padding:88px 0;background:linear-gradient(180deg,var(--wc-dark),#111827);color:#fff} #wc-stars-1 .star-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;transition:.3s;height:100%} #wc-stars-1 .star-card:hover{background:rgba(255,255,255,.08);transform:translateY(-4px);border-color:var(--wc-gold)} #wc-stars-1 .star-img{width:100%;height:280px;object-fit:cover;object-position:top} #wc-stars-1 .star-body{padding:24px} #wc-stars-1 .star-name{font-weight:800;font-size:1.2rem;margin-bottom:4px} #wc-stars-1 .star-team{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px} #wc-stars-1 .star-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7} #wc-stars-1 .star-pos{display:inline-block;background:var(--wc-gold);color:#000;font-size:11px;font-weight:800;padding:2px 10px;border-radius:50px;margin-bottom:8px} #wc-stars-2{padding:88px 0;background:#fff} #wc-stars-2 .star-card{background:var(--wc-gray);border-radius:20px;overflow:hidden;transition:.3s;height:100%;border:2px solid transparent} #wc-stars-2 .star-card:hover{border-color:var(--wc-blue);transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.08)} #wc-stars-2 .star-img{width:100%;height:280px;object-fit:cover;object-position:top} #wc-stars-2 .star-body{padding:24px} #wc-stars-2 .star-name{font-weight:800;font-size:1.2rem;margin-bottom:4px;color:var(--wc-navy)} #wc-stars-2 .star-team{font-size:13px;color:#999;margin-bottom:8px} #wc-stars-2 .star-desc{font-size:13px;color:#666;line-height:1.7} #wc-stars-2 .star-pos{display:inline-block;background:var(--wc-blue);color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:50px;margin-bottom:8px} #wc-stars-3{padding:88px 0;background:linear-gradient(135deg,#1b5e20,#004d25);color:#fff} #wc-stars-3 .star-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;transition:.3s;height:100%} #wc-stars-3 .star-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)} #wc-stars-3 .star-img{width:100%;height:280px;object-fit:cover;object-position:top} #wc-stars-3 .star-body{padding:24px} #wc-stars-3 .star-name{font-weight:800;font-size:1.2rem;margin-bottom:4px} #wc-stars-3 .star-team{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px} #wc-stars-3 .star-desc{font-size:13px;color:rgba(255,255,255,.65);line-height:1.7} #wc-stars-3 .star-pos{display:inline-block;background:var(--wc-gold);color:#000;font-size:11px;font-weight:800;padding:2px 10px;border-radius:50px;margin-bottom:8px} #wc-stars-4{padding:88px 0;background:linear-gradient(160deg,#1a0033,#3d0066);color:#fff} #wc-stars-4 .star-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;transition:.3s;height:100%} #wc-stars-4 .star-card:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);border-color:var(--wc-gold)} #wc-stars-4 .star-img{width:100%;height:280px;object-fit:cover;object-position:top} #wc-stars-4 .star-body{padding:24px} #wc-stars-4 .star-name{font-weight:800;font-size:1.2rem;margin-bottom:4px} #wc-stars-4 .star-team{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:8px} #wc-stars-4 .star-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.7} #wc-stars-4 .star-pos{display:inline-block;background:#9c27b0;color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:50px;margin-bottom:8px} #wc-stars-5{padding:88px 0;background:var(--wc-gray)} #wc-stars-5 .star-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:.3s;height:100%} #wc-stars-5 .star-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1)} #wc-stars-5 .star-img{width:100%;height:280px;object-fit:cover;object-position:top} #wc-stars-5 .star-body{padding:24px} #wc-stars-5 .star-name{font-weight:800;font-size:1.2rem;margin-bottom:4px} #wc-stars-5 .star-team{font-size:13px;color:#999;margin-bottom:8px} #wc-stars-5 .star-desc{font-size:13px;color:#666;line-height:1.7} #wc-stars-5 .star-pos{display:inline-block;background:var(--wc-green);color:#fff;font-size:11px;font-weight:800;padding:2px 10px;border-radius:50px;margin-bottom:8px} /* ============================================================ WC-CITIES: 主办城市 (3 变体) ============================================================ */ #wc-cities-1{padding:88px 0;background:#fff} #wc-cities-1 .city-group-title{font-weight:800;font-size:1rem;color:var(--wc-blue);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--wc-gold)} #wc-cities-1 .city-item{background:var(--wc-gray);border-radius:16px;padding:24px;text-align:center;transition:.3s;height:100%;border:1px solid #eee} #wc-cities-1 .city-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08);background:#fff} #wc-cities-1 .city-emoji{font-size:1.8rem;margin-bottom:8px} #wc-cities-1 .city-name{font-weight:800;font-size:1rem} #wc-cities-1 .city-stadium{font-size:12px;color:#888;margin-top:6px} #wc-cities-1 .city-capacity{font-size:11px;color:var(--wc-green);font-weight:700;margin-top:4px} #wc-cities-2{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-cities-2 .city-group-title{font-weight:800;font-size:1rem;color:var(--wc-gold);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid rgba(255,255,255,.1)} #wc-cities-2 .city-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;text-align:center;transition:.3s;height:100%} #wc-cities-2 .city-item:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)} #wc-cities-2 .city-emoji{font-size:1.8rem;margin-bottom:8px} #wc-cities-2 .city-name{font-weight:800;font-size:1rem} #wc-cities-2 .city-stadium{font-size:12px;color:rgba(255,255,255,.4);margin-top:6px} #wc-cities-2 .city-capacity{font-size:11px;color:var(--wc-green);font-weight:700;margin-top:4px} #wc-cities-3{padding:88px 0;background:var(--wc-gray)} #wc-cities-3 .city-group-title{font-weight:800;font-size:1rem;color:var(--wc-navy);margin-bottom:16px;padding-bottom:8px;border-bottom:3px solid var(--wc-green)} #wc-cities-3 .city-item{background:#fff;border-radius:20px;padding:24px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:.3s;height:100%} #wc-cities-3 .city-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)} #wc-cities-3 .city-emoji{font-size:1.8rem;margin-bottom:8px} #wc-cities-3 .city-name{font-weight:800;font-size:1rem} #wc-cities-3 .city-stadium{font-size:12px;color:#888;margin-top:6px} #wc-cities-3 .city-capacity{font-size:11px;color:var(--wc-green);font-weight:700;margin-top:4px} /* ============================================================ WC-HISTORY: 历届冠军 (3 变体) ============================================================ */ #wc-history-1{padding:88px 0;background:linear-gradient(160deg,#0f0c29,#302b63,#24243e);color:#fff} #wc-history-1 .history-scroll{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px} #wc-history-1 .history-scroll::-webkit-scrollbar{height:6px} #wc-history-1 .history-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px} #wc-history-1 .history-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px} #wc-history-1 .history-card{min-width:260px;flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px;transition:.3s} #wc-history-1 .history-card:hover{background:rgba(255,255,255,.08);border-color:var(--wc-gold)} #wc-history-1 .h-year{color:var(--wc-gold);font-family:monospace;font-size:14px;font-weight:700;letter-spacing:1px} #wc-history-1 .h-host{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:12px} #wc-history-1 .h-team{font-size:1.6rem;font-weight:900;margin-bottom:6px} #wc-history-1 .h-score{font-size:13px;color:rgba(255,255,255,.4);font-style:italic} #wc-history-1 .h-titles{display:inline-block;background:var(--wc-gold);color:#000;font-size:11px;font-weight:800;padding:3px 10px;border-radius:50px;margin-top:12px} #wc-history-2{padding:88px 0;background:var(--wc-navy);color:#fff} #wc-history-2 .history-scroll{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px} #wc-history-2 .history-scroll::-webkit-scrollbar{display:none} #wc-history-2 .history-card{min-width:260px;flex-shrink:0;background:rgba(255,255,255,.06);border-left:4px solid var(--wc-gold);border-radius:12px;padding:28px;transition:.3s} #wc-history-2 .history-card:hover{background:rgba(255,255,255,.1)} #wc-history-2 .h-year{color:var(--wc-green);font-family:monospace;font-size:14px;font-weight:700} #wc-history-2 .h-host{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:12px} #wc-history-2 .h-team{font-size:1.6rem;font-weight:900;margin-bottom:6px} #wc-history-2 .h-score{font-size:13px;color:rgba(255,255,255,.4);font-style:italic} #wc-history-2 .h-titles{display:inline-block;background:var(--wc-green);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:50px;margin-top:12px} #wc-history-3{padding:88px 0;background:var(--wc-gray)} #wc-history-3 .history-scroll{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px} #wc-history-3 .history-scroll::-webkit-scrollbar{height:6px} #wc-history-3 .history-scroll::-webkit-scrollbar-track{background:#e0e0e0;border-radius:3px} #wc-history-3 .history-scroll::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px} #wc-history-3 .history-card{min-width:260px;flex-shrink:0;background:#fff;border:1px solid #eee;border-radius:20px;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:.3s} #wc-history-3 .history-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)} #wc-history-3 .h-year{color:var(--wc-blue);font-family:monospace;font-size:14px;font-weight:700} #wc-history-3 .h-host{font-size:12px;color:#bbb;margin-bottom:12px} #wc-history-3 .h-team{font-size:1.6rem;font-weight:900;margin-bottom:6px;color:var(--wc-navy)} #wc-history-3 .h-score{font-size:13px;color:#999;font-style:italic} #wc-history-3 .h-titles{display:inline-block;background:var(--wc-blue);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:50px;margin-top:12px} /* ============================================================ WC-RECORDS: 世界杯之最 (3 变体) ============================================================ */ #wc-records-1{padding:88px 0;background:var(--wc-gray)} #wc-records-1 .record-card{background:#fff;border-radius:20px;padding:32px;border-left:5px solid var(--wc-blue);box-shadow:0 4px 16px rgba(0,0,0,.04);transition:.3s;height:100%} #wc-records-1 .record-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.08)} #wc-records-1 .record-label{font-size:12px;color:#999;font-weight:700;text-transform:uppercase;letter-spacing:1px} #wc-records-1 .record-value{font-size:1.5rem;font-weight:900;color:var(--wc-blue);margin:8px 0 4px} #wc-records-1 .record-detail{font-size:13px;color:#888} .record-card:nth-child(2){border-left-color:var(--wc-green)} .record-card:nth-child(3){border-left-color:var(--wc-gold)} .record-card:nth-child(4){border-left-color:var(--wc-red)} #wc-records-2{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-records-2 .record-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px;transition:.3s;height:100%} #wc-records-2 .record-card:hover{background:rgba(255,255,255,.08)} #wc-records-2 .record-label{font-size:12px;color:rgba(255,255,255,.4);font-weight:700;text-transform:uppercase;letter-spacing:1px} #wc-records-2 .record-value{font-size:1.5rem;font-weight:900;color:var(--wc-gold);margin:8px 0 4px} #wc-records-2 .record-detail{font-size:13px;color:rgba(255,255,255,.5)} #wc-records-3{padding:88px 0;background:#fff} #wc-records-3 .record-card{background:var(--wc-gray);border-radius:16px;padding:32px;border:2px solid transparent;transition:.3s;height:100%} #wc-records-3 .record-card:hover{border-color:var(--wc-blue);transform:translateY(-4px)} #wc-records-3 .record-label{font-size:12px;color:#999;font-weight:700;text-transform:uppercase;letter-spacing:1px} #wc-records-3 .record-value{font-size:1.5rem;font-weight:900;color:var(--wc-navy);margin:8px 0 4px} #wc-records-3 .record-detail{font-size:13px;color:#888} /* ============================================================ WC-FAQ: 常见问题 (5 变体) ============================================================ */ #wc-faq-1{padding:88px 0;background:#fff} #wc-faq-1 .accordion-item{border:1px solid #eee;border-radius:14px!important;margin-bottom:12px;overflow:hidden} #wc-faq-1 .accordion-button{font-weight:700;font-size:15px;padding:20px 24px;background:#fafafa} #wc-faq-1 .accordion-button:not(.collapsed){background:var(--wc-blue);color:#fff;box-shadow:none} #wc-faq-1 .accordion-body{padding:20px 24px;color:#666;line-height:1.9;font-size:14px} #wc-faq-2{padding:88px 0;background:var(--wc-dark);color:#fff} #wc-faq-2 .accordion-item{border:1px solid rgba(255,255,255,.08);border-radius:14px!important;margin-bottom:12px;overflow:hidden;background:transparent} #wc-faq-2 .accordion-button{font-weight:700;font-size:15px;padding:20px 24px;background:rgba(255,255,255,.04);color:#fff} #wc-faq-2 .accordion-button:not(.collapsed){background:rgba(255,255,255,.1);color:var(--wc-gold);box-shadow:none} #wc-faq-2 .accordion-button::after{filter:invert(1)} #wc-faq-2 .accordion-body{padding:20px 24px;color:rgba(255,255,255,.6);line-height:1.9;font-size:14px} #wc-faq-3{padding:88px 0;background:var(--wc-gray)} #wc-faq-3 .accordion-item{border:none;border-radius:16px!important;margin-bottom:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)} #wc-faq-3 .accordion-button{font-weight:700;font-size:15px;padding:20px 24px;background:#fff} #wc-faq-3 .accordion-button:not(.collapsed){background:var(--wc-green);color:#fff;box-shadow:none} #wc-faq-3 .accordion-body{padding:20px 24px;color:#666;line-height:1.9;font-size:14px;background:#fff} #wc-faq-4{padding:88px 0;background:var(--wc-blue);color:#fff} #wc-faq-4 .accordion-item{border:1px solid rgba(255,255,255,.12);border-radius:14px!important;margin-bottom:12px;overflow:hidden;background:transparent} #wc-faq-4 .accordion-button{font-weight:700;font-size:15px;padding:20px 24px;background:rgba(255,255,255,.08);color:#fff} #wc-faq-4 .accordion-button:not(.collapsed){background:rgba(255,255,255,.15);color:var(--wc-gold);box-shadow:none} #wc-faq-4 .accordion-button::after{filter:invert(1)} #wc-faq-4 .accordion-body{padding:20px 24px;color:rgba(255,255,255,.7);line-height:1.9;font-size:14px} #wc-faq-5{padding:88px 0;background:#fff} #wc-faq-5 .accordion-item{border:2px solid #eee;border-radius:16px!important;margin-bottom:12px;overflow:hidden} #wc-faq-5 .accordion-button{font-weight:700;font-size:15px;padding:20px 24px;background:#fff} #wc-faq-5 .accordion-button:not(.collapsed){background:var(--wc-navy);color:#fff;box-shadow:none} #wc-faq-5 .accordion-body{padding:20px 24px;color:#666;line-height:1.9;font-size:14px}