/* * ffaudio landing page — single shared stylesheet for index.html (zh-CN) / en.html. * No framework, no build step. Color tokens are copied verbatim from the App's * ui/src/styles/themes.css (light/dark neutral ramps, brand-blue accent, and the * Signal Path semantic fidelity colors) so the page and the App share one visual * language. Dark mode follows the system via prefers-color-scheme. */ /* ── Tokens (light default) ─────────────────────────────── */ :root { --bg-0: #f7f9fc; --bg-1: #eef2f8; --bg-2: #e4e9f1; --text-1: #283248; --text-2: #5a6478; --text-3: #828a9b; --border: rgba(0, 0, 0, 0.10); --separator: rgba(0, 0, 0, 0.07); --accent: #3d74d9; --accent-strong: #2b57ad; --on-accent: #ffffff; /* Signal Path semantic fidelity tokens — same values as in-App */ --signal-good: #f0b63f; --signal-neutral: #6d72d9; --signal-caution: #31bed4; --signal-warning: #c4408a; --signal-muted: #7c8087; /* CSS-mask logo colors: ink from logo/ffaudio assets, dot follows the App accent blue so the whole page uses one blue (--accent switches with theme, so no per-theme override is needed here). */ --logo-ink: #3d3d3d; --logo-accent: var(--accent); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-button: 16px; --radius-pill: 9999px; --dur-fast: 150ms; --dur-normal: 200ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-quick: cubic-bezier(0.16, 1, 0.3, 1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.08); /* 截图专用投影：比卡片的 --shadow-sm 大一个量级（大而软的双层）， 给 hero / 轮播 / DSD 三联的截图做纵深。深色主题下加重不加大。 */ --shadow-shot: 0 3px 8px rgba(16, 26, 50, 0.08), 0 16px 36px rgba(16, 26, 50, 0.15); /* hero 氛围光：accent 低 alpha 径向光晕，深色主题下更收 */ --hero-glow: color-mix(in srgb, var(--accent) 6%, transparent); --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", roboto, sans-serif; --font-tech: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; --page-max: 1060px; --page-pad: clamp(20px, 5vw, 48px); } /* 主题三态：默认跟随系统（无 data-theme 时走媒体查询）， 头部按钮显式切换时在 上写 data-theme="light|dark"（与 App 同机制）。 暗色 token 块因此出现两份（媒体查询版 + 显式版），零构建页面接受这份重复。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-0: #181b22; --bg-1: #20242d; --bg-2: #2a2f3a; --text-1: #eef1f7; --text-2: #a7adbb; --text-3: #6b7180; --border: rgba(255, 255, 255, 0.10); --separator: rgba(255, 255, 255, 0.05); --accent: #6294f0; --accent-strong: #3f6fd4; --signal-neutral: #b8bcff; --signal-caution: #8fe9f2; --signal-warning: #ee85c2; --signal-muted: #b9bdc3; --logo-ink: #c6ccd6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-shot: 0 3px 8px rgba(0, 0, 0, 0.40), 0 16px 36px rgba(0, 0, 0, 0.50); --hero-glow: color-mix(in srgb, var(--accent) 4%, transparent); } } :root[data-theme="dark"] { --bg-0: #181b22; --bg-1: #20242d; --bg-2: #2a2f3a; --text-1: #eef1f7; --text-2: #a7adbb; --text-3: #6b7180; --border: rgba(255, 255, 255, 0.10); --separator: rgba(255, 255, 255, 0.05); --accent: #6294f0; --accent-strong: #3f6fd4; --signal-neutral: #b8bcff; --signal-caution: #8fe9f2; --signal-warning: #ee85c2; --signal-muted: #b9bdc3; --logo-ink: #c6ccd6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-shot: 0 3px 8px rgba(0, 0, 0, 0.40), 0 16px 36px rgba(0, 0, 0, 0.50); --hero-glow: color-mix(in srgb, var(--accent) 4%, transparent); } /* ── Base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-0); color: var(--text-1); font-family: var(--font-sans); font-size: clamp(16px, 15px + 0.1vw, 18px); line-height: 1.6; -webkit-font-smoothing: antialiased; } .container { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--font-tech); font-size: 0.88em; background: var(--bg-1); border: 1px solid var(--separator); border-radius: var(--radius-sm); padding: 1px 5px; white-space: nowrap; } /* 独占一行的长代码示例（如搜索 DSL）：允许换行，窄屏不出界 */ .code-block { display: block; margin-top: 10px; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; } /* ── Header（sticky，导航带滚动位置指示条）───────────────── */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--separator); background: color-mix(in srgb, var(--bg-0) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .site-header .container { position: relative; display: flex; align-items: center; gap: 20px; min-width: 0; padding-block: 14px; } .header-nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; } .header-nav a { color: var(--text-2); font-size: 0.92em; } .header-nav a:hover, .header-nav a.active { color: var(--text-1); text-decoration: none; } /* 「移动书签」：单条 accent 短线，随当前所在章节滑到对应导航项下方。 位置由 site.js 写 width/translateX；挂在 header 容器上（定位上下文）， bottom:0 紧贴页眉分隔线。nav 不设 position，链接的 offsetLeft 因此直接 以容器为参考系，两边坐标天然一致。 */ .nav-indicator { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; opacity: 0; background: var(--accent); border-radius: var(--radius-pill); transition: transform var(--dur-normal) var(--ease-standard), width var(--dur-normal) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); } /* sticky 头会盖住锚点落点，给所有锚定目标留出头高的滚动边距 */ main [id], section[id] { scroll-margin-top: 92px; } .lang-switch { color: var(--text-3); font-size: 0.92em; white-space: nowrap; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text-2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out-quick); } .theme-toggle:hover { background: var(--bg-1); color: var(--text-1); } .theme-toggle svg { width: 16px; height: 16px; } /* 图标随「当前生效主题」切换，三态全由 CSS 判定（跟随系统 / 显式 light / 显式 dark）， JS 只负责翻转 data-theme。浅色显示月亮（点了变暗），深色显示太阳。 */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ── CSS-mask wordmark (geometry inlined as data-URI masks, recolors via --logo-ink / --logo-accent; from logo/ffaudio) ── */ .ffaudio-logo { position: relative; display: block; aspect-ratio: 1774 / 887; isolation: isolate; } .ffaudio-logo::before, .ffaudio-logo::after { position: absolute; inset: 0; content: ""; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .ffaudio-logo::before { color: var(--logo-ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201774%20887'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='30'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M246%20491C184%20491%20138%20530%20138%20582C138%20627%20171%20661%20216%20661C261%20661%20295%20630%20295%20587V276C295%20235%20327%20204%20371%20204C415%20204%20447%20236%20447%20275V375'/%3E%3Cpath%20d='M555%20375C621%20375%20661%20337%20661%20280C661%20237%20629%20204%20585%20204C541%20204%20507%20237%20507%20279V585C507%20629%20476%20661%20432%20661C389%20661%20356%20628%20356%20585V492'/%3E%3Cpath%20d='M777%20657H750C704%20657%20669%20621%20669%20575C669%20529%20704%20492%20750%20492C795%20492%20829%20527%20829%20568V657'/%3E%3Cpath%20d='M902%20491V584C902%20628%20936%20657%20978%20657C1020%20657%201054%20625%201054%20584V491'/%3E%3Cpath%20d='M1241%20491H1208C1164%20491%201130%20528%201130%20575C1130%20621%201164%20657%201208%20657C1258%20657%201295%20625%201295%20582V317L1358%20357'/%3E%3Cpath%20d='M1404%20510V657'/%3E%3Ccircle%20cx='1568'%20cy='575'%20r='83'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201774%20887'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='30'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M246%20491C184%20491%20138%20530%20138%20582C138%20627%20171%20661%20216%20661C261%20661%20295%20630%20295%20587V276C295%20235%20327%20204%20371%20204C415%20204%20447%20236%20447%20275V375'/%3E%3Cpath%20d='M555%20375C621%20375%20661%20337%20661%20280C661%20237%20629%20204%20585%20204C541%20204%20507%20237%20507%20279V585C507%20629%20476%20661%20432%20661C389%20661%20356%20628%20356%20585V492'/%3E%3Cpath%20d='M777%20657H750C704%20657%20669%20621%20669%20575C669%20529%20704%20492%20750%20492C795%20492%20829%20527%20829%20568V657'/%3E%3Cpath%20d='M902%20491V584C902%20628%20936%20657%20978%20657C1020%20657%201054%20625%201054%20584V491'/%3E%3Cpath%20d='M1241%20491H1208C1164%20491%201130%20528%201130%20575C1130%20621%201164%20657%201208%20657C1258%20657%201295%20625%201295%20582V317L1358%20357'/%3E%3Cpath%20d='M1404%20510V657'/%3E%3Ccircle%20cx='1568'%20cy='575'%20r='83'/%3E%3C/g%3E%3C/svg%3E"); } .ffaudio-logo::after { color: var(--logo-accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201774%20887'%3E%3Ccircle%20cx='416'%20cy='441'%20r='28'/%3E%3Ccircle%20cx='1404'%20cy='441'%20r='28'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201774%20887'%3E%3Ccircle%20cx='416'%20cy='441'%20r='28'/%3E%3Ccircle%20cx='1404'%20cy='441'%20r='28'/%3E%3C/svg%3E"); } .logo-header { width: 92px; flex-shrink: 0; } .logo-hero { width: min(360px, 62vw); margin-inline: auto; } /* ── Hero ───────────────────────────────────────────────── */ .hero { padding-block: clamp(56px, 9vw, 104px) clamp(48px, 7vw, 80px); text-align: center; /* 氛围光：logo / h1 背后一团极淡的 accent 径向光，首屏不是纯平色块。 纯背景实现，不加元素；不做视差。 */ background: radial-gradient(ellipse 60% 36% at 50% 16%, var(--hero-glow), transparent 72%); } .pill { display: inline-block; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 14px; font-size: 0.82em; color: var(--text-2); background: var(--bg-1); } .hero .pill { margin-bottom: 28px; } .hero h1 { font-size: clamp(30px, 26px + 2vw, 52px); line-height: 1.14; letter-spacing: -0.02em; margin: 28px auto 20px; max-width: 21em; } .hero .sub { max-width: 40em; margin: 14px auto 0; color: var(--text-2); font-size: clamp(17px, 16px + 0.2vw, 19px); } .cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .btn { display: inline-block; border-radius: var(--radius-button); padding: 11px 28px; font-size: 0.95em; transition: background var(--dur-fast) var(--ease-out-quick); } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { border: 1px solid var(--border); color: var(--text-1); } .btn-ghost:hover { background: var(--bg-1); } /* ── Manifesto（hero 与 bento 之间的排版喘息区）────────────── display 级大字 + 大量留白：打断「截图墙 → 磁贴墙」的密度堆叠， 给页面第一个呼吸点。不进导航，无 id。 */ .manifesto { /* 上方 hero 截图自带大 margin，比普通 section 略收 */ padding-block: clamp(44px, 6.5vw, 80px); text-align: center; } .manifesto-lead { max-width: 26em; margin-inline: auto; font-size: clamp(20px, 18px + 0.8vw, 28px); font-weight: 650; line-height: 1.45; letter-spacing: -0.015em; color: var(--text-1); text-wrap: balance; } .manifesto .section-lead { max-width: 26em; margin: 16px auto 0; font-size: clamp(20px, 18px + 0.8vw, 28px); font-weight: 650; line-height: 1.45; letter-spacing: -0.015em; text-wrap: balance; } /* ── Screenshots ── */ .shot { margin-top: clamp(36px, 6vw, 64px); } .shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); } /* 大截图离开背景平面：hero 主图与轮播图挂截图级投影 （DSD 三联改为卡片承载，投影走卡片的 --shadow-sm） */ #shot-hero img, .carousel-track img { box-shadow: var(--shadow-shot); } /* hero 主图随当前主题换深浅版本：三态判定与 header 主题图标同机制 （跟随系统 / 显式 light / 显式 dark），JS 零参与。两张图都挂 loading="lazy"：display:none 的一侧不会被下载，切主题时才按需加载。 */ #shot-hero .shot-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #shot-hero .shot-light { display: none; } :root:not([data-theme="light"]) #shot-hero .shot-dark { display: block; } } :root[data-theme="dark"] #shot-hero .shot-light { display: none; } :root[data-theme="dark"] #shot-hero .shot-dark { display: block; } /* Signal-path trio: native DSD / DoP / DSD2PCM, same track, side by side. 三张「对照标本卡」：卡头 = 色环点 + 模式名（色环直接引用上文 legend 的 五色判定：金 / 金 / 青），面板截图居中，说明文字左对齐收进卡内。 默认 stretch 让三卡等高、底边对齐——DSD2PCM 面板天生高一截（多一级）， 等高卡片把参差吸收成留白。auto-fit 低于可读宽度时自动降 2 列、1 列； 面板原生 520px，堆叠时卡片限宽居中，避免单列把截图放大成糊。 */ .shot-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 3vw, 28px); } .shot-trio figure { display: flex; flex-direction: column; width: 100%; max-width: 548px; margin-inline: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-0); padding: 14px 14px 16px; box-shadow: var(--shadow-sm); } .trio-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 650; font-size: 0.95em; letter-spacing: -0.01em; } /* 色环点：与 legend 的 dot 同一视觉词汇（圆点 + 光环） */ .trio-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 28%, transparent); flex-shrink: 0; } .trio-good { --tone: var(--signal-good); } .trio-caution { --tone: var(--signal-caution); } .shot-trio img { border-radius: var(--radius-md); } /* .shot.shot-trio 提特异性：压过文件后方的 .shot figcaption（居中版） */ .shot.shot-trio figcaption { margin-top: 12px; text-align: left; font-size: 0.88em; color: var(--text-2); } /* ── 横向截图轮播 ────────────────────────────────────────────── 滚动、吸附、惯性、触摸拖拽、键盘方向键全部由原生 overflow + scroll-snap 提供，JS 补箭头、点位、自动轮播与环形循环；关掉 JS 依然是一条能滑的图带。 满幅单张（槽宽 = 图带宽），图带本身突破正文栏宽以放大截图主体。 */ .carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: clamp(12px, 2vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; /* 滚动盒会裁掉墨水溢出（scroller-clips-ink-overflow）：给 --shadow-shot 留足上下呼吸，多出的 34px 由 .carousel 的 margin 与点位的负 margin 抵回， 视觉间距与原 2px 版一致。 */ padding-block: 36px; } /* 图带加宽：最大 1200px，随视口收缩（-48px 兜住页边距与滚动条）， 以负 margin 相对正文栏（100%）居中——与页面同轴心，比正文宽一档。 position: relative 给左右箭头当定位上下文。 */ .carousel.shot { --carousel-w: min(100vw - 48px, 1200px); position: relative; width: var(--carousel-w); margin-top: calc(clamp(36px, 6vw, 64px) - 34px); margin-inline: calc((100% - var(--carousel-w)) / 2); } /* 左右箭头（JS 生成）：大号裸 chevron，无圆圈无底色，落在图带两侧的 留白里、不压图面。默认隐藏，只在留白够宽的视口显示——更窄的屏幕 靠手势与点位。 */ .carousel-arrow { position: absolute; top: calc(50% - 16px); transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 48px; height: 72px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; transition: color var(--dur-fast) var(--ease-out-quick); } .carousel-arrow:hover { color: var(--text-1); } .carousel-arrow svg { width: 34px; height: 34px; } .carousel-arrow--prev { left: -56px; } .carousel-arrow--next { right: -56px; } /* 图带 1200px + 两侧箭头各 56px + 页边余量：1360px 起显示 */ @media (min-width: 1360px) { .carousel-arrow { display: inline-flex; } } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track > figure { scroll-snap-align: center; margin: 0; } .carousel-dots { display: flex; justify-content: center; gap: 8px; /* 图带底部已有 36px 投影留白，负值抵回到原 18px 视觉间距 */ margin-top: -18px; } .carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--text-3); opacity: 0.32; cursor: pointer; transition: width 0.25s ease, opacity 0.25s ease, background-color 0.25s ease; } .carousel-dots button[aria-current="true"] { width: 22px; background: var(--accent); opacity: 1; } @media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } .carousel-dots button { transition: none; } } .shot figcaption { margin-top: 10px; text-align: center; color: var(--text-3); font-size: 0.88em; } /* ── Bento 介绍矩阵（Apple 发布会式特性拼盘）────────────────── 和谐来自统一（同底色、同圆角、同间距），变化来自内容尺度： 跨度混排（大/高/宽/小）+ 海报级字号 + 少量彩色与图形，不靠花底色。 */ .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; } .tile { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 118px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-1); padding: 20px 22px; } .tile-wide { grid-column: span 2; } .tile-tall { grid-row: span 2; } .tile-title { font-size: 1.16em; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; } .tile-cap { color: var(--text-3); font-size: 0.87em; } /* 海报块：内容居中、字号拉到展示级（对应苹果片子里巨大的 "5G"） */ .tile-poster { align-items: center; justify-content: center; text-align: center; gap: 8px; } .tile-poster .tile-title { font-size: clamp(26px, 14px + 2.2vw, 40px); letter-spacing: -0.02em; line-height: 1.05; } .tile-accent .tile-title { color: var(--accent); } /* 徽章药丸直接进块（复用信号链的 .verdict 样式） */ .tile .verdict { margin-top: 0; } /* 纯 SVG 迷你波形（波形进度条块的图形主体） */ .tile-wave { width: min(72%, 230px); height: auto; color: var(--text-2); } /* CJK 修复格：乱码 → 正字本身就是最强的图形，给它 poster 级的排版待遇。 单列格横排放不下海报字号，取竖排两级 + 向下箭头。 */ .tile-cjk .tile-title { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-tech); font-size: clamp(19px, 11px + 1.5vw, 28px); line-height: 1.3; letter-spacing: 0; } .tile-cjk .cjk-broken { color: var(--text-3); } .tile-cjk .cjk-arrow { color: var(--accent); font-size: 0.7em; line-height: 1; } .tile-cjk .cjk-fixed { color: var(--text-1); } /* 中心 logo 块（对应苹果片子正中的产品图）：显式钉在 4 列网格的 第 2-3 列、第 4-5 行，其余块由 dense 流环绕填充 */ .tile-logo { grid-column: 2 / 4; grid-row: 4 / 6; align-items: center; justify-content: center; } .tile-logo .ffaudio-logo { width: min(75%, 280px); } @media (max-width: 860px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 列下取消显式坐标，logo 横跨整行、随流排布 */ .tile-logo { grid-column: span 2; grid-row: auto; min-height: 150px; } } /* ── Sections ───────────────────────────────────────────── */ .section { padding-block: clamp(56px, 8vw, 96px); } .section--band { background: var(--bg-1); border-block: 1px solid var(--separator); } .kicker { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section h2 { font-size: clamp(24px, 21px + 1vw, 34px); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 16px; } /* 旗舰区（信号路径）：标题与导语上探一档，呼吸更宽， 保证本区视觉权重压过上方 bento 的海报字 */ .section--feature { position: relative; padding-block: clamp(72px, 10vw, 128px); } /* 区徽：五色谱色带（金→紫→青→洋红→灰）＝五种判定色的浓缩， 仅本区使用；色标全取 --signal-* token，深浅主题自动跟随。 顺序与下方 legend 一致，legend 即色带的展开注解。 */ .section--feature::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, var(--signal-good), var(--signal-neutral) 28%, var(--signal-caution) 52%, var(--signal-warning) 76%, var(--signal-muted) ); } .section--feature h2 { font-size: clamp(30px, 24px + 2vw, 46px); margin-bottom: 20px; } .section--feature .section-lead { font-size: clamp(17px, 16px + 0.3vw, 20px); margin-bottom: 28px; } .section--feature .chain { padding: 24px 26px; margin-top: 24px; } .section .section-lead { max-width: 46em; color: var(--text-2); margin-bottom: 12px; /* 46em 的行宽会让「刚过一行」的段落尾巴上只剩两三个字， pretty 让浏览器把末行凑够长度；不支持的浏览器按普通换行退场。 */ text-wrap: pretty; } .section h3 { font-size: 1.12em; margin: 40px 0 14px; } /* ── Signal chain diagram (stylized, NOT a UI screenshot) ── */ .chain { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-0); padding: 20px 22px; margin-top: 20px; } .section--band .chain { box-shadow: var(--shadow-sm); } .chain-title { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; } .chain-stages { display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; min-width: 0; } .stage { display: flex; flex-direction: column; justify-content: center; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-1); padding: 8px 14px; min-width: 0; transition: background var(--dur-fast) var(--ease-out-quick), border-color var(--dur-fast) var(--ease-out-quick); } /* 示意图的「可触摸」质感：节点 hover 提亮，不做常驻动画 */ .stage:hover { background: var(--bg-2); border-color: color-mix(in srgb, var(--text-3) 50%, transparent); } .stage--dsp:hover { border-color: color-mix(in srgb, var(--signal-warning) 75%, transparent); } .stage--src:hover { border-color: color-mix(in srgb, var(--signal-caution) 75%, transparent); } .stage-kind { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .stage-name { font-size: 0.92em; white-space: nowrap; } .stage--dsp { border-color: color-mix(in srgb, var(--signal-warning) 45%, transparent); } .stage--dsp .stage-kind { color: var(--signal-warning); } /* 速率域转换（SRC / DSD2PCM）：青，对应 legend 第三级——重建速率域， 但无主观调音，所以不是洋红 */ .stage--src { border-color: color-mix(in srgb, var(--signal-caution) 45%, transparent); } .stage--src .stage-kind { color: var(--signal-caution); } .chain-arrow { align-self: center; color: var(--text-3); user-select: none; } .verdict { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; border-radius: var(--radius-pill); padding: 7px 16px; font-size: 0.9em; background: color-mix(in srgb, var(--tone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); } .verdict::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); flex-shrink: 0; } .verdict--good { --tone: var(--signal-good); } .verdict--warning { --tone: var(--signal-warning); } .verdict strong { font-weight: 650; } .chain-note { margin-top: 14px; color: var(--text-3); font-size: 0.85em; } /* ── Fidelity legend (badge/halo colors + why each level exists) ── flex + 居中：5 项排 3+2 时末行自动居中对称，不留左对齐的缺口 */ .legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; } .legend li { flex: 1 1 300px; max-width: 336px; } .legend li { display: flex; gap: 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-0); padding: 14px 16px; min-width: 0; } .section--band .legend li { box-shadow: var(--shadow-sm); } /* 圆点 + 外圈光环，呼应应用内徽章的色环 */ .legend .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 28%, transparent); flex-shrink: 0; margin-top: 7px; } .legend strong { display: block; margin-bottom: 3px; } .legend p { color: var(--text-2); font-size: 0.9em; } .legend-good { --tone: var(--signal-good); } .legend-neutral { --tone: var(--signal-neutral); } .legend-caution { --tone: var(--signal-caution); } .legend-warning { --tone: var(--signal-warning); } .legend-muted { --tone: var(--signal-muted); } /* ── 三不宣言（不假设 / 不轻信 / 不将就）：大字 + 说明，不用卡片 ── */ .creed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; margin-top: 48px; } .creed-title { font-size: clamp(26px, 20px + 1.6vw, 38px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; } .creed-title .no { color: var(--accent); } .creed p { color: var(--text-2); font-size: 0.95em; margin-top: 10px; } @media (max-width: 720px) { .creed { grid-template-columns: 1fr; } } /* ── Card grids ─────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; } .card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-0); padding: 20px 22px; min-width: 0; } .section--band .card { box-shadow: var(--shadow-sm); } /* 卡片图标：18px 线性小图，与 header 主题切换图标同笔触 （stroke 2 / round cap）。静默态 --text-3，hover 随卡片提亮。 */ .card-icon { display: block; width: 18px; height: 18px; margin-bottom: 10px; color: var(--text-3); transition: color var(--dur-fast) var(--ease-out-quick); } .card:hover .card-icon { color: var(--text-2); } .card h4 { font-size: 1em; margin-bottom: 8px; } .card p { color: var(--text-2); font-size: 0.92em; } .card .tag { display: inline-block; margin-left: 6px; border-radius: var(--radius-pill); border: 1px solid var(--border); padding: 1px 9px; font-size: 11.5px; color: var(--text-3); vertical-align: 2px; } /* ── Tables ─────────────────────────────────────────────── */ /* 4px breathing room + negative margin so cell focus rings / shadows are not clipped by the scroll box (scroller-clips-ink-overflow). */ .table-wrap { overflow-x: auto; margin: 16px -4px 0; padding: 4px; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--separator); vertical-align: top; } th { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; white-space: nowrap; } td:first-child { white-space: nowrap; font-weight: 550; } td { color: var(--text-2); } /* ── Format chips ───────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 16px; } .chips li { border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-1); padding: 5px 15px; font-size: 0.9em; white-space: nowrap; } .chips li small { color: var(--text-3); font-size: 0.86em; } .section--band .chips li { background: var(--bg-0); } /* ── Download / notice ──────────────────────────────────── */ /* 下载按钮 + 网盘镜像弹层（原生 details，无 JS） */ .dl { position: relative; display: inline-block; } .dl summary { list-style: none; display: inline-block; } .dl summary::-webkit-details-marker { display: none; } .dl-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; min-width: 280px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-0); box-shadow: var(--shadow-sm); } .dl-link { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--text-1); } .dl-link:hover { background: var(--bg-1); text-decoration: none; } .dl-link small { color: var(--text-3); white-space: nowrap; } .notice { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-1); padding: 24px 26px; margin-top: 28px; } .notice h4 { margin-bottom: 12px; } .notice ul { list-style: none; } .notice li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 0.94em; } .notice li + li { margin-top: 12px; } .notice li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); } .notice strong { color: var(--text-1); } /* ── Requirements list ──────────────────────────────────── */ .req { margin-top: 20px; max-width: 40em; } .req div { display: flex; gap: 18px; padding-block: 12px; border-bottom: 1px solid var(--separator); min-width: 0; } .req dt { flex: 0 0 9.5em; color: var(--text-3); } .req dd { color: var(--text-1); min-width: 0; } /* ── Colophon（签名式收尾）────────────────────────────────── 与正文区拉开排版身份：短 hairline 起笔、行宽收窄到 34em、 行高上探、居中排布，结尾一枚小号灰调 logo 作签名收笔。 */ #colophon { padding-block: clamp(72px, 10vw, 120px); text-align: center; } #colophon .container { max-width: calc(34em + 2 * var(--page-pad)); } #colophon .container::before { content: ""; display: block; width: min(200px, 40%); margin: 0 auto clamp(40px, 6vw, 60px); border-top: 1px solid var(--separator); } #colophon h2 { margin-bottom: 22px; } #colophon .section-lead { max-width: 34em; margin-inline: auto; line-height: 1.75; } #colophon .section-lead + .section-lead { margin-top: 10px; } /* 首段字号升一档（不能用 :first-of-type——kicker 也是

） */ #colophon h2 + .section-lead { font-size: clamp(18px, 17px + 0.3vw, 21px); } /* 签名 logo：灰调收笔，双色遮罩统一压到 --text-3 */ .logo-colophon { width: 120px; margin: 48px auto 0; --logo-ink: var(--text-3); --logo-accent: var(--text-3); } /* ── Footer ─────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--separator); padding-block: 28px; } .site-footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-3); font-size: 0.88em; } /* ── 微动效层（克制：hover 反馈 + 一次性入场淡入）────────────── hover：磁贴与卡片底色提一档 + 轻浮起。transition 逐项列出，不用 all。 */ .tile, .card { transition: background var(--dur-fast) var(--ease-out-quick), transform var(--dur-fast) var(--ease-out-quick), border-color var(--dur-fast) var(--ease-out-quick); } .tile:hover { background: var(--bg-2); transform: translateY(-2px); } .card:hover { background: var(--bg-1); transform: translateY(-2px); } /* 入场淡入： 内联脚本在支持 IntersectionObserver 时给 加 .js， 初始隐藏全部挂在 .js 下——无 JS / 老浏览器时页面完整可见（渐进增强）。 site.js 在容器首次进入视口时加 .is-in，一次性。 */ .js section > .container { opacity: 0; transform: translateY(12px); transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-out-quick); } .js section > .container.is-in { opacity: 1; transform: none; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 640px) { .header-nav { display: none; } .req div { flex-direction: column; gap: 2px; } .req dt { flex-basis: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* 微动效全关：hover 位移与过渡、入场淡入 */ .tile, .card, .stage { transition: none; } .tile:hover, .card:hover { transform: none; } .js section > .container { opacity: 1; transform: none; transition: none; } }