/* ============================================================ Citeverge ·Frost Focus 覆写层 ---------------------------------------------------------------- 用途：叠加在现有全局样式之后，为工作台增加毛玻璃质感与动效。 原理：纯覆写层，不修改任何组件结构与文案。 接入方式：app/layout.tsx 在 globals/business/admin 样式之后导入 构建时同步为 public/frost-focus.css，供独立账号页面共用 ⚠️ 必须放在原有样式之后，否则优先级不足会失效。 ⚠️ 依赖以下既有类名，如后续重构需同步核对： .app-sidebar .topbar .panel .marketing-stat .compact-panel .workspace-hero .workflow-step .workspace-surface .marketing-cards ============================================================ */ /* ============================================================ V2 · FROST FOCUS — 霜聚微光 差异化：更厚的磨砂玻璃 + 冷调环境光 + 弹性动效 与 V1 的区别：模糊值更高（28px vs 18px），饱和度更强，冷色调， 悬停位移更大（-4px + 轻微放大），按钮微光更明显 ============================================================ */ :root{ --frost-blur:28px; --frost-sat:200%; /* 更厚的玻璃：白底占比更高，模糊更强 */ --frost-1:rgba(255,255,255,.7); --frost-2:rgba(255,255,255,.82); --frost-3:rgba(255,255,255,.62); --frost-line:rgba(255,255,255,.85); --frost-edge:rgba(255,255,255,.95); --frost-line-soft:rgba(15,23,42,.07); /* 双层阴影：贴近 + 悬浮，玻璃感的关键 */ --frost-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 12px -4px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.95); --frost-shadow-lift: 0 2px 4px rgba(15,23,42,.04), 0 20px 44px -16px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,1); /* 冷调环境光：蓝青为主，与V1 的暖淡紫区分 */ --cool-1:rgba(125,211,252,.2); --cool-2:rgba(165,180,252,.16); --cool-3:rgba(103,232,249,.12); } /* 冷调环境光 */ html::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(1100px 680px at 4% -10%,var(--cool-1),transparent 64%), radial-gradient(940px 600px at 96% 0%,var(--cool-2),transparent 62%), radial-gradient(820px 560px at 56% 106%,var(--cool-3),transparent 64%); } /* ---------- 侧栏 ---------- */ .app-sidebar{ background:rgba(248,250,252,.74)!important; -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); border-right:1px solid var(--frost-line-soft)!important; box-shadow:inset -1px 0 0 rgba(255,255,255,.7); transition:background .34s ease; } /* ---------- 顶栏 ---------- */ .topbar{ background:rgba(248,250,252,.72)!important; -webkit-backdrop-filter:blur(24px) saturate(200%); backdrop-filter:blur(24px) saturate(200%); border-bottom:1px solid rgba(15,23,42,.07)!important; transition:background .34s ease,box-shadow .34s ease; } body.scrolled .topbar{ background:rgba(248,250,252,.86)!important; box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 30px -20px rgba(15,23,42,.3); } /* ---------- 面板：更厚的霜面 ---------- */ .panel, .marketing-stat, .compact-panel{ background:var(--frost-2)!important; -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); border:1px solid var(--frost-line)!important; box-shadow:var(--frost-shadow)!important; transition:transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .38s cubic-bezier(.22,1,.36,1), border-color .38s ease; } .panel:hover, .marketing-stat:hover, .compact-panel:hover{ transform:translateY(-4px) scale(1.012); box-shadow:var(--frost-shadow-lift)!important; border-color:var(--frost-edge)!important; } /* ---------- Hero：霜面 +冷调渐变 ---------- */ .workspace-hero{ background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(240,249,255,.72))!important; -webkit-backdrop-filter:blur(32px) saturate(200%); backdrop-filter:blur(32px) saturate(200%); border:1px solid var(--frost-line)!important; box-shadow:var(--frost-shadow),0 24px 60px -28px rgba(15,23,42,.24)!important; border-radius:22px; position:relative;overflow:hidden; } .workspace-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(155deg,rgba(255,255,255,.75),transparent 46%), radial-gradient(420px 180px at 88% 0%,rgba(125,211,252,.16),transparent 70%); } .workspace-hero h2{ position:relative; background:linear-gradient(96deg,#0f172a 26%,#0284c7 58%,#4f46e5 94%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* ---------- 三步：按下式反馈 ---------- */ .workflow-step{ background:rgba(255,255,255,.58)!important; border:1px solid rgba(255,255,255,.8)!important; border-radius:16px; transition:transform .34s cubic-bezier(.34,1.56,.64,1), background .34s ease,box-shadow .34s ease; } .workflow-step:hover{ transform:translateY(-3px) scale(1.015); background:rgba(255,255,255,.88)!important; box-shadow:0 14px 32px -16px rgba(15,23,42,.26),inset 0 1px 0 rgba(255,255,255,1); } .workflow-step:hover svg{transform:translateX(4px) scale(1.1)} .workflow-step svg{transition:transform .34s cubic-bezier(.34,1.56,.64,1)} .marketing-overview .hero-workflow{ display:grid;gap:12px;border:0;padding:0; } .marketing-overview .workflow-step, .marketing-overview .workflow-step:last-child{ min-height:88px;padding:18px 20px;gap:16px; } .marketing-overview .workflow-step>div{min-width:0} .marketing-overview .workflow-step strong{ display:block;font-size:14px;font-weight:600;line-height:1.45; } .marketing-overview .workflow-step p{ margin:6px 0 0;font-size:12px;line-height:1.6; } .marketing-overview .workflow-step>svg{ width:18px;height:18px;flex-shrink:0; } /* ---------- 按钮：更强微光 + 磁吸 ---------- */ [data-slot="button"]{ position:relative;overflow:hidden; transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease,background .26s ease; } [data-slot="button"]::after{ content:"";position:absolute;top:-50%;left:-140%;width:55%;height:200%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-20deg); transition:left .72s cubic-bezier(.22,1,.36,1); } [data-slot="button"]:hover::after{left:150%} [data-slot="button"]:hover{transform:translateY(-2px)} [data-slot="button"]:active{transform:translateY(0) scale(.96)} /* ---------- 统计数字 ---------- */ .marketing-stat strong{ transition:transform .38s cubic-bezier(.34,1.56,.64,1),color .3s ease; } .marketing-stat:hover strong{transform:scale(1.07)} /* ---------- 入场：带缩放的弹性渐显 ---------- */ [data-anim]{opacity:1;transform:none} [data-anim].in-view{opacity:1;transform:none} /* ---------- 焦点可见 ---------- */ :where(button,a,summary,[tabindex]):focus-visible{ outline:2px solid #0284c7;outline-offset:2px;border-radius:8px; } /* ---------- 无障碍 ---------- */ @media (prefers-reduced-motion:reduce){ /* The existing logo owns its playback and click-to-pause behavior. */ :where(*:not(.cite-symbol,.cite-left,.cite-right,.cite-signal)),*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } [data-anim]{opacity:1!important;transform:none!important} .panel:hover,.marketing-stat:hover,.workflow-step:hover{transform:none!important} } /* ============================================================ 关键修正：让玻璃真的能折射 原页面 .workspace-surface 是不透明纯色 #f5f5f7， 会把 body::before 的环境光完全遮住 —— 玻璃就看不出效果。 这里把底色改为透明，环境光才能被玻璃层折射。 ============================================================ */ .workspace-surface{background:transparent!important} body{background:transparent!important} html{background:#fbfbfd; isolation:isolate} /* The same supplied glass surfaces across every existing front-end module. */ :is(.stats-grid,.empty-panel,.onboarding,.content-intro,.site-geo-hero, .feedback-create,.feedback-item,.pricing-grid>section,.facts-process li, .facts-boundaries,.plan-card,.account-page .card){ background:var(--frost-2)!important; border-color:var(--frost-line)!important; -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); box-shadow:var(--frost-shadow)!important; } :is(.ledger-card,.marketing-demo-steps li,.flow-metrics>div,.account-facts>div, .provider-option,.billing-mode-picker button,.broadcast-form,.broadcast-unlock, .guide-distribution,.guide-progress,.guide-prerequisite,.guide-path-intro, .guide-next,.evidence-note,.answer-text,.flow-answer,.llms-panel pre, .api-endpoints,.backup-counts div,.account-hero,.competitor,.site-autofix-note){ background:var(--frost-1); border-color:var(--frost-line-soft); box-shadow:var(--frost-shadow); } .demo-banner{background:var(--frost-2);border-color:var(--frost-line);box-shadow:var(--frost-shadow)} .onboarding-main{background:transparent} :is(.connection-summary,.ai-access-summary){background:var(--frost-line-soft)} :is(.connection-summary,.ai-access-summary)>div{background:var(--frost-2)} :is(.table-toolbar,.panel [data-slot="table-head"],thead tr,.form-footer){background:rgba(248,250,252,.72)} :is(.flow-tabs,.guide-paths){background:rgba(235,242,249,.72);box-shadow:inset 0 1px 0 var(--frost-edge)} .flow-tabs button[aria-current="page"]:not(.flow-tab-featured), .guide-paths button[aria-pressed="true"]{background:var(--frost-2);box-shadow:var(--frost-shadow)} .provider-option.selected,.billing-mode-picker button.selected{background:rgba(225,240,255,.82);border-color:#0071e3} .broadcast-form{min-width:0} @media(max-width:640px){ .broadcast-form>*{min-width:0} .broadcast-primary,.broadcast-unlock button{height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere;text-align:center} } :is([data-slot="dialog-content"],[data-slot="alert-dialog-content"],[data-slot="sheet-content"], [data-slot="select-content"],[data-slot="dropdown-menu-content"]){ background:rgba(250,252,255,.94)!important; border-color:var(--frost-line)!important; -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); box-shadow:var(--frost-shadow-lift); } :is(.field,.ledger-field,.ledger-filters,.ledger-card,.feedback-panel) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select), .flow-stack select,.product-compose-dialog select,.monitoring-options select, [data-slot="input"],[data-slot="textarea"],[data-slot="select-trigger"],.scope-row [data-slot="select-trigger"], .language-switch select,.account-page .languages select{ background:rgba(255,255,255,.76); border-color:rgba(100,116,139,.25); box-shadow:inset 0 1px 2px rgba(15,23,42,.025); } :is(.field,.ledger-field,.ledger-filters,.ledger-card,.feedback-panel) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select):focus-visible, :is(.flow-stack select,.product-compose-dialog select,.monitoring-options select, [data-slot="input"],[data-slot="textarea"],[data-slot="select-trigger"],.scope-row [data-slot="select-trigger"], .language-switch select,.account-page .languages select):focus-visible{ outline:2px solid #0071e3; outline-offset:2px; border-color:#0071e3; box-shadow:none; } .pricing-page>aside{background:rgba(225,240,255,.66)} .pricing-page h1,.account-page .intro h1,.site-geo-hero h2,.content-intro h2{ background:linear-gradient(96deg,#0f172a 26%,#0284c7 58%,#4f46e5 94%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .account-page .button{ position:relative;overflow:hidden; box-shadow:0 6px 18px -8px rgba(0,113,227,.5); transition:transform .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease,background .26s ease; } .account-page .button::after{ content:"";position:absolute;top:-50%;left:-140%;width:55%;height:200%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-20deg);transition:left .72s cubic-bezier(.22,1,.36,1); } .account-page .button:hover::after{left:150%} .account-page .button:hover{transform:translateY(-2px)} .account-page .button:active{transform:translateY(0) scale(.98)} .account-page :is(.eyebrow,.intro-copy,.steps p,.lead,.hint,.help,.privacy,.bottom,.password-rules){color:#5f6673} @media(prefers-reduced-motion:reduce){ .account-page .button:hover,.account-page .button:active{transform:none} .account-page .button::after{display:none} } @media(forced-colors:active){ .workspace-hero h2,.pricing-page h1,.account-page .intro h1,.site-geo-hero h2,.content-intro h2{ background:none;-webkit-text-fill-color:CanvasText;color:CanvasText; } } /* ============================================================ 可访问性修正：原页面弱化文字 #86868b 在玻璃底上仅约 3.5:1， 低于 WCAG AA(4.5:1)。这里统一加深到 #5f6673(≈5.6:1)， 只影响玻璃层变淡后的可读性，不动原设计层级关系。 ============================================================ */ .marketing-stat > span, .marketing-stat span:first-child, .panel-heading p, .compact-panel > .muted, .marketing-stat p{color:#5f6673!important} .hero-description, .workflow-step p, .site-section-heading p, .workspace-footer, .workspace-footer p{color:#5f6673!important} .demo-banner span{color:#5f6673!important} /* ============================================================ 入场动画安全策略 默认内容可见。只有当 JS 就绪并给 html 加了 .anim-armed， 才启用「先隐后显」，避免 JS 失效时内容永久不可见。 ============================================================ */ html.anim-armed [data-anim]{opacity:0;transform:translateY(16px)} html.anim-armed [data-anim].in-view{opacity:1;transform:none} /* Existing shadcn sidebar surfaces otherwise mask the supplied glass layer. */ .workspace-hero > *{position:relative} .app-sidebar [data-slot="sidebar-inner"]{background:transparent} [data-slot="sidebar"][data-mobile="true"]{ background:rgba(248,250,252,.74); -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); backdrop-filter:blur(var(--frost-blur)) saturate(var(--frost-sat)); } [data-anim]{transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)} [data-slot="button"]::after{pointer-events:none} @media(prefers-reduced-motion:reduce){ .compact-panel:hover,[data-slot="button"]:hover,[data-slot="button"]:active, .workflow-step:hover svg,.marketing-stat:hover strong{transform:none!important} [data-slot="button"]::after{display:none} } /* ============================================================ Cross-Platform Fix · 跨平台对齐补丁 ---------------------------------------------------------------- 叠加在 frost-focus.css 之后使用（顺序不可颠倒）。 设计原则： · 字体栈 → 全局统一（两端保持一致，这是目标不是副作用） · 视觉补偿 → 仅对 Windows 生效，不改变 macOS 的既有观感 平台识别由 MotionLayer 注入的 html.is-windows 完成。 ============================================================ */ /* ============================================================ 第1 部分 · 全局生效（让两端字体表现一致） ============================================================ */ /* 显式字体栈：补齐 Windows 缺失的字体，避免回落到难看的默认字 */ :root{ --f-ui:-apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Roboto, Helvetica, Arial, sans-serif; --f-num:"SF Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace; } html, body, #__next, main, .app-shell, .workspace-surface, .workspace-main{ font-family:var(--f-ui); } /* 数字用等宽变体，保证「12」「3」这类数字跨平台宽度一致。 这条两端都需要 —— macOS 的 SF Pro 数字也更规整。 */ .marketing-stat strong, .kpi-v, .rail-stat b, .fact-v, strong, b{ font-variant-numeric:tabular-nums; } /* 关闭字体合成（伪粗体/斜体）。 macOS 系统字体本身足够纤细，不需要合成；Windows 上合成会让笔画糊。 */ body{ font-synthesis:none; } /* ============================================================ 第 2 部分 · 仅 Windows 生效的视觉补偿 下面所有规则都在 html.is-windows 下，macOS 完全不受影响 ============================================================ */ /* ---------- 2.1 滚动条对齐 ---------- macOS 用隐藏式滚动条(0px)，Windows 用经典滚动条(15px)。 仅在 Windows 上收窄到 8px：既减小与 macOS 的布局差异， 又不破坏 macOS 的隐藏式偏好。 */ html.is-windows{ scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.18) transparent; } html.is-windows ::-webkit-scrollbar{width:8px;height:8px} html.is-windows ::-webkit-scrollbar-track{background:transparent} html.is-windows ::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.18);border-radius:999px; } html.is-windows ::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.3)} html.is-windows .nav, html.is-windows .app-sidebar [data-slot="sidebar-menu"]{ scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.15) transparent; } html.is-windows .nav::-webkit-scrollbar, html.is-windows .app-sidebar [data-slot="sidebar-menu"]::-webkit-scrollbar{width:8px} html.is-windows .nav::-webkit-scrollbar-thumb, html.is-windows .app-sidebar [data-slot="sidebar-menu"]::-webkit-scrollbar-thumb{ background:rgba(15,23,154,.15);border-radius:999px; } /* ---------- 2.2 字重对齐 ---------- Segoe UI 在 600/700 下笔画明显粗于 SF Pro。 仅 Windows 降到 650，macOS 保持原 700 不动。 */ html.is-windows .marketing-stat strong, html.is-windows .kpi-v, html.is-windows .rail-stat b, html.is-windows .fact-v, html.is-windows strong{ font-weight:650; } /* ---------- 2.3 玻璃观感补偿 ---------- Windows 的 backdrop-filter 在浅色底上合成更"实"， 略降不透明度让它更通透。仅 Windows 生效。 */ html.is-windows .app-sidebar{background:rgba(252,252,253,.68)!important} html.is-windows .topbar{background:rgba(252,252,253,.68)!important} html.is-windows body.scrolled .topbar{background:rgba(252,252,253,.86)!important} html.is-windows .panel, html.is-windows .marketing-stat, html.is-windows .compact-panel{background:rgba(255,255,255,.78)!important} html.is-windows .workspace-hero{ background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(240,249,255,.7))!important; } /* ---------- 2.4 边框与阴影补偿 ---------- 浅色底 + 细边框在 Windows 上更易"糊"， 加深描边、提亮内高光。仅 Windows 生效。 */ html.is-windows .panel, html.is-windows .marketing-stat, html.is-windows .compact-panel, html.is-windows .workflow-step{ border-color:rgba(255,255,255,.92)!important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -4px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,1)!important; } html.is-windows .app-sidebar{border-right-color:rgba(15,23,42,.09)!important} html.is-windows .topbar{border-bottom-color:rgba(15,23,42,.09)!important} /* Preserve the supplied hover elevation after the Windows base shadow. */ html.is-windows .panel:hover, html.is-windows .marketing-stat:hover, html.is-windows .compact-panel:hover{box-shadow:var(--frost-shadow-lift)!important} html.is-windows .workflow-step:hover{ box-shadow:0 14px 32px -16px rgba(15,23,42,.26),inset 0 1px 0 rgba(255,255,255,1)!important; } /* ---------- 2.5 栅格化稳定 ---------- Windows 在分数尺寸下的阴影栅格化更易抖动， 仅 Windows 固定行高。仅 Windows 生效。 */ html.is-windows .marketing-stat strong, html.is-windows .kpi-v, html.is-windows .rail-stat b, html.is-windows .fact-v, html.is-windows strong{ line-height:1; } /* ---------- 2.6 合成层稳定性 ---------- Windows 滚动时玻璃层偶有闪烁，hover 期间提升图层。 仅 Windows 生效，且不在非 hover 时常驻占显存。 */ html.is-windows .panel:hover, html.is-windows .marketing-stat:hover, html.is-windows .compact-panel:hover, html.is-windows .workflow-step:hover{ will-change:transform; } html.is-windows .panel:not(:hover), html.is-windows .marketing-stat:not(:hover), html.is-windows .compact-panel:not(:hover){ will-change:auto; } /* ============================================================ 第 3 部分 · 降级（两端通用） ============================================================ */ /* 不支持 backdrop-filter 时给不透明底，避免文字不可读 */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .app-sidebar,html.is-windows .app-sidebar{background:#fafbfc!important} .topbar,html.is-windows .topbar,html.is-windows body.scrolled .topbar{background:#fbfbfd!important} .panel, .marketing-stat, .compact-panel, html.is-windows .panel, html.is-windows .marketing-stat, html.is-windows .compact-panel{background:#fff!important} .workspace-hero,html.is-windows .workspace-hero{background:#f8fafc!important} } /* 减少动效 */ @media (prefers-reduced-motion:reduce){ /* Keep the existing brand animation and its click-to-pause control unchanged. */ :where(*:not(.cite-symbol,.cite-left,.cite-right,.cite-signal)),*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }