/* ══ 全站共享样式 ══════════════════════════════════════════════════ 首页、列表页、文章页共用。抽出来的理由很实际：三份 header 和三份 i18n 各抄一遍，改一处就会漏两处 —— 而漏了不报错，只是慢慢长得不一样。 */ :root{ --plum:#37003c; --plum-2:#2a002e; --plum-3:#4a0a52; --orchid:#963cff; --orchid-2:#b276ff; --paper:#fff; --paper-2:#f6f4f7; /* 灰阶，对白底的对比度都算过（WCAG，正文要 4.5:1）： --ink 18.86 标题正文 --ink-2 9.91 次要正文 --ink-3 5.66 时间、来源名、副标题这类小字 ← **原来是 #8d8294，只有 3.65，全站的时间戳/城市名/页脚说明都不达标** --ink-4 2.07 **只能用于装饰**（占位块、禁用态、分隔线）， 绝不用来写需要读的字 在浅灰底 #f6f4f7 上（药丸、卡片悬停）ink-2 = 9.07、ink-3 = 5.18，也过线。 */ --ink:#1c0a20; --ink-2:#4a3f50; --ink-3:#6e6376; --ink-4:#b9b2bd; --line:#e9e5eb; --line-2:#f0edf2; /* 胜平负。**这三个色块上压白字，所以颜色本身要够深**： 原来的 #0f9d58 / #d99400 / #d92d20 配白字只有 3.51 / 2.57 / 4.83 —— 近五场那排 15px 的小方块里，"W" 和 "D" 基本看不清。 现在 5.41 / 5.31 / 6.52，都过 4.5。 */ --win:#0b7a44; --draw:#8f6300; --loss:#b81d12; /* 样板里的两个关键颜色：青色 chip 和亮紫强调带。之前只有紫， 所以整站没有"提示色" —— 标签、当前项、强调数字都只能靠紫的深浅， 结果就是"有型但没有重点"。 */ --teal:#00e0c6; --teal-ink:#00312c; /* 照片上的遮罩。样板每一张人物图都压了这个 —— 没有它，白字压在 浅色照片上会糊，而且照片和色块之间没有过渡，看着像贴上去的。 */ --veil-b:linear-gradient(to top,rgba(20,0,24,.94) 0%,rgba(20,0,24,.55) 26%, rgba(20,0,24,.08) 58%,transparent 78%); --veil-l:linear-gradient(100deg,rgba(55,0,60,.92) 0%,rgba(55,0,60,.6) 30%, rgba(55,0,60,.15) 58%,transparent 80%); --gut:clamp(16px,3vw,44px); --wrap:1460px; /* 英文字体照 app 的 Typeface.swift：Plus Jakarta Sans。 它不含 CJK 字形，所以中文回退思源黑体 —— 这也是 app 界面用英文的原因。 */ --sans:"Plus Jakarta Sans","Noto Sans SC",-apple-system,BlinkMacSystemFont, "PingFang SC",sans-serif; /* 动效只用这几档。**时长和曲线各页不许自己再编一套** —— 之前全站有 .14/.15/.16/.18/.2/.22/.25s 七八种时长、ease 和三四条贝塞尔混着用，同一种「点开」在这页弹、在那页滑，看着就不是一个站。 --ease-out 绝大多数进场：起步快、落定软（展开、浮层、内容出现） --ease-io 来回的位移（加载动画、滑块在两个位置之间走） --ease-spring 小元素的「弹一下」（logo 悬停、选中态落定），只许用在 30px 以下的东西上 --t-fast 颜色、描边这类不占位的变化 --t-base 浮层、按钮、选中态 --t-slow 展开收起、抽屉、换整块内容 */ --ease-out:cubic-bezier(.22,.7,.2,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.3,1.4,.5,1); --t-fast:.14s; --t-base:.22s; --t-slow:.34s; --t-header:.48s; } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink); font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} ::selection{background:var(--orchid);color:#fff} /* 所有数字等宽。app 的 Typeface.tabularFigures 就是这个用意：数字一变， 周围的字不能跟着晃。比分、倒计时、积分每次刷新都在变。 */ .n,.cdcell b,.stbl td,.fxr .tm,.lc-row .rk,.lc-row .vl,.lc-hero .big{ font-variant-numeric:tabular-nums} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} /* 顶栏是吸顶的，所以跳到锚点时要给它让出高度 —— 否则该区块的标题正好被顶栏盖住，看起来像"跳错了地方"。 */ :target,section[id]{scroll-margin-top:76px} /* 占位块：一道光从左往右扫过去。 原来是整块一明一暗地闪 —— 闪烁读起来像「出错了在重试」，扫光读起来是「在来的路上」。 */ .skl{background:var(--paper-2) linear-gradient(100deg,rgba(255,255,255,0) 38%, rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 62%) 100% 0/300% 100% no-repeat; animation:mp-shimmer 1.5s linear infinite;border-radius:3px} .skl-d{background:rgba(255,255,255,.07) linear-gradient(100deg,rgba(255,255,255,0) 38%, rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 62%) 100% 0/300% 100% no-repeat; animation:mp-shimmer 1.5s linear infinite} @keyframes mp-shimmer{from{background-position:100% 0}to{background-position:0 0}} @keyframes pulse{50%{opacity:.5}} /* ══ 顶栏 ══ **页顶是透明的，压在每一页的深色刊头上；滚过刊头才变成白底。** 每一页最上面都有一块深色刊头 （首页大图、赛程、比赛、人物……），标了 `.mp-under` 的那块往上钻到顶栏下面，顶栏在它上面是白字、 透明底，刊头的颜色和照片一直铺到屏幕最上沿（2026-10-12 用户要求全站这样，播客区和对垒页先这么做的）。 刊头滚出顶栏以后（site.js 给 加 `tb-solid`）变回白底深字 —— 半透明白加模糊，正文从底下透过去， 所以**不画下边线**也分得开（用户指出那条线完全没必要）。当前项还是深紫实心药丸。 页面要在 上带 `tb-over` 才会这样（第一帧就要透明，等脚本来加会先闪一下白条）。 */ :root{--tb-h:62px} @media (max-width:900px){:root{--tb-h:102px}} @media (max-width:760px){:root{--tb-h:96px}} .topbar{position:sticky;top:0;z-index:60;background-color:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px); transition:background-color var(--t-slow) var(--ease-out)} /* 透明时压在照片上的一层暗：白字在亮处（天空、草皮、白球衣）也读得清。只在顶栏这一条高度里，下沿是全透明，没有接缝 */ .topbar::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(10,0,14,.5),rgba(10,0,14,.18) 62%,rgba(10,0,14,0)); transition:opacity var(--t-slow) var(--ease-out)} .mp-under{margin-top:calc(-1 * var(--tb-h))} .tb{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:62px; display:flex;align-items:center;gap:20px} .plmark{position:relative;display:flex;align-items:center;flex:none} /* 两张 logo 叠着（墨线版、白字版），透明 ⇄ 白底时交叉淡入。**不用 CSS invert**：logo 上那道紫带会反成黄绿 */ .plmark img{transition:opacity var(--t-slow) var(--ease-out)} .plmark img.lg-w{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0} html.night .plmark img{opacity:0} html.night .plmark img.lg-w{opacity:1} /* 带字的完整 logo 一张图。 **不再是"图形 + HTML 文字"**：那样字体、字距、颜色都得我在 CSS 里重新配一遍, 配出来是个"像但不是"的 logo。整张用品牌自己的图,比例和字形就都不会走样。 PNG 而不是 SVG：这套品牌的性格在手绘笔画的糙边上,描成矢量会更"干净" 但把那个味道抹掉了;2x/3x 位图在视网膜屏上足够清楚。 **只定高度**,宽度让它自己按比例走。 40px 是按顶栏量出来的：栏高 62、导航项 34、导航文字 13.5px。 30px 时字标只有 9px 高（字标占整体的 0.289），比导航文字还小一圈, 两个火柴人也挤成一团;40px 让字标到 12px,和导航文字同一个量级。 */ .plmark img{height:40px;width:auto;display:block} /* 手机上必须更小。**带字的 logo 是横向的**（宽约高的 4.7 倍）, 34px 高就是 160px 宽 —— 加上汉堡 22 和右侧那组控件 180, 360 就撑破了 390 的视口（实测文档宽 418、出现横滚）。 26px 高 ≈ 123px 宽,留得下。 */ @media (max-width:700px){.plmark img{height:26px}} @media (max-width:380px){.plmark img{height:23px}} .plmark b{font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--plum)} .tbnav{display:flex;align-items:center;gap:2px;overflow-x:auto;flex:1; scrollbar-width:none} .tbnav::-webkit-scrollbar{display:none} .tbnav a{display:flex;align-items:center;height:34px;padding:0 11px; border-radius:5px;font-size:13.5px;font-weight:600;color:var(--ink-2); white-space:nowrap;transition:background-color var(--t-base) var(--ease-out),color var(--t-fast)} /* 中等宽度（含英文）一整排导航放不下：项距收一点，比让最后一项被裁成半截、要横着拖强 */ @media (min-width:761px) and (max-width:1360px){ .tb{gap:14px} .tbnav a{padding:0 10px} } .tbnav a:hover{background:var(--paper-2);color:var(--plum)} .tbnav a.on{background:var(--plum);color:#fff} .tbright{display:flex;align-items:center;gap:8px;flex:none} .acct-slot{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px} /* 联赛切换：logo 右边的一排小标签。描边不填色，和右边的语言切换、下面的导航区分开 —— 导航是「去哪一页」，这个是「看哪个联赛」，不该长得像又一组导航。 只有公开联赛多于一个时才渲染，所以联赛开放之前这段样式没有任何元素可作用。 手机上落到顶栏下面单独一行（顶栏已经被 logo、汉堡和右侧控件占满）。 */ .lgsw{display:flex;align-items:center;gap:2px;flex:none;padding-right:14px; margin-right:-4px;border-right:1px solid var(--line)} .lgsw a{position:relative;height:30px;padding:0 6px;display:flex;align-items:center;border-radius:6px; font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap; border:1px solid transparent; transition:color var(--t-fast),border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out),padding var(--t-slow) var(--ease-out)} .lgsw a:hover{color:var(--plum);border-color:var(--line)} .lgsw a.on{color:var(--plum);border-color:var(--plum);background:var(--paper-2);padding:0 10px 0 7px} /* logo 保持原尺寸，展开的是联赛名字和旁边的空间。 */ .lgsw a .lglogo{width:18px;height:18px;flex:none} /* 平时只露 logo，选中的那个才把名字展开 —— 五个名字全摆出来，英文下顶栏放不下导航。 **展开用 grid 轨道 0fr → 1fr**：宽度跟着名字的真实长度走（Premier League 和 Serie A 差一倍）， 不用写死 max-width 去猜，也就不会出现"展开到一半突然停住"或"多留一截空白"。 名字自己再晚一拍淡入、从左滑进来，先让出位置再出字，读起来是"打开"而不是"跳出来"。 名字和 logo 之间的间距是里层 span 的 padding，跟着展开从 0 长到 6px —— padding 不会被 0fr 轨道裁掉，一直挂着的话每个收起的联赛都白占 6px。 */ .lgsw .lgname{display:grid;grid-template-columns:0fr; transition:grid-template-columns var(--t-header) var(--ease-out)} .lgsw .lgname>span{overflow:hidden;min-width:0;padding-left:0;opacity:0;translate:-6px 0; transition:opacity var(--t-fast),translate var(--t-base) var(--ease-out),padding var(--t-header) var(--ease-out)} .lgsw a.on .lgname{grid-template-columns:1fr} .lgsw a.on .lgname>span{opacity:1;translate:0 0;padding-left:6px; transition:opacity var(--t-base) var(--ease-out) .1s,translate var(--t-header) var(--ease-out), padding var(--t-header) var(--ease-out)} /* 收起的那几个名字在 title 和读屏标签里；鼠标停上去不等系统提示（要一秒多），直接在下方浮一个小签 */ @media (hover:hover) and (min-width:901px){ .lgsw a:not(.on)::after{content:attr(aria-label);position:absolute;left:50%;top:calc(100% + 8px); padding:4px 9px;border-radius:6px;background:var(--plum);color:#fff;font-size:11.5px;font-weight:650; pointer-events:none;opacity:0;translate:-50% -4px;z-index:5; transition:opacity var(--t-fast),translate var(--t-base) var(--ease-out)} .lgsw a:not(.on):hover::after{opacity:1;translate:-50% 0;transition-delay:.12s} } @media (max-width:900px){ .topbar{position:sticky} .lgsw{position:absolute;left:0;right:0;top:62px;padding:6px var(--gut); margin:0;border-right:0;overflow-x:auto} /* 绝对定位不占位，所以顶栏自己让出这一行的高度（6+28+6）。 不让的话这一行压在正文最上面 40px 上：比赛页的「返回」和「分享」被它盖住、点不到。 这一行没有自己的底色和分隔线：它是顶栏的一部分，跟着顶栏透明 / 变白。 */ .topbar:has(.lgsw){padding-bottom:40px} } /* 语言切换：分段控件。白底上用浅灰槽 + 深紫选中块 */ .langsw{display:flex;background:var(--paper-2);border-radius:999px; padding:3px;gap:2px} .langsw button{padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700; color:var(--ink-3);transition:.15s} .langsw button:hover{color:var(--plum)} .langsw button.on{background:var(--plum);color:#fff} .tbi{width:34px;height:34px;display:grid;place-items:center; color:var(--ink-2);border-radius:50%;transition:.15s} .tbi:hover{background:var(--paper-2);color:var(--plum)} .tbi svg{width:17px;height:17px} /* ── 透明的那一段（压在刊头上）：白字、透明底。颜色都跟着过渡，变白底那一下不是「啪」地一换 ── */ :is(.tbnav a,.lgsw a,.langsw button,.tbi,.tbburger){transition:color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)} .lgsw a{transition:color var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),padding var(--t-header) var(--ease-out)} html.tb-over:not(.tb-solid) .topbar{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} html.tb-over:not(.tb-solid) .topbar::before{opacity:1} html.tb-over:not(.tb-solid) .plmark img{opacity:0} html.tb-over:not(.tb-solid) .plmark img.lg-w{opacity:1} html.tb-over:not(.tb-solid) .tbnav a{color:rgba(255,255,255,.84)} html.tb-over:not(.tb-solid) .tbnav a:hover{background:rgba(255,255,255,.12);color:#fff} html.tb-over:not(.tb-solid) .tbnav a.on{background:#fff;color:var(--plum)} html.tb-over:not(.tb-solid) .lgsw{border-right-color:rgba(255,255,255,.22)} html.tb-over:not(.tb-solid) .lgsw a{color:rgba(255,255,255,.74)} html.tb-over:not(.tb-solid) .lgsw a:hover{color:#fff;border-color:rgba(255,255,255,.3)} html.tb-over:not(.tb-solid) .lgsw a.on{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.12)} html.tb-over:not(.tb-solid) .langsw{background:rgba(255,255,255,.14)} html.tb-over:not(.tb-solid) .langsw button{color:rgba(255,255,255,.72)} html.tb-over:not(.tb-solid) .langsw button:hover{color:#fff} html.tb-over:not(.tb-solid) .langsw button.on{background:#fff;color:var(--plum)} html.tb-over:not(.tb-solid) :is(.tbi,.tbburger){color:rgba(255,255,255,.88)} html.tb-over:not(.tb-solid) :is(.tbi,.tbburger):hover{background:rgba(255,255,255,.12);color:#fff} @media (max-width:760px){ /* 手机上的联赛分段控件：灰槽换成半透明白，选中块照旧是白的 */ html.tb-over:not(.tb-solid) .lgsw{background:rgba(255,255,255,.14)} html.tb-over:not(.tb-solid) .lgsw a.on{color:var(--plum);background:#fff} } /* ══ 共享原子 ══ */ .nbadge{background:var(--plum);color:#fff;font-size:10px;font-weight:800; padding:3px 8px;border-radius:3px;letter-spacing:.07em;text-transform:uppercase} /* 正文状态标签。**描边不填色** —— 它旁边就是填色的来源徽标（`.nbadge`）， 两个实心块并排会打起来，而这个标签是次要信息：读者先看的是标题和来源。 三种状态各一个颜色，但都压得很淡： 短讯 石墨色 —— 中性的"就这样"，不是警告 原文未获取 琥珀色 —— 我们这边没做到 正在补全 青色 —— 在动，等一下就有 **不要用红色。** 这三种都不是错误，红色会让一条正常的视频短讯看着像坏页面。 */ .bstate{display:inline-flex;align-items:center;font-size:10px;font-weight:700; padding:2px 7px;border-radius:3px;letter-spacing:.04em;white-space:nowrap; border:1px solid currentColor;line-height:1.5} .bstate.brief{color:#6b6478} .bstate.blocked{color:#a2761f} .bstate.pending{color:#1f7a78} .btn-plum{display:inline-flex;align-items:center;gap:8px;background:var(--plum); color:#fff;padding:11px 20px;font-size:12.5px;font-weight:700;border-radius:3px; transition:.15s} .btn-plum:hover{background:var(--orchid)} .sec-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:18px} .sec-hd h2{font-size:clamp(24px,2.6vw,34px)} .sec-hd span{font-size:12.5px;color:var(--ink-3)} /* 段落标题右边「完整积分榜 →」这类去整页的入口 */ .sec-hd .sec-more{margin-left:auto;flex:none;font-size:13px;font-weight:700;color:var(--plum);white-space:nowrap} .sec-hd .sec-more:hover{color:var(--orchid)} /* 持续事件的小块（首页「正在发生」、球队抽屉、人物页、文章页共用）：一行一件事，发丝线隔开，不做卡片。 类名用 ev 前缀：`.strow` 是积分榜的行（固定五列），第一版事件行误用了同名类，在球队抽屉里被排成三条窄列。 */ .evrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 78px 16px 0;border-bottom:1px solid var(--line-2);color:inherit} .evrow.noav{padding-right:0} .evrow:last-child{border-bottom:0} .evrow .evmain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:15px} .evrow .evmain b{font-weight:800;font-size:17px;letter-spacing:-.1px} .evrow .evkind{color:var(--ink-3);font-size:13px} /* 阶段标签（传闻 / 谈判中 / 基本谈妥…）和正文状态标签 `.bstate` 是同一族：描边不填色、3px 圆角、10px 粗体， 放在实心的 `.nbadge` 旁边不抢戏。原来是 999px 的药丸，和站里别处的标签是两套形状。 */ .evrow .evst{display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;white-space:nowrap; border:1px solid var(--line);font:700 10px/1.5 var(--sans);letter-spacing:.04em;color:var(--ink-3)} .evrow .evst.on{border-color:var(--orchid);color:var(--orchid)} .evrow .evlead{font-size:14.5px;line-height:1.5;color:var(--ink);display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t-base) var(--ease-out)} .evrow .evmeta{display:flex;align-items:center;min-width:0;font-size:12px;color:var(--ink-3);white-space:nowrap} .evrow .evwhen{flex:none} .evrow:hover .evlead,.evrow:focus-visible .evlead{color:var(--orchid)} /* ── 鼠标放上去才有的那一层：头像、进展条、媒体名字。位置都在平时就预留好了（右边 78px、meta 行里的空位），展开时文字不动 ── */ .evrow:focus-visible{outline:2px solid var(--orchid);outline-offset:2px} .evav{position:absolute;right:6px;top:18px;width:58px;height:58px;pointer-events:none} .evav>i,.evav>img:not(.evcrest){position:absolute;inset:0;width:100%;height:100%;border-radius:50%} .evav>i{display:grid;place-items:center;font:800 22px/1 var(--sans);font-style:normal;color:var(--plum);background:var(--paper-2)} .evav>img:not(.evcrest){object-fit:cover;object-position:50% 18%;background:var(--paper-2);opacity:0;transition:opacity .3s var(--ease-out)} .evav>img.ok{opacity:1} .evav>img.gone{display:none} /* 光圈：一圈兰紫渐变的细环，跟着头像一起出现 */ .evav::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:2px; background:linear-gradient(135deg,var(--orchid),var(--plum)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .evav .evcrest{position:absolute;right:-5px;bottom:-4px;width:24px;height:24px;object-fit:contain;padding:3px;border-radius:50%; background:#fff;box-shadow:0 0 0 1px var(--line-2),0 2px 6px rgba(40,0,50,.16)} .evpips{display:inline-flex;gap:3px;margin-left:10px;flex:none} .evpips i{width:14px;height:4px;border-radius:2px;background:var(--line)} .evpips i.on{background:var(--orchid)} /* 右边留 22px 内边距给渐隐用：渐隐只吃这块空白；标签真放不下、溢出到这里时才会被渐隐吃掉 */ .evouts{display:flex;gap:5px;margin-left:10px;padding-right:22px;min-width:0;overflow:hidden; -webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)} .evouts em{flex:none;font-style:normal;font-weight:700;font-size:11px;line-height:1;padding:4px 7px;border-radius:3px; border:1px solid var(--line);color:var(--ink-2);background:#fff} /* 能悬停的设备（鼠标）：平时全藏着，放上去错开一点依次出来 */ @media (hover:hover) and (pointer:fine){ .evav{opacity:0;transform:translateX(-16px) scale(.86); transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)} .evav::before{opacity:0;transform:scale(.82);transition:opacity var(--t-slow) var(--ease-out) .06s,transform var(--t-slow) var(--ease-spring) .06s} .evav .evcrest{transform:scale(0);transition:transform .42s var(--ease-spring) .2s} .evpips i{transform:scaleX(0);transform-origin:left;opacity:0; transition:transform var(--t-base) var(--ease-out) calc(var(--i) * 55ms + .05s),opacity var(--t-base) var(--ease-out) calc(var(--i) * 55ms + .05s)} .evouts em{opacity:0;transform:translateX(-8px); transition:opacity var(--t-base) var(--ease-out) calc(var(--i) * 70ms + .16s),transform var(--t-base) var(--ease-out) calc(var(--i) * 70ms + .16s)} .evrow:hover .evav,.evrow:focus-visible .evav{opacity:1;transform:none} .evrow:hover .evav::before,.evrow:focus-visible .evav::before{opacity:1;transform:none} .evrow:hover .evav .evcrest,.evrow:focus-visible .evav .evcrest{transform:none} .evrow:hover .evpips i,.evrow:focus-visible .evpips i{transform:none;opacity:1} .evrow:hover .evouts em,.evrow:focus-visible .evouts em{opacity:1;transform:none} } /* 手机 / 触屏：没有悬停，头像常驻（小一号），媒体名字不展开 —— 点进去是时间线，那里有每一家 */ @media (hover:none),(pointer:coarse){ .evrow{padding-right:66px} .evrow.noav{padding-right:0} .evav{width:48px;height:48px} .evav::before{display:none} .evouts{display:none} } @media (prefers-reduced-motion:reduce){ .evav,.evav::before,.evav>img,.evav .evcrest,.evpips i,.evouts em{transition:opacity .01s!important;transform:none!important} } /* 文章页「这件事的进展」：每一步一行，本文所在的那一步标出来 */ .evsteps{list-style:none;margin:0;padding:0} .evsteps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline; padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.5px} .evsteps li.here b{color:var(--orchid)} .evsteps b{font-weight:800} .evsteps span{color:var(--ink-3)} .evsteps a{color:inherit;font-weight:650} .evsteps a:hover{color:var(--orchid)} .evmore{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--plum)} .evmore:hover{color:var(--orchid)} .pagehead{background:var(--plum-2);padding:30px 0 28px} .pagehead.mp-under{padding-top:calc(30px + var(--tb-h))} .pagehead .in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut); display:flex;align-items:center;gap:18px;flex-wrap:wrap} .pagehead h1{color:#fff;font-size:clamp(26px,3vw,40px);line-height:1.1} .pagehead .sub{color:rgba(255,255,255,.6);font-size:13px;font-weight:600} .pagehead img{width:52px;height:52px;object-fit:contain;flex:none} .pagehead .back{margin-left:auto;color:rgba(255,255,255,.7);font-size:12.5px; font-weight:700;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px} .pagehead .back:hover{color:#fff;border-bottom-color:var(--orchid)} /* 话题筛选条 */ .chips{display:flex;gap:8px;flex-wrap:wrap;padding:20px 0 24px} .chips a{padding:7px 15px;border:1px solid var(--line);border-radius:999px; font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.15s} .chips a:hover{border-color:var(--plum);color:var(--plum)} .chips a.on{background:var(--plum);border-color:var(--plum);color:#fff} /* 报道卡网格 —— 列表页和首页的"值得一读"共用 */ .storygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media (max-width:1180px){.storygrid{grid-template-columns:repeat(3,1fr)}} @media (max-width:840px){.storygrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.storygrid{grid-template-columns:1fr}} .storycard{display:block;border-top:1px solid var(--line);padding-top:14px} .storycard .shot{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2); margin-bottom:12px} .storycard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .storycard:hover .shot img{transform:scale(1.04)} .storycard h4{font-size:15px;line-height:1.36;font-weight:700;margin-bottom:9px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .storycard:hover h4{color:var(--orchid)} .storycard .meta{font-size:11.5px;color:var(--ink-3);display:flex;gap:8px; align-items:center} .more-row{display:flex;justify-content:center;padding:34px 0 10px} .empty{color:var(--ink-3);font-size:13.5px;padding:40px 0;text-align:center} .source-links{display:grid;gap:10px;margin-top:12px} .source-links a{font-size:13px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere; text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px} .source-links a:hover{color:var(--plum);text-decoration-color:currentColor} .source-links small{display:block;font-size:11px;color:var(--ink-3)} .source-links.compact{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:7px} .source-links.compact a{font-size:11.5px;color:var(--ink-3)} /* ══ 拼接卡片 ══ 横向的缩略图 + 标题，靠 1px 细线拼成一整块，不留间距。 列表页和收藏页共用 —— 放在这里而不是各页