参考 FIFA 官网的设计风格与视觉语言，构建的足球资讯 / 赛事直播平台。本文说明主题定位、视觉体系、页面结构、功能模块、响应式策略与交互逻辑。
PITCH 是一个以「全球职业足球赛事」为核心的体育资讯 + 赛事直播 + 数据服务门户。核心用户是有固定观赛习惯的球迷，他们在赛前需要赛程与预告，赛中需要比分与直播，赛后需要战报、集锦与数据回顾。
新闻资讯、战报、战术解析、人物专访 —— 解决「发生了什么」。
比分直播、赛程表、直播入口 —— 解决「现在怎么样」。
积分榜、射手榜、球队攻防效率 —— 解决「为什么和有多强」。
沿用 FIFA 官网的核心视觉逻辑：深色画布承载高饱和强调色，用巨大的无衬线压缩字形制造竞技张力，用斜切、圆环、速度线等几何元素营造动态感，用发光色块与玻璃拟态提升层次。红色只用于「直播 / 突发」，形成单一语义，让用户在 0.3 秒内识别出「正在发生」。辅助文字色 --txt-3 定为 #7D8698（深空黑底 5.47:1、抬升面 4.79:1），满足 WCAG AA。
整站以 1320px 容器 + 28px 安全边距 为基准。粘性主导航常驻顶部，向下滚动 60px 后高度由 66px 收缩至 58px、背景加深，为内容让出空间。首页遵循「实时 → 资讯 → 数据 → 视频 → 转化」的注意力漏斗从上到下排列。
主导航按用户任务的时间顺序排列：先看资讯、再看比赛、最后看数据与视频，形成从「读」到「看」再到「查」的自然路径。当前页用青柠色下划线标示，直播入口带脉冲红点提示存在进行中内容。
| 一级导航 | 承载内容 | 默认落地 |
|---|---|---|
| 首页 | 全部内容的聚合与推荐流，编辑精选 | 本页 |
| 新闻 | 战报 / 转会 / 战术 / 人物四个子频道 | 焦点新闻区 |
| 赛程 | 按日期、赛事、状态筛选的赛程表 | 今日赛程区 |
| 直播 | 进行中比赛列表与播放器入口 | 视频集锦区 |
| 数据 | 积分榜、射手榜、球队与球员深度数据 | 数据中心 |
| 视频 | 集锦、回放、战术板、花絮 | 视频集锦区 |
| 球队 | 俱乐部主页矩阵 | 球队专区 |
| 商城 | 衍生电商，独立域名 / 独立模块 | 外链 |
采用 1 大 + 5 小 的混合信息密度：左侧头图卡负责情绪与点击，右侧列表负责广度。列表项悬停右移 5px，形成「被选中」的物理感。
以卡片网格而非传统表格呈现当日比赛，每卡固定结构：状态行 → 主队 → 客队 → 球场与动作。
左侧是可切换标签的榜单表格（积分榜 / 射手榜），右侧是攻防效率可视化。两者并置，把「排名」与「成因」放在同一视野内。
横向滚动轨道，一张卡一个内容单元，避免纵向拉长页面。卡片比例为 16:9，中央常驻半透明播放按钮。
采用 移动优先的渐进增强 思路，设置四个临界点。所有多列布局在窄屏下降列而不隐藏（视频轨道除外，改为横向滑动保留全部内容），保证信息不丢失。
| 断点 | 设备 | 关键变化 |
|---|---|---|
| ≥ 1180px | 桌面 | 完整 12 栏布局；Hero 双栏；新闻 1.35 : 1；数据 1.45 : 1；球队 6 列 |
| 900–1179px | 小桌面 / 平板横屏 | Hero 改单栏堆叠；新闻与数据改单栏；赛程 2 列；球队 4 列 |
| 680–899px | 平板竖屏 | 主导航折叠为汉堡抽屉；KPI 2 列；CTA 改单栏 |
| < 680px | 手机 | 赛程单列；球队 3 列；工具条精简；视频卡宽 80% 便于手势滑动；表格横向内收 |
移动端主导航改为右侧滑出抽屉，导航项使用显示字号并加大行距，降低误触。抽屉开启时锁定页面滚动，点击任意链接或遮罩自动关闭。
入场动画使用 IntersectionObserver，同一批元素按 70ms 递增延迟，形成瀑布节奏。动画只播一次，避免重复干扰阅读。
所有动态元素在 prefers-reduced-motion 下自动停止，兼顾无障碍与低性能设备。
aria-pressed 同步。赛程按状态（进行中 / 未开始 / 已结束）过滤卡片；新闻按分类（战报 / 转会 / 战术 / 人物 / 深度）过滤。焦点大卡同步跟随筛选，被筛掉时列表自动补位为双列；无结果时显示空状态提示。全程前端过滤，不跳转、不重载-5px ~ -6px，过渡曲线 cubic-bezier(.2,.8,.2,1)页脚承担「全局兜底导航 + 信任建立」两个职责。采用 1 品牌栏 + 4 链接栏 的五栏结构，品牌栏宽度为普通栏的 1.6 倍，用于承载简介与社交入口。
| 栏目 | 内容 | 设计意图 |
|---|---|---|
| 品牌栏 | Logo、一句话简介、微博 / 微信 / 抖音 / B站 / YouTube | 建立身份与官方渠道可信度 |
| 赛事 | 实时比分、赛程日历、积分榜、射手榜、赛事直播 | 承接高频观赛需求 |
| 内容 | 新闻中心、视频集锦、战术解析、球员档案、专题策划 | 内容矩阵全量入口 |
| 服务 | 会员订阅、移动应用、数据 API、商务合作、帮助中心 | 商业与转化路径 |
| 关于 | 公司简介、编辑团队、加入我们、联系方式、媒体报道 | 企业信息与招贤 |
| 法务底栏 | 版权声明、服务条款、隐私政策、Cookie 设置、无障碍声明、语言切换 | 合规与无障碍承诺 |
移动端页脚由五栏折叠为 2 栏 + 全宽品牌栏，法务底栏转为纵向排列，保证触控目标不小于 44px。
深色主题最容易在对比度与焦点可见性上失守，这两项按硬性约束处理；同时对脚本失效、旧浏览器等异常路径做了兜底，避免出现整页空白。
| 项目 | 做法 | 解决的问题 |
|---|---|---|
| 文字对比度 | 辅助色 --txt-3 = #7D8698，深空黑底 5.47:1、抬升面 4.79:1 | 原 #5E6675 仅 3.46:1 / 3.04:1，小字不达 WCAG AA |
| 焦点可见 | 全局 :focus-visible 青柠焦点环；订阅输入框用 :focus-within 高亮边框 | 深色背景下浏览器默认焦点环几乎不可见，键盘用户会迷路 |
| 脚本失效兜底 | 入场动画作用域收在 .js 类下；IntersectionObserver 不可用时直接显示全部内容 | JS 未执行时整页 opacity:0，页面永久白屏 |
[hidden] 兜底 | 显式声明 [hidden]{display:none!important} | .ni{display:grid} 等组件规则会覆盖 UA 的 [hidden]，导致筛选看似无效 |
| 锚点跳转 | 目标区块设置 scroll-margin-top:88px | 粘性导航会遮住跳转后的区块标题 |
| 键盘操作 | 标签页支持方向键切换并同步 aria-selected；Esc 关闭抽屉与搜索浮层；开合时同步 aria-hidden 并把焦点归还触发按钮 | 浮层无法用键盘退出、状态对读屏器不可见 |
| 窄屏数据完整 | 表格外套横向滚动容器，窄屏下 min-width:560px | 面板 overflow:hidden 会把右侧列直接裁掉，造成数据丢失 |
| 移动端筛选 | 切片容器补 min-width:0，配合 overflow-x:auto 横向滑动 | flex 子项默认不可收缩，切片会撑破视口而不是滚动 |
| 减弱动效 | prefers-reduced-motion 下关闭跑马灯并禁用所有过渡 | 避免动画引发不适，同时让低端设备更流畅 |
| Safari 兼容 | 玻璃拟态补 -webkit-backdrop-filter 前缀 | Safari 不识别标准属性时毛玻璃效果会整体丢失 |
完整可运行的响应式首页原型。单文件、零外部依赖（字体走系统栈，图形全部由 CSS/SVG 生成），双击即可在浏览器打开。
本文件。设计规范与结构说明，可直接作为交付文档或团队协作基线。