/* ========================================================= bingrfid必应标签 足球队 · 首页专属样式 home.css --------------------------------------------------------- 视觉流派：海洋蓝 Editorial × Kinetic 在 css/design.css 的 Design Token 基础上延展，不推翻品牌色。 仅由 index.php 引入；其它页面继续用 design.css 的通用组件。 与 GSAP 的分工： · .rise / .fade 的初态由 控制 · 无 JS 或 CDN 失败时，html 不带 js-on，内容直接可见 ========================================================= */ /* ===== 首页专属节奏 token ===== */ :root{ --fs-display:clamp(42px,7.4vw,84px); --fs-h2:clamp(26px,3.6vw,40px); --sec-y:clamp(64px,8vw,120px); } /* ===== 顶部导航：比通用版更薄更安静 ===== */ .topnav-in{height:58px} .brand img{height:32px;width:auto;max-width:200px} .brand .crest--img{width:auto;height:32px} .nav-links a{position:relative;padding:4px 0;transition:color .25s} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px; background:var(--blue-600);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease-out)} .nav-links a:hover,.nav-links a.active{color:var(--blue-600)} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)} /* ===== HERO：非对称分屏 + 巨型排版 ===== */ .hero{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line); padding:clamp(64px,10vw,132px) 24px clamp(56px,7vw,96px)} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;transform:none} .hero-bg::before{content:"";position:absolute;inset:-8% 0; background: radial-gradient(52% 46% at 12% 4%,rgba(30,138,224,.20),transparent 62%), radial-gradient(46% 42% at 92% 10%,rgba(10,42,78,.14),transparent 62%), radial-gradient(40% 34% at 70% 96%,rgba(124,184,232,.16),transparent 60%)} .hero-grid{position:absolute;inset:0;opacity:.55; background-image:linear-gradient(rgba(13,59,102,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(13,59,102,.055) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(78% 72% at 50% 34%,#000,transparent); -webkit-mask-image:radial-gradient(78% 72% at 50% 34%,#000,transparent)} /* 球场中线：签名视觉元素 */ .pitch-line{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:0; background:linear-gradient(180deg,transparent,rgba(13,59,102,.16) 22%,rgba(13,59,102,.16) 78%,transparent)} .pitch-circle{position:absolute;left:50%;top:50%;width:min(30vw,260px);aspect-ratio:1; transform:translate(-50%,-50%);border:1px solid rgba(13,59,102,.10);border-radius:50%;z-index:0} .hero-in{position:relative;z-index:1;max-width:var(--container);margin:0 auto;text-align:left; display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:clamp(28px,5vw,72px);align-items:end} .hero-badge{margin-bottom:26px;border:1px solid rgba(18,115,182,.14)} .hero-badge .dot{animation:pulse 2.2s infinite} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(48,185,78,.5)} 70%{box-shadow:0 0 0 9px rgba(48,185,78,0)} 100%{box-shadow:0 0 0 0 rgba(48,185,78,0)}} /* 巨型标题：逐行揭示（GSAP 推 .ln > span） */ .hero h1{font-size:var(--fs-display);font-weight:700;letter-spacing:-.035em;line-height:1.02; margin-bottom:26px;text-wrap:balance} .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em} .hero h1 .ln > span{display:block} .hero h1 .accent{background:none;-webkit-text-fill-color:currentColor;color:var(--blue-600); position:relative;display:inline-block} .hero h1 .u{position:absolute;left:0;right:0;bottom:.08em;height:.06em;border-radius:99px; background:linear-gradient(90deg,var(--blue-500),var(--blue-300)); transform:scaleX(0);transform-origin:left;pointer-events:none} .hero-lede{color:var(--text-2);font-size:clamp(16px,1.9vw,19px);max-width:44ch; margin:0 0 32px;text-align:left} /* 覆盖 design.css 的 .hero p（居中 + margin auto） */ .hero .hero-lede{margin:0 0 32px;max-width:44ch} .hero-ctas{display:flex;gap:13px;flex-wrap:wrap;align-items:center;justify-content:flex-start} /* 右栏：赛季战绩卡 */ .hero-side{align-self:end;padding-bottom:6px} .side-card{background:rgba(255,255,255,.72);border:1px solid var(--line); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-radius:20px;padding:22px 24px;box-shadow:var(--shadow-sm)} .side-lb{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--text-3);margin-bottom:14px} .side-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:9px 0;border-bottom:1px solid rgba(0,0,0,.045)} .side-row:last-child{border-bottom:none;padding-bottom:0} .side-k{font-size:13px;color:var(--text-2)} .side-v{font-size:20px;font-weight:700;color:var(--blue-700);letter-spacing:-.01em; font-variant-numeric:tabular-nums} .side-v small{font-size:11px;font-weight:500;color:var(--text-3);margin-left:3px} /* ===== 按钮（首页增强：磁吸位移由 GSAP 写入 x/y）===== */ .hero .btn{padding:14px 28px;position:relative;overflow:hidden} .hero .btn-primary:active{transform:translateY(0) scale(.985)} .hero .btn-ghost{border-color:var(--line)} .btn .arw{transition:transform .3s var(--ease-out)} .btn:hover .arw{transform:translateX(3px)} .btn:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px} /* ===== 区块头：首页用 block 版式 + eyebrow ===== */ .sec-head--row .sec-eyebrow{margin-bottom:12px} .sec-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:12px} .sec-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--blue-300);flex:none} .sec-title{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.025em;line-height:1.15} .sec-sub{margin-top:10px;font-size:15.5px;max-width:56ch} .link-more{display:inline-flex;align-items:center;gap:5px;transition:gap .3s var(--ease-out)} .link-more:hover{gap:10px} /* ===== 报名卡：重排比例 ===== */ .reg-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,52px); align-items:center;background:var(--bg-subtle);border-radius:26px; padding:clamp(28px,3.6vw,44px) clamp(28px,3.8vw,46px);margin-bottom:0;flex-wrap:nowrap; position:relative;overflow:hidden} .reg-card::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(46% 120% at 100% 0%,rgba(30,138,224,.10),transparent 64%)} .reg-left{position:relative;z-index:1;min-width:0} .reg-tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff; background:linear-gradient(120deg,var(--blue-600),var(--blue-700)); padding:5px 13px;border-radius:var(--radius-pill);margin-bottom:14px} .reg-tag .dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9; animation:blink 1.8s ease-in-out infinite} @keyframes blink{0%,100%{opacity:.35}50%{opacity:1}} .reg-title{font-size:clamp(20px,2.5vw,27px);font-weight:700;letter-spacing:-.015em;margin-bottom:7px} .reg-meta{color:var(--text-2);font-size:14.5px;display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px} .reg-meta .sep{color:var(--text-3)} .progress-wrap{max-width:400px} .progress-top{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px; color:var(--text-2);margin-bottom:9px} .progress-top b{font-size:26px;font-weight:700;color:var(--blue-600);letter-spacing:-.02em; font-variant-numeric:tabular-nums;line-height:1} .progress-bar{height:7px;background:rgba(18,115,182,.14);border-radius:var(--radius-pill);overflow:hidden;margin-top:0} /* 关掉 design.css 里 progress-fill 的 CSS transition：改由 GSAP 驱动 */ .progress-fill{height:100%;width:0;border-radius:var(--radius-pill);transition:none; background:linear-gradient(90deg,var(--blue-500),var(--blue-600))} .reg-count{display:flex;gap:clamp(20px,3vw,38px);position:relative;z-index:1} .reg-card .count-item{text-align:center} .reg-card .count-num{font-size:clamp(28px,3.4vw,40px);font-weight:700;color:var(--blue-700);line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .reg-card .count-num.small{font-size:clamp(20px,2.4vw,26px)} .reg-card .count-lb{font-size:11.5px;color:var(--text-2);margin-top:7px;font-weight:500} .reg-btn{justify-self:end} /* ===== 四大板块：bento（1 主 + 3 次）===== */ .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto;gap:16px} .bf{position:relative;display:flex;flex-direction:column;justify-content:space-between; background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px; min-height:172px;overflow:hidden; transition:transform .4s var(--spring),box-shadow .4s,border-color .4s} .bf:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--blue-300)} .bf .ic{width:52px;height:52px;flex:none;display:flex} .bf .ic img{width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 2px 8px rgba(14,165,233,.16))} .bf-txt h3{font-size:17px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em} .bf-txt p{color:var(--text-2);font-size:13px;line-height:1.5} .bf .go{position:absolute;top:22px;right:22px;color:var(--blue-600);font-size:17px; opacity:0;transform:translate(-6px,4px);transition:all .35s var(--ease-out)} .bf:hover .go{opacity:1;transform:translate(0,0)} /* 主卡：跨 2 列 2 行，深色视觉锚点 */ .bf--lead{grid-column:span 2;grid-row:span 2;padding:30px;min-height:290px; justify-content:flex-start;color:#fff;border-color:transparent; background:linear-gradient(150deg,var(--blue-700),var(--blue-900))} .bf--lead h3{font-size:clamp(24px,2.8vw,31px);letter-spacing:-.02em;margin-bottom:12px} .bf--lead p{color:rgba(255,255,255,.76);font-size:14.5px;max-width:34ch;line-height:1.6} .bf--lead .ic{width:64px;height:64px;margin-bottom:auto} .bf--lead .ic img{filter:brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0,0,0,.3));opacity:.92} .bf--lead .lead-foot{margin-top:26px;display:flex;align-items:center;gap:9px; font-size:14px;font-weight:600;color:#fff} .bf--lead .lead-foot .arw{transition:transform .3s var(--ease-out)} .bf--lead:hover .lead-foot .arw{transform:translateX(4px)} .bf--lead::after{content:"";position:absolute;right:-15%;top:-25%;width:62%;aspect-ratio:1; border:1px solid rgba(255,255,255,.11);border-radius:50%;pointer-events:none} .bf--lead .go{display:none} /* ===== 赛果：时间轴轨道 ===== */ .tl{position:relative;max-width:880px} .tl::before{content:"";position:absolute;left:74px;top:8px;bottom:8px;width:1px; background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent)} .tl-row{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr) auto; gap:clamp(14px,2.4vw,26px);align-items:center;padding:17px 18px 17px 0; border-radius:14px;transition:background .3s;margin:0} .tl-row:hover{background:rgba(18,115,182,.035)} .tl-row + .tl-row{margin-top:2px} .tl-dot{position:absolute;left:74px;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px; border-radius:50%;background:#fff;border:2px solid var(--blue-300);z-index:2} .tl-row.is-up .tl-dot{border-color:var(--warning)} .tl-row.is-win .tl-dot{background:var(--success);border-color:var(--success)} .tl-row.is-lose .tl-dot{background:var(--danger);border-color:var(--danger)} .tl-date{text-align:right;padding-right:6px} .tl-d{font-size:23px;font-weight:700;color:var(--blue-700);line-height:1;letter-spacing:-.02em} .tl-m{font-size:11px;color:var(--text-3);margin-top:4px;font-weight:500;letter-spacing:.04em} .tl-main{min-width:0} .tl-vs{font-size:16.5px;font-weight:600;display:flex;align-items:center;gap:11px;flex-wrap:wrap; letter-spacing:-.01em} .tl-vs .sc{font-size:19px;font-weight:700;color:var(--blue-700);font-variant-numeric:tabular-nums; padding:1px 10px;background:var(--blue-100);border-radius:8px} .tl-vs .sc.win{color:var(--success);background:rgba(48,185,78,.10)} .tl-vs .sc.lose{color:var(--danger);background:rgba(229,57,53,.09)} .tl-vs .sc.soon{color:var(--blue-600);font-size:15px;padding:3px 12px} .tl-info{color:var(--text-3);font-size:12.5px;margin-top:6px;display:flex;gap:13px;flex-wrap:wrap} .tl-right{display:flex;align-items:center;gap:11px;flex:none} .tl-szn{font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.03em} .tl-row .tag-reg{color:#B8822C;background:#FFF4E0;font-size:11.5px;font-weight:600; padding:3px 10px;border-radius:var(--radius-pill);display:inline-block} .tl-row .chip{font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:var(--radius-pill);flex:none} .chip-win{color:var(--success);background:rgba(48,185,78,.12)} .chip-lose{color:var(--danger);background:rgba(229,57,53,.11)} .chip-draw{color:var(--text-2);background:var(--bg-subtle)} .chip-soon{color:var(--blue-600);background:var(--blue-100)} /* ===== 射手榜：前三名台阶 + 其余清单 ===== */ .scorers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(22px,3.4vw,44px);align-items:start} .podium{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:12px;align-items:end} .pod{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 14px;text-align:center; transition:transform .45s var(--spring),box-shadow .45s} .pod:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .pod--1{border-color:rgba(18,115,182,.32);box-shadow:0 10px 28px rgba(18,115,182,.13)} .pod-rk{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-3);margin-bottom:11px} .pod--1 .pod-rk{color:var(--warning)} .pod-av{width:52px;height:52px;border-radius:50%;margin:0 auto 11px;overflow:hidden; background:linear-gradient(140deg,var(--blue-500),var(--blue-700));color:#fff; display:flex;align-items:center;justify-content:center;font-weight:600;font-size:19px} .pod-av img{width:100%;height:100%;object-fit:cover} .pod--1 .pod-av{width:62px;height:62px;font-size:22px} .pod--1 .pod-av img{font-size:inherit} .pod-nm{font-size:14.5px;font-weight:600;margin-bottom:3px} .pod-ps{font-size:11px;color:var(--text-3);margin-bottom:9px} .pod-n{font-size:30px;font-weight:700;color:var(--blue-700);line-height:1;letter-spacing:-.035em; font-variant-numeric:tabular-nums} .pod--1 .pod-n{font-size:38px} .pod-n sup{font-size:12px;font-weight:500;color:var(--text-3);margin-left:2px;letter-spacing:0} .pod-bar{height:4px;border-radius:99px;background:var(--blue-100);margin-top:13px;overflow:hidden} .pod-bar i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--blue-500),var(--blue-600))} .rest{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 22px} .rest-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid rgba(0,0,0,.05)} .rest-row:last-child{border-bottom:none} .rest-rk{width:20px;font-size:12px;font-weight:700;color:var(--text-3);text-align:center;flex:none} .rest-av{width:32px;height:32px;border-radius:50%;background:var(--blue-100);color:var(--blue-700); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none; overflow:hidden} .rest-av img{width:100%;height:100%;object-fit:cover} .rest-nm{flex:1;font-size:14.5px;font-weight:500;min-width:0} .rest-n{font-size:17px;font-weight:700;color:var(--blue-700);font-variant-numeric:tabular-nums} .rest-n sup{font-size:10.5px;font-weight:500;color:var(--text-3);margin-left:1px} .scorers-empty{background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px 22px; text-align:center;color:var(--text-3);font-size:14px} /* ===== 名单：横向滚动轨道 ===== */ .roster-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 20px; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--blue-300) transparent} .roster-strip::-webkit-scrollbar{height:5px} .roster-strip::-webkit-scrollbar-track{background:var(--bg-subtle);border-radius:99px} .roster-strip::-webkit-scrollbar-thumb{background:var(--blue-300);border-radius:99px} .pl{flex:none;width:142px;scroll-snap-align:start;background:#fff;border:1px solid var(--line); border-radius:18px;padding:20px 12px 18px;text-align:center; transition:transform .4s var(--spring),box-shadow .4s,border-color .4s} .pl:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--blue-300)} .pl-av{width:58px;height:58px;border-radius:50%;margin:0 auto 12px;overflow:hidden} .pl-av img{width:100%;height:100%;object-fit:cover} .pl-av .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-weight:600;font-size:22px;color:#fff; background:linear-gradient(140deg,var(--blue-500),var(--blue-700))} .pl-no{font-size:11px;color:var(--text-3);font-weight:600;font-variant-numeric:tabular-nums} .pl-nm{font-size:15.5px;font-weight:600;margin:3px 0 7px;letter-spacing:-.01em} .pl-ps{display:inline-block;font-size:11px;color:var(--blue-600);background:var(--blue-100); padding:2px 10px;border-radius:var(--radius-pill);font-weight:500} .pl-ps--muted{color:var(--text-3);background:var(--bg-subtle)} /* ===== 财务：数字优先 ===== */ .fin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,34px); border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,40px)} .fin-i{position:relative;padding-left:20px} .fin-i::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px; background:var(--line)} .fin-i.is-income::before{background:linear-gradient(180deg,var(--blue-500),var(--blue-600))} .fin-i.is-balance::before{background:linear-gradient(180deg,var(--blue-600),var(--blue-700))} .fin-lb{font-size:12.5px;color:var(--text-2);font-weight:500;margin-bottom:9px} .fin-v{font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1; font-variant-numeric:tabular-nums} .fin-v .cur{font-size:.55em;font-weight:600;color:var(--text-3);margin-right:5px;letter-spacing:0} .fin-i.is-income .fin-v{color:var(--blue-700)} .fin-i.is-expense .fin-v{color:var(--text)} .fin-i.is-balance .fin-v{color:var(--blue-600)} .fin-note{font-size:12.5px;color:var(--text-3);margin-top:9px} /* ===== 滚动提示 ===== */ .scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)} .scroll-hint .bar{width:1px;height:34px;background:linear-gradient(180deg,var(--blue-300),transparent)} /* ===== 动效初态：只在 JS 就绪时才隐藏，避免白屏 ===== */ .js-on .rise{opacity:0;transform:translateY(26px)} .js-on .fade{opacity:0} /* ===== 响应式 ===== */ @media(max-width:1024px){ .hero-in{grid-template-columns:1fr;gap:38px;align-items:start} .hero-side{max-width:420px} .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .bf--lead{grid-column:span 2;grid-row:auto;min-height:230px} .scorers{grid-template-columns:1fr} .fin{grid-template-columns:1fr 1fr} } @media(max-width:900px){.nav-links{display:none}} @media(max-width:768px){ .hero{padding-top:52px} .pitch-line,.pitch-circle{display:none} .reg-card{grid-template-columns:1fr;gap:28px} .reg-count{justify-content:space-between;width:100%} .reg-btn{justify-self:stretch;text-align:center} .sec-head--row{flex-direction:column;align-items:flex-start;gap:12px} .tl::before{left:0} .tl-row{grid-template-columns:minmax(0,1fr) auto;padding-left:24px;gap:12px} .tl-dot{left:0} .tl-date{grid-column:1/-1;text-align:left;padding-right:0;display:flex;align-items:baseline;gap:8px} .tl-d{font-size:17px} .tl-m{margin-top:0} .fin{grid-template-columns:1fr;gap:22px} .podium{grid-template-columns:1fr 1fr 1fr;gap:9px} .pod{padding:16px 9px} .pod-av,.pod--1 .pod-av{width:44px;height:44px;font-size:17px;margin-bottom:9px} .pod-n{font-size:24px}.pod--1 .pod-n{font-size:28px} .pod-nm{font-size:13px}.pod-ps{display:none} .scroll-hint{display:none} } @media(max-width:560px){ .bento{grid-template-columns:1fr;gap:12px} .bf--lead{grid-column:auto;min-height:210px} .bf{min-height:148px} .rest{padding:6px 16px} .pl{width:126px} } @media(prefers-reduced-motion:reduce){ .js-on .rise{opacity:1;transform:none} .js-on .fade{opacity:1} .hero-bg{transform:none!important} }