/* ============================================================ AOA体育 · 赛场数据台 — 共享站点样式表 /assets/site.css 骨架：展览画册 × 夜间数据指挥台 ============================================================ */ /* ------------------------------------------------------------ 01 重置 ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dt, dd, fieldset, legend { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th { text-align: left; font-weight: 500; } hr { border: 0; height: 1px; background: var(--line); } /* ------------------------------------------------------------ 02 变量：明快运动色的面积分配 ------------------------------------------------------------ */ :root { /* 底色与面板 */ --ink: #0B2A21; /* 夜草墨绿 · 全站主底 */ --ink-deep: #061A14; /* 更深的收束底 */ --panel: #123B2E; /* 面板深绿 · 卡片与导航 */ --mid: #1E5C43; /* 草皮中绿 · 分隔与斑马纹 */ --grass: #4FBF7A; /* 草皮高亮绿 · 刻度与正增长 */ /* 高亮色 */ --orange: #FF6A1A; /* 警示橙 · CTA 与关键数字 */ --yellow: #FFD23F; /* 黄牌黄 */ --red: #E23B2E; /* 红牌红 */ /* 主客对照 */ --away: #35C4D8; /* 客场冷青 */ --home: #F0A63C; /* 主场暖琥珀 */ /* 文字与线 */ --paper: #F4F7F5; --note: #8FA79B; --on-warm: #1A0E02; --on-cool: #04222A; --line: rgba(244, 247, 245, 0.13); --line-2: rgba(244, 247, 245, 0.26); --hair: rgba(244, 247, 245, 0.06); /* 形状 */ --pill: 999px; --sharp: 3px; /* 当前口径强调色，由 驱动 */ --scope-accent: var(--home); /* 字体 */ --font-body: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* 栅格 */ --gutter: clamp(16px, 3vw, 40px); --maxw: 1440px; } :root[data-scope="home"] { --scope-accent: var(--home); } :root[data-scope="away"] { --scope-accent: var(--away); } /* ------------------------------------------------------------ 03 中文排版基础 ------------------------------------------------------------ */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 17px; line-height: 1.75; letter-spacing: 0.012em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { display: block; } h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height: 1.14; letter-spacing: 0.01em; } h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 300; letter-spacing: 0.02em; } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 300; } h3 { font-size: clamp(1.12rem, 1.7vw, 1.35rem); font-weight: 400; line-height: 1.3; } h4 { font-size: 1rem; font-weight: 500; line-height: 1.4; } p, li, dd, figcaption { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } strong, b { font-weight: 600; } ::selection { background: var(--orange); color: var(--on-warm); } /* 焦点反馈 —— 键盘可用性 */ :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 106, 26, 0.2); } /* 降低动效偏好 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ 04 布局工具 ------------------------------------------------------------ */ .wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: calc(820px + var(--gutter) * 2); } .section { position: relative; padding-block: clamp(48px, 7vw, 96px); } .section--tight { padding-block: clamp(28px, 4vw, 56px); } .section--air { padding-block: clamp(72px, 11vw, 160px); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap, clamp(16px, 2vw, 32px)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------ 05 文字层级组件 ------------------------------------------------------------ */ .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; } .note { font-size: 12.5px; line-height: 1.7; letter-spacing: 0.05em; color: var(--note); } .chapter-index { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--note); } .chapter-index::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2); } /* ------------------------------------------------------------ 06 按钮 ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: var(--pill); background: transparent; color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: 0.07em; white-space: nowrap; transition: transform 0.16s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .btn--cta { background: var(--orange); border-color: var(--orange); color: var(--on-warm); font-weight: 700; } .btn--cta:hover { background: #FF7E36; border-color: #FF7E36; transform: translateY(-2px); } .btn--ghost:hover { border-color: var(--grass); color: var(--grass); transform: translateY(-2px); } .btn--quiet { border-color: transparent; padding-inline: 6px; color: var(--grass); } .btn--quiet:hover { color: var(--paper); } /* ------------------------------------------------------------ 07 面包屑（页面主体使用） ------------------------------------------------------------ */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 0.08em; color: var(--note); } .breadcrumb__sep { color: var(--mid); } .breadcrumb__link { color: rgba(244, 247, 245, 0.7); transition: color 0.18s ease; } .breadcrumb__link:hover { color: var(--grass); } .breadcrumb__current { color: var(--paper); } /* ------------------------------------------------------------ 08 媒体容器（页面阶段放图片占位） ------------------------------------------------------------ */ .media { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--sharp); background-color: var(--panel); background-image: repeating-linear-gradient( 90deg, rgba(79, 191, 122, 0.06) 0 34px, rgba(79, 191, 122, 0) 34px 68px ); } .media > img, .media > svg, .media > video { width: 100%; height: 100%; object-fit: cover; } .media--16x9 { aspect-ratio: 16 / 9; } .media--21x9 { aspect-ratio: 21 / 9; } .media--4x3 { aspect-ratio: 4 / 3; } .media--1x1 { aspect-ratio: 1 / 1; } .media--tall { aspect-ratio: 3 / 4; } .media__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--paper); background: linear-gradient( 180deg, rgba(6, 26, 20, 0) 0%, rgba(6, 26, 20, 0.88) 78% ); } /* ------------------------------------------------------------ 09 页头：悬浮胶囊浮岛 ------------------------------------------------------------ */ .skip-link { position: absolute; left: 16px; top: -72px; z-index: 320; padding: 10px 20px; border-radius: var(--pill); background: var(--orange); color: var(--on-warm); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; transition: top 0.18s ease; } .skip-link:focus { top: 12px; } .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient( 90deg, var(--grass) 0%, var(--scope-accent) 62%, var(--orange) 100% ); z-index: 240; pointer-events: none; will-change: transform; } .site-header { position: sticky; top: 0; z-index: 120; padding: clamp(10px, 1.4vw, 18px) var(--gutter) 10px; background: linear-gradient( 180deg, rgba(11, 42, 33, 1) 0%, rgba(11, 42, 33, 0.95) 58%, rgba(11, 42, 33, 0) 100% ); } .site-header__shell { width: 100%; max-width: var(--maxw); margin-inline: auto; } .site-header__bar { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(10px, 1.4vw, 22px); padding: 7px 7px 7px clamp(12px, 1.4vw, 20px); border: 1px solid var(--line); border-radius: var(--pill); background: rgba(18, 59, 46, 0.9); box-shadow: 0 22px 46px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(244, 247, 245, 0.05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* 品牌 */ .brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 4px 6px; border-radius: var(--sharp); } .brand__mark { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid rgba(79, 191, 122, 0.5); background: repeating-linear-gradient( 90deg, rgba(30, 92, 67, 0.95) 0 4px, rgba(18, 59, 46, 0.95) 4px 8px ); } .brand__mark::before { content: ""; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 1px; background: rgba(244, 247, 245, 0.35); } .brand__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--scope-accent); } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand__name { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; } .brand__sub { font-size: 10.5px; letter-spacing: 0.24em; color: var(--note); } /* 导航胶囊 */ .nav { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; } .nav__list { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--hair); border-radius: var(--pill); background: rgba(11, 42, 33, 0.6); } .nav__item { display: flex; } .nav__link { display: block; padding: 8px 14px; border-radius: var(--pill); font-size: 14.5px; letter-spacing: 0.05em; color: rgba(244, 247, 245, 0.74); transition: background-color 0.18s ease, color 0.18s ease; } .nav__link:hover { background: rgba(79, 191, 122, 0.14); color: var(--paper); } .nav__link[aria-current="page"] { background: var(--scope-accent); color: var(--on-warm); font-weight: 600; } /* 页头工具区 */ .site-header__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; } .scope { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); background: rgba(11, 42, 33, 0.7); } .scope__btn { padding: 6px 12px; border-radius: var(--pill); font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; color: var(--note); transition: background-color 0.18s ease, color 0.18s ease; } .scope__btn:hover { background: rgba(244, 247, 245, 0.08); color: var(--paper); } .scope__btn[data-scope-toggle="home"][aria-pressed="true"] { background: var(--home); color: var(--on-warm); font-weight: 700; } .scope__btn[data-scope-toggle="away"][aria-pressed="true"] { background: var(--away); color: var(--on-cool); font-weight: 700; } /* 移动菜单按钮 */ .nav-toggle { display: none; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: 13px; letter-spacing: 0.12em; color: var(--paper); transition: border-color 0.18s ease, color 0.18s ease; } .nav-toggle:hover { border-color: var(--grass); color: var(--grass); } .nav-toggle__bars { position: relative; width: 16px; height: 10px; flex: 0 0 auto; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.2s ease; } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { bottom: 0; } .site-header[data-open] .nav-toggle__bars::before { transform: translateY(4.25px) rotate(45deg); } .site-header[data-open] .nav-toggle__bars::after { transform: translateY(-4.25px) rotate(-45deg); } /* 样本区间提示条 */ .site-header__meta { padding: 8px 22px 0; font-size: 12px; letter-spacing: 0.08em; color: var(--note); } .site-header__meta-key { display: inline-block; margin-right: 8px; padding: 2px 9px; border: 1px solid rgba(255, 210, 63, 0.42); border-radius: var(--pill); color: var(--yellow); font-size: 11px; letter-spacing: 0.14em; } /* ------------------------------------------------------------ 10 页脚 ------------------------------------------------------------ */ .site-footer { position: relative; margin-top: clamp(72px, 12vw, 160px); border-top: 1px solid var(--line); background: var(--ink-deep); overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 260px; background: repeating-linear-gradient( 90deg, rgba(79, 191, 122, 0.05) 0 72px, rgba(79, 191, 122, 0) 72px 144px ); pointer-events: none; } .site-footer__inner { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(48px, 7vw, 88px) var(--gutter) 0; } .site-footer__grid { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(120px, 1fr)) minmax(220px, 1.6fr); gap: clamp(24px, 3.4vw, 56px); } .site-footer__brand .brand { padding: 0; } .site-footer__tagline { margin-top: 14px; max-width: 30ch; font-size: 14px; line-height: 1.7; color: var(--note); } .footer-nav__title { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; color: var(--paper); } .footer-nav__list { display: flex; flex-direction: column; gap: 10px; } .footer-nav__link { position: relative; display: inline-block; padding-left: 15px; font-size: 14px; line-height: 1.5; color: rgba(244, 247, 245, 0.72); transition: color 0.18s ease; } .footer-nav__link::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 6px; height: 1px; background: var(--mid); transition: width 0.18s ease, background-color 0.18s ease; } .footer-nav__link:hover { color: var(--grass); } .footer-nav__link:hover::before { width: 10px; background: var(--grass); } .contact-list { display: flex; flex-direction: column; gap: 12px; } .contact-list__item { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; } .contact-list__key { flex: 0 0 auto; min-width: 42px; color: var(--note); letter-spacing: 0.12em; } .contact-list__val { color: rgba(244, 247, 245, 0.86); word-break: break-word; } .contact-list__val--mono { font-family: var(--font-mono); letter-spacing: 0.02em; } .site-footer__note { margin-top: 16px; max-width: 42ch; font-size: 12px; line-height: 1.7; color: var(--note); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(16px, 3vw, 40px); margin-top: clamp(40px, 6vw, 72px); padding: 22px 0 30px; border-top: 1px solid var(--line); font-size: 12.5px; letter-spacing: 0.08em; color: var(--note); } .site-footer__copy { margin-right: auto; } .site-footer__icp { font-family: var(--font-mono); letter-spacing: 0.06em; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; } .site-footer__legal-link { color: rgba(244, 247, 245, 0.66); transition: color 0.18s ease; } .site-footer__legal-link:hover { color: var(--grass); } /* ------------------------------------------------------------ 11 响应式：平板与手机 ------------------------------------------------------------ */ @media (max-width: 1180px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; } .site-footer__contact { max-width: 640px; } } @media (max-width: 1080px) { .site-header { padding-bottom: 6px; } .site-header__bar { flex-wrap: wrap; border-radius: 22px; padding: 8px 10px; } .nav-toggle { display: inline-flex; } .nav { display: none; flex: 1 1 100%; order: 3; justify-content: stretch; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .site-header[data-open] .nav { display: flex; } .nav__list { flex: 1 1 auto; flex-direction: column; align-items: stretch; width: 100%; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; } .nav__item { width: 100%; } .nav__link { padding: 13px 16px; border-radius: 10px; font-size: 16px; letter-spacing: 0.06em; } .site-header__meta { padding-inline: 6px; } } @media (max-width: 900px) { body { font-size: 16px; } .site-header__meta { font-size: 11.5px; letter-spacing: 0.04em; } } @media (max-width: 720px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .nav-toggle { padding: 8px 11px; } .nav-toggle__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .scope__btn { padding: 6px 9px; font-size: 11.5px; letter-spacing: 0.08em; } .brand__sub { display: none; } .brand__name { font-size: 14px; } .btn--cta { padding: 9px 13px; font-size: 13px; letter-spacing: 0.04em; } } @media (max-width: 460px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } .site-footer__bottom { flex-direction: column; align-items: flex-start; } .site-footer__copy { margin-right: 0; } }