/* ============================================================ engine.css — 五个站共用的结构（分屏 + 广告位 + 复位） ------------------------------------------------------------ 这里只写「必须一样」的东西：分屏逻辑、广告位数量与位置规则。「必须不一样」的东西（题目卡排版、结果页呈现、插画）写在各站自己的 skin.css 里，不许往这个文件加。本文件只引用 var()，不写字面量颜色。 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; overflow-x: hidden; /* 页面本身永远不横向滚 */ } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; font-family: var(--font-display); } p { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-s); } /* 宽内容自己滚，不带着页面滚 */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- 分屏系统 ------------------------------------------------ 一屏一件事。屏数是我们的胜负手：每次点击能出几个广告 = 落地率 × 每人页数 × 每页广告数所以 .screen 的数量直接等于收入，不是排版偏好。 */ .stage { position: relative; min-height: calc(100svh - var(--snav-h)); display: grid; } .screen { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); max-width: var(--wide); width: 100%; margin-inline: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .screen[data-active] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* 首屏必须在 HTML 里就带 data-active，不靠 JS 点亮 —— 否则 JS 慢一拍就是白屏，白屏直接进那 31% 的流失里。 */ @media (prefers-reduced-motion: reduce) { .screen { transition-duration: 1ms; transform: none; } } /* ---- 广告位规则（五个站完全一致，不许各站自己调）-------------- 位置：每屏正文之后、下一步按钮之前。数量：一屏最多 1 个。首屏 0 个 —— 首屏放广告会拖慢 LCP，而首屏的任务只有一个：让人别跑。 */ .ad { min-height: 100px; /* 占位，防止广告加载时页面跳动 */ display: grid; place-items: center; background: var(--sink); border-radius: var(--radius-m); color: var(--faint); font-size: var(--step--1); } .screen[data-first] .ad { display: none; } /* ---- 图标：统一 Lucide，落地页内联 SVG，不走 CDN -------------- */ .icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.22em; } .measure { max-width: var(--measure); } .muted { color: var(--muted); } .faint { color: var(--faint); } .tabnum { font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } /* ---- 站脚：回根域导航页 -------------------------------------- markup 由 tools/build-seo.mjs 写进每个页面的前， href 随布局变（path 是 /，host 是根域绝对地址），手改没用。字色用 --muted 不用 --faint：game 皮的 --faint 是 #4d6180，压在它自己的底色上根本读不出来，--faint 只配给非文字的标记。 */ .site-foot { margin-top: var(--sp-7); padding: var(--sp-5) var(--sp-4); border-top: 1px solid var(--rule); text-align: center; font-size: var(--step--1); color: var(--muted); } .site-foot a { color: var(--ink); text-underline-offset: 3px; } /* ---- 站内导航 ------------------------------------------------ 构建生成，见 tools/build-seo.mjs 的 sitenavBlock。位置在第一个元素、所有 .screen 之外 —— 落地页是一屏一步的向导，导航放进任何一屏都只有那一屏看得见，而通往同站其他工具的入口本来就只躺在最后一屏，等于「答完十道题才知道站里还有别的东西」。一行不换行，窄屏横滑：换行会长出第二层，把落地页首屏顶掉一整行。各站 skin.css 可以改配色和字体，但高度要改 --snav-h，别直接写死 —— .stage 的 100svh 是按那个变量减出来的。 */ .sitenav { height: var(--snav-h); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); border-bottom: 1px solid var(--rule); background: var(--raise); font-size: var(--step--1); white-space: nowrap; } /* flex 子项默认可以被压扁，压扁之后 nowrap 的文字会被裁掉而不是触发横滑。钉住固有宽度，排不下时才是由 .scroll-x 接手横滑。 */ .sitenav > * { flex: none; } .sitenav a { color: var(--muted); text-decoration: none; align-self: stretch; display: flex; align-items: center; border-bottom: 2px solid transparent; } .sitenav a:hover { color: var(--ink); } .sitenav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }