/* finesse · register=brand · A=warm-rose-tinted-neutral + system sans · * B=700/400 重量对撞 · C=split / stacked-stage 交替 · * D=CSS-3D + scroll-driven · E=放映机打在炭黑上的光 · * SOUL=7 SPECTACLE=5 DENSITY=5 */ /* ================================================================ 短剧之家 · 官网样式 设计基调：影院深色 + 苹果式克制排版 + 大留白 ⚠️ 底色一律**带品牌色偏**：#070509 而不是 #000，#f7f3f5 而不是 #fff。 纯黑纯白会让页面像没调过色的矢量稿，偏一点玫红才像「打过光」。 ================================================================ */ :root{ --bg:#070509; --bg-soft:#0b080c; --surface:#130f14; --surface-2:#1b161b; /* ---- 描边：不再是单一白线，改成分层 ---- --line 极轻，用于大面积容器分割 --line-strong 悬停/强调 --line-top 卡片顶部内高光，制造「光从上方来」的玻璃感 */ --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.15); --line-top:rgba(255,255,255,.085); --line-bot:rgba(255,255,255,.028); /* ⚠️ --text-3 原来 #6e6e73，在 #0c0c0f / #000 底上实测对比度只有 3.85 / 4.14， 低于 WCAG AA 的 4.5:1 —— 而它承担了 9 处正文级文字 （mock 说明、页脚法务、三端体积、章节序号…），全部不达标。 提到 #8a8a8f 后实测 5.66；现在整体改暖色系，取 #918890， 实测 #070509 上 5.93 / #1b161b 上 5.21，都留足余量。 */ --text:#f7f3f5; --text-2:#a8a0a8; --text-3:#918890; --accent:#ff2d55; --accent-2:#ff6b3d; /* 按钮底用的深绯红：白字压在 #ff2d55 上只有 3.65:1（不达 AA 4.5）， 压在这个色上 4.68:1。发光阴影保留，所以看起来一样亮。 */ --accent-ink:#e11f47; --accent-ink-2:#c4102f; --radius:20px; --radius-sm:12px; --ease:cubic-bezier(.16,1,.3,1); /* 更「重」的收尾曲线，用于大位移 */ --ease-out:cubic-bezier(.22,.61,.36,1); --maxw:1180px; /* ---- 分层阴影体系 ---- 黑底上纯黑阴影不可见，所以关键不是「更深」，而是 「近距离细阴影 + 远距离大扩散」两层叠加，再配顶部内高光。 */ /* 阴影也不是纯黑：往玫红偏一点（10,2,6），压在炭黑底上才有「体积」而不是「黑洞」 */ --sh-1:0 1px 2px rgba(10,2,6,.5), 0 8px 24px -12px rgba(10,2,6,.75); --sh-2:0 1px 2px rgba(10,2,6,.5), 0 18px 44px -18px rgba(10,2,6,.85); --sh-3:0 2px 4px rgba(10,2,6,.5), 0 34px 70px -28px rgba(10,2,6,.95); --sh-4:0 2px 6px rgba(10,2,6,.55), 0 60px 120px -40px rgba(10,2,6,1); /* 顶部内高光：玻璃质感的灵魂 */ --inset-top:inset 0 1px 0 var(--line-top); --inset-bot:inset 0 -1px 0 var(--line-bot); /* ---- 光场：每屏一个方向，避免整页死黑 ---- */ --glow-warm:radial-gradient(ellipse 62% 48% at 50% 0%,rgba(255,45,85,.11),transparent 70%); --glow-cool:radial-gradient(ellipse 58% 44% at 50% 100%,rgba(90,120,255,.07),transparent 72%); /* ---- 排版刻度：四级 ---- display 首屏大字 / title 区块标题 / h 卡片标题 / body 正文 / cap 说明 */ --fs-display:clamp(46px,8.8vw,124px); --fs-title:clamp(30px,5.1vw,58px); --fs-h:clamp(20px,2.7vw,25px); --fs-body:15.5px; --fs-cap:12.5px; --track-display:-.042em; --track-title:-.028em; --track-h:-.02em; --track-cap:.01em; --font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont, "PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; } *{margin:0;padding:0;box-sizing:border-box} /* ⚠️ 横向溢出用 clip，不用 hidden。 hidden 会把元素变成滚动容器，从而**悄悄废掉内部所有 position:sticky 的后代**； clip 只裁剪、不创建滚动容器，是移动端 M1 规则要求的写法。 */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} section[id]{scroll-margin-top:64px} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5; overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* 键盘焦点环：全站统一一条。 之前只有 .chap__i 写了 :focus-visible，按钮和下载链接全靠 UA 默认样式 —— 深色底上那圈默认轮廓几乎看不见。浅色反相段里 var(--accent) 会跟着变深，照样看得见。 */ a:focus-visible,button:focus-visible,summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px; } .btn:focus-visible{outline-offset:4px} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} /* 排版刻度（--fs-*）、分层阴影（--sh-*）、光场（--glow-*）统一在 :root 定义， 各组件直接引用变量。 注：曾有一批 .t-display / .t-title / .t-h / .t-body / .t-cap / .tt-grad / .num / .glass 工具类，实测全站零引用（各组件都写了自己的版本），已删除。 */ /* 细腻噪点，避免大面积纯黑显得死板 */ .grain{ position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.028; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ================= 滚动显现 ================= 安全策略：CSS 默认可见；JS 就绪后给 加 .js-reveal，才启用隐藏+动画。 这样即使 JS 失败 / 锚点直跳 / 无头渲染，内容也永远不会丢失。 */ /* ⚠️ 这里**故意不写 will-change**。 曾经写过 will-change:opacity,transform，结果 .in 之后从不撤销 —— 全站 56 个揭示元素 = 56 个**永久提升的合成图层**： · 吃 GPU 显存 · 更要命的是：图层内的文字被**一次性栅格化**并随图层移动。 手机 DPR 是整数(2x/3x)、栅格对齐所以清晰； Windows 125%/150% 缩放是分数 DPR(1.25/1.5)、栅格不对齐 → 文字发虚、移动时发抖 —— 这正是「手机正常、电脑不正常」的原因。 一次性过渡不需要 will-change（它本来是给「即将变化且反复变化」的元素用的）， 浏览器对 opacity/transform 过渡本身就做了合成优化。 */ html.js-reveal .reveal{ opacity:0;transform:translateY(28px); transition:opacity .9s var(--ease),transform .9s var(--ease); } html.js-reveal .reveal.in{opacity:1;transform:none} /* 错峰阶梯：步长 80ms。 ⚠️ 必须与 JS 里实际用到的最大 data-delay 对齐 —— 之前只写到 4， 而独家功能区用了 5 / 6，导致最后两张卡没有延迟、节奏断掉。 */ .reveal[data-delay="1"]{transition-delay:.08s} .reveal[data-delay="2"]{transition-delay:.16s} .reveal[data-delay="3"]{transition-delay:.24s} .reveal[data-delay="4"]{transition-delay:.32s} .reveal[data-delay="5"]{transition-delay:.40s} .reveal[data-delay="6"]{transition-delay:.48s} .reveal[data-delay="7"]{transition-delay:.56s} .reveal[data-delay="8"]{transition-delay:.64s} /* 编排型卡片（独家功能区）：位移更大、带缩放与模糊， 配合 JS 按行下发的 transition-delay，滚到时一层层弹上来。 延迟由 JS 内联设置，故此处不设 transition-delay。 */ html.js-reveal .reveal-card{ opacity:0; transform:translateY(72px) scale(.94); filter:blur(6px); transition:opacity .78s var(--ease),transform .78s var(--ease), filter .78s var(--ease); /* 同样不写 will-change，理由见上方 .reveal 的说明 */ } html.js-reveal .reveal-card.in{ opacity:1;transform:none;filter:blur(0); } /* ================= 导航 ================= */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; height:48px; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); background:rgba(10,10,12,.62); border-bottom:1px solid transparent; transition:border-color .4s var(--ease),background .4s var(--ease); } .nav.scrolled{ border-bottom-color:var(--line); background:rgba(10,10,12,.78); box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 34px -22px rgba(10,2,6,.95); } .nav__inner{ max-width:var(--maxw);margin:0 auto;height:100%; padding:0 24px;display:flex;align-items:center;gap:34px; } .nav__brand{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;letter-spacing:.01em} .nav__brand svg{color:var(--accent);filter:drop-shadow(0 0 7px rgba(255,45,85,.6))} .nav__links{display:flex;gap:30px;margin-left:auto} .nav__links a{ position:relative;font-size:12.5px;color:var(--text-2); transition:color .25s var(--ease); } .nav__links a:hover{color:var(--text)} /* 悬停时下方浮出一条极细短横线，比单纯变色更「被设计过」 */ .nav__links a::after{ content:"";position:absolute;left:50%;bottom:-5px;width:0;height:1px; transform:translateX(-50%); background:var(--accent);opacity:.85; transition:width .3s var(--ease); } .nav__links a:hover::after{width:14px} /* 滚动进度条：贴在导航栏底边 */ .nav__progress{ position:absolute;left:0;bottom:-1px;height:2px;width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(255,45,85,.7); transition:width .12s linear; pointer-events:none; } .nav__actions{margin-left:6px} .nav__toggle{display:none;width:26px;height:26px;position:relative} .nav__toggle span{ position:absolute;left:4px;width:18px;height:1.5px;background:var(--text-2); border-radius:2px;transition:transform .35s var(--ease),opacity .2s; } .nav__toggle span:nth-child(1){top:9px} .nav__toggle span:nth-child(2){top:16px} .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)} .nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)} /* 移动端菜单 */ .nav__drawer{ position:fixed;top:48px;left:0;right:0;z-index:99; background:rgba(10,10,12,.96); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--line); padding:8px 24px 20px; display:none;flex-direction:column; transform:translateY(-12px);opacity:0; transition:opacity .35s var(--ease),transform .35s var(--ease); } .nav__drawer.open{opacity:1;transform:none} .nav__drawer a{ padding:14px 0;font-size:16px;color:var(--text-2); border-bottom:1px solid var(--line); } .nav__drawer a:last-child{border-bottom:none} /* ================= 按钮 ================= */ .btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:6px; border-radius:980px;font-size:14px;font-weight:500; transition:all .3s var(--ease);white-space:nowrap; -webkit-tap-highlight-color:transparent; } /* ⚠️ 底色不是 --accent(#ff2d55) 而是更深的 --accent-ink(#e11f47)： 白字压在 #ff2d55 上实测只有 3.65:1，14px 正文级别不达 WCAG AA 的 4.5:1。 压在 #e11f47 上是 4.68:1。外发光保持原强度，所以看起来一样"亮"，只是更"实"。 */ .btn--primary{ background:linear-gradient(178deg,var(--accent-ink) 0%,#d91540 58%,var(--accent-ink-2) 100%); color:#fff8f9;padding:12px 26px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(10,2,6,.4), 0 8px 24px -10px rgba(255,45,85,.78); } /* 悬停时一道高光从左侧扫过：廉价按钮和贵按钮的差距常在这一下 */ .btn--primary::after{ content:"";position:absolute;top:0;left:-70%;width:50%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); opacity:0;transition:opacity .25s var(--ease); } .btn--primary:hover{ background:linear-gradient(178deg,#e62249 0%,#e01b45 58%,#c8102f 100%); transform:translateY(-1.5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 2px 4px rgba(10,2,6,.4), 0 14px 34px -12px rgba(255,45,85,.85); } .btn--primary:hover::after{opacity:1;animation:sheen .75s var(--ease-out) forwards} .btn--primary:active{transform:translateY(0) scale(.985)} .btn--ghost{ border:1px solid var(--line-strong);color:var(--text-2);padding:11px 22px; background:rgba(255,255,255,.02); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .btn--ghost:hover{ border-color:rgba(255,255,255,.36);color:var(--text); background:rgba(255,255,255,.055); } .btn--sm{padding:6px 15px;font-size:12.5px} .btn--text{color:var(--accent);font-size:15px} .btn--text:hover{text-decoration:underline} .btn--text svg{transition:transform .3s var(--ease)} .btn--text:hover svg{transform:translateX(3px)} /* ================= HERO ================= */ .hero{ position:relative; min-height:min(100vh, 1000px); /* dvh 才是手机地址栏收起/展开时真正的可视高度；不支持时上面那行兜底 */ min-height:min(100dvh, 1000px); display:flex;flex-direction:column;justify-content:center; padding:120px 0 0; overflow:hidden; /* 顶部到底部的暗色渐次，避免首屏是一块平黑 */ background:linear-gradient(180deg,#0b0408 0%,#0b080c 46%,var(--bg) 100%); } /* 暗角：四角压暗、中心留亮，给画面一个光学焦点。 和 .hero__glow（中心发光）是两件事 —— 一个给光，一个收边。 */ .hero__vignette{ position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(ellipse 82% 66% at 50% 40%, transparent 38%,rgba(4,1,3,.5) 100%); } /* 极淡的网格：给纯黑一个「空间参照」，是高端站的常见手法 */ .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 66% 52% at 50% 34%,#000 8%,transparent 76%); mask-image:radial-gradient(ellipse 66% 52% at 50% 34%,#000 8%,transparent 76%); } .hero__glow{ position:absolute;top:-30%;left:50%;transform:translateX(-50%); width:1100px;height:900px;pointer-events:none; background:radial-gradient(ellipse at center,rgba(255,45,85,.22),rgba(255,107,61,.08) 42%,transparent 68%); filter:blur(20px); } /* 底部再补一层冷色，与顶部暖红形成对冲，画面更有层次 */ .hero__glow::after{ content:"";position:absolute;left:50%;bottom:-40%;transform:translateX(-50%); width:900px;height:600px; background:radial-gradient(ellipse at center,rgba(80,110,255,.09),transparent 70%); filter:blur(30px); } .hero__inner{ position:relative;z-index:2; max-width:var(--maxw);margin:0 auto;padding:0 24px; text-align:center; } .hero__eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;letter-spacing:.1em;color:var(--text-2); font-weight:500;margin-bottom:26px; padding:7px 15px 7px 13px;border-radius:980px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); text-transform:uppercase; } /* 眉标前的小红点：呼吸指示灯 */ .hero__eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(255,45,85,.8); animation:blip 2.6s var(--ease) infinite; } @keyframes blip{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.82)} } .hero__title{ font-size:var(--fs-display); line-height:.96;font-weight:700;letter-spacing:var(--track-display); display:flex;flex-direction:column; } /* M4：display 级大字在窄屏要允许任意处断行，否则长词会把容器顶宽 */ .hero__title span{min-width:0;overflow-wrap:anywhere} /* ⚠️ 原来这是「白→粉」渐变字。渐变字是 AI 生成页面最典型的廉价信号之一 （黑榜第一条级别），且在大字号上尤其廉价。 改成实心暖白 + 一圈玫红漫射：读起来像灯管自己在发光，而不是字被染了色。 */ .hero__title-em{ color:#fffafb; text-shadow:0 0 46px rgba(255,45,85,.36),0 0 15px rgba(255,45,85,.2); } .hero__sub{ margin-top:30px;font-size:clamp(16px,2.1vw,21px); line-height:1.6;color:var(--text-2);font-weight:400; letter-spacing:.002em; } .hero__cta{ margin-top:40px;display:flex;gap:14px;justify-content:center; align-items:center;flex-wrap:wrap; } /* 注：.hero__meta / .dot 原为首屏「剧库已同步 · 共 N 部在库」状态文字服务， 该文案已按要求移除，两处样式一并删除。 ⚠️ @keyframes pulse 必须保留 —— 它被 .nextmock__dot（无感加载下集的绿点） 共用，删掉会让那个点停止呼吸。 ⚠️ 若日后恢复该文案：不要用 hidden 属性隐藏， 因为 .hero__meta 的 display:flex 会盖掉 UA 的 [hidden] 规则。 */ @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(48,209,88,.45)} 70%{box-shadow:0 0 0 7px rgba(48,209,88,0)} 100%{box-shadow:0 0 0 0 rgba(48,209,88,0)} } /* ---- HERO 3D 海报墙 ---- */ .hero__stage{ position:relative;z-index:1; margin-top:64px;height:clamp(300px,44vw,540px); perspective:1400px;perspective-origin:50% 0%; display:flex;align-items:flex-start;justify-content:center; overflow:hidden; } .stage3d{ display:flex;gap:16px; transform-style:preserve-3d; transform:rotateX(34deg) scale(1.06); will-change:transform; } .stage3d .sc{ width:clamp(112px,13.2vw,178px);flex:none; border-radius:14px;overflow:hidden; background:var(--surface);position:relative; box-shadow:0 30px 70px -20px rgba(10,2,6,.9); opacity:0; animation:cardIn .9s var(--ease) forwards; } .stage3d .sc img{width:100%;aspect-ratio:3/4.1;object-fit:cover} @keyframes cardIn{to{opacity:1}} .stage3d .col{display:flex;flex-direction:column;gap:16px} .stage3d .col--up{margin-top:-72px} .stage3d .col--down{margin-top:56px} .stage__fade{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 24%,rgba(7,5,9,.42) 58%,var(--bg) 92%); } /* 滚动驱动的景深：往下滚时海报墙从「躺平」慢慢立起来并推近。 ⚠️ 这是 progress-driven 动画 —— animation-duration 对它**无效**， 所以文件末尾 prefers-reduced-motion 里那条 `*{animation-duration:.01ms}` 管不住它， 必须在源头用 @media (prefers-reduced-motion:no-preference) 不生成。 整块包在 @supports 里：不支持的浏览器完全不生效，静态 transform 照旧显示。 */ @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .stage3d{ animation:stageDrift linear both; animation-timeline:scroll(root block); animation-range:0 92vh; } @keyframes stageDrift{ from{transform:rotateX(36deg) scale(1.04) translateY(0)} to{transform:rotateX(17deg) scale(1.15) translateY(-2.5%)} } } } /* ================= 章节序号导航（右侧悬浮） ================= 只在功能区段落显示，滚出即淡出。给页面「有结构」的仪式感。 */ .chap{ position:fixed;right:26px;top:50%;transform:translateY(-50%) translateX(14px); z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:11px; /* ⚠️ 必须同时 visibility:hidden —— 只写 opacity:0 + pointer-events:none 的话， 里面的 依然在 Tab 顺序里。而