/* ============================================================ 汽修 GEO · 内容工作室设计系统（studio.css） 品牌主色：深邃墨蓝 (deep ink blue) 主题：亮 / 暗 / 跟随系统（data-theme 切换） 落地方式：路线 A（CDN Tailwind 叠加，不动构建） layout 引用 ， ============================================================ */ /* ---------- 基础重置 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background-color: var(--bg-page); /* 极淡品牌光晕：让玻璃卡模糊/描边有"存在感"，避免大面积纯色显平 */ background-image: radial-gradient(60rem 42rem at 12% -8%, rgba(30,58,95,.10), transparent 60%), radial-gradient(48rem 40rem at 102% 4%, rgba(6,182,212,.08), transparent 55%); background-attachment: fixed; color: var(--text-primary); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* ============================================================ 1) 设计令牌 ============================================================ */ :root { /* —— 品牌色：深邃墨蓝色阶 —— */ --ink-50: #EEF2F8; --ink-100: #D7E0EC; --ink-200: #B0C2D8; --ink-300: #819AB9; --ink-400: #506F9B; --ink-500: #314F79; --ink-600: #1E3A5F; /* 主色 primary */ --ink-700: #18304F; --ink-800: #122440; --ink-900: #0B1830; /* —— 中性灰（冷调，配合墨蓝） —— */ --gray-50: #F6F8FB; --gray-100: #EEF1F6; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* —— 语义色（小面积点缀） —— */ --success: #0F7A5A; --warning: #B7791F; --danger: #C0392B; --info: var(--ink-600); /* —— 强调色：亮青（专用于 CTA / 关键行动） —— */ --accent-400: #38E0F2; --accent-500: #06B6D4; /* 主强调 */ --accent-600: #0891B2; --accent-glow: rgba(6, 182, 212, .38); --accent-ink: #042A33; /* 亮青底上的文字色（深青黑，保证对比） */ /* —— 主题变量：亮色默认 —— */ --bg-page: #F4F6FA; --bg-surface: #FFFFFF; --bg-surface-2: #EEF2F8; --text-primary: #0F1B2D; --text-secondary: #51607A; --text-tertiary: #8A99AE; --border: #E4E9F1; --border-strong: #CBD5E1; --shadow-card: 0 1px 2px rgba(15,27,45,.04), 0 6px 18px rgba(15,27,45,.06); --ring: var(--ink-500); /* —— 间距尺度 —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* —— 圆角 —— */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px; /* —— 字体 —— */ --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --lh-tight: 1.3; --lh-base: 1.6; /* —— 动效 —— */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* 物理弹簧缓动：按钮/磁吸按压 */ --dur: .25s; --dur-slow: .4s; } /* ---------- 暗色主题 ---------- */ [data-theme="dark"] { --bg-page: #0A111E; --bg-surface: #111C2E; --bg-surface-2: #182438; --text-primary: #E7ECF4; --text-secondary: #9DB0C6; --text-tertiary: #6B7E96; --border: #23344E; --border-strong: #34465F; --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.38); --ring: var(--ink-400); --ink-600: #2F5688; /* 暗色下主色略提亮保证对比 */ /* 强调色暗色下保持高亮（青色在暗底上最跳） */ --accent-400: #4FE9F8; --accent-500: #22D3EE; --accent-600: #0EC5E8; --accent-glow: rgba(34, 211, 238, .45); --accent-ink: #042A33; } [data-theme="dark"] body { background-image: radial-gradient(60rem 42rem at 12% -8%, rgba(47,86,136,.22), transparent 60%), radial-gradient(48rem 40rem at 102% 4%, rgba(34,211,238,.12), transparent 55%); } /* ---------- 跟随系统 ---------- */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg-page: #0A111E; --bg-surface: #111C2E; --bg-surface-2: #182438; --text-primary: #E7ECF4; --text-secondary: #9DB0C6; --text-tertiary: #6B7E96; --border: #23344E; --border-strong: #34465F; --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.38); --ring: var(--ink-400); --ink-600: #2F5688; } } [data-theme="auto"] body { background-image: radial-gradient(60rem 42rem at 12% -8%, rgba(47,86,136,.22), transparent 60%), radial-gradient(48rem 40rem at 102% 4%, rgba(34,211,238,.12), transparent 55%); } /* ============================================================ 2) 基础组件类（全站复用） ============================================================ */ /* 卡片：玻璃感 + 悬浮抬升 —— 升级为真玻璃（内高光 + 色相阴影 + 渐变发光描边） */ .studio-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); /* 外投射带色相（非纯黑）+ 顶部内高光模拟边缘折射 */ box-shadow: var(--shadow-card), 0 18px 40px -12px rgba(30,58,95,.22), inset 0 1px 0 rgba(255,255,255,.55); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* 渐变发光描边：用伪元素 mask 画一圈 1px 亮青描边，hover 时增强 */ .studio-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(56,224,242,.42), rgba(6,182,212,.10) 45%, rgba(30,58,95,.18) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; transition: opacity var(--dur) var(--ease); } .studio-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-card), 0 26px 54px -14px rgba(30,58,95,.30), inset 0 1px 0 rgba(255,255,255,.6); } .studio-card:hover::before { opacity: 1; } [data-theme="dark"] .studio-card { box-shadow: var(--shadow-card), 0 18px 40px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10); } [data-theme="dark"] .studio-card::before { background: linear-gradient(140deg, rgba(79,233,248,.55), rgba(34,211,238,.12) 45%, rgba(80,111,155,.28) 100%); } [data-theme="dark"] .studio-card:hover { box-shadow: var(--shadow-card), 0 26px 54px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14); } /* 按钮：磁吸过渡基线 */ .studio-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 500; font-family: var(--font-sans); cursor: pointer; border: 1px solid transparent; transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease-spring), border-color var(--dur) var(--ease); } .studio-btn:active { transform: translateY(1px) scale(.97); } .studio-btn-primary { background: var(--ink-600); color: #fff; } .studio-btn-primary:hover { background: var(--ink-700); box-shadow: 0 8px 22px rgba(30,58,95,.35); } .studio-btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); } .studio-btn-ghost:hover { background: var(--bg-surface-2); } .studio-btn:disabled { opacity: .55; cursor: not-allowed; } /* CTA 强调按钮：亮青底 + 深青字 + 青色发光，两主题都醒目 */ .studio-btn-accent { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--accent-ink); font-weight: 600; box-shadow: 0 6px 20px var(--accent-glow); } .studio-btn-accent:hover { background: linear-gradient(135deg, var(--accent-400), var(--accent-500)); box-shadow: 0 10px 30px var(--accent-glow); transform: translateY(-1px); } .studio-btn-accent:active { transform: translateY(1px) scale(.99); } /* 输入框 / 文本域 */ .studio-input { width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); font-size: var(--fs-base); font-family: var(--font-sans); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .studio-input::placeholder { color: var(--text-tertiary); } .studio-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); } /* 标签页 */ .studio-tab { padding: 8px 14px; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .studio-tab[aria-selected="true"], .studio-tab.active { background: var(--bg-surface-2); color: var(--text-primary); font-weight: 500; } /* 徽章 */ .studio-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; background: var(--bg-surface-2); color: var(--text-secondary); } .studio-badge-primary { background: color-mix(in srgb, var(--ink-600) 12%, transparent); color: var(--ink-600); } /* 玻璃拟态导航 */ .studio-nav { background: color-mix(in srgb, var(--bg-surface) 86%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } /* 磁吸元素（JS 设置 --mx/--my 变量驱动位移；:active 用 --ms 实现按压反馈，避免被位移覆盖） */ .studio-magnetic { --mx: 0px; --my: 0px; --ms: 1; transform: translate(var(--mx), var(--my)) scale(var(--ms)); transition: transform var(--dur) var(--ease-spring); will-change: transform; } .studio-magnetic:active { --ms: .96; } /* 复制成功轻提示（Toast） */ .studio-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--ink-700); color: #fff; padding: 10px 18px; border-radius: var(--r-full); font-size: var(--fs-sm); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index: 100; } .studio-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ 3) 全站外壳配套类（导航 / Logo / 主题按钮） ============================================================ */ /* Logo：墨蓝→青 渐变文字 */ .studio-logo { font-size: 1.25rem; font-weight: 700; letter-spacing: .3px; background: linear-gradient(100deg, var(--ink-600), var(--ink-400) 70%, #3FA7C4); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="dark"] .studio-logo { background: linear-gradient(100deg, #6FA0D6, #3FA7C4); -webkit-background-clip: text; background-clip: text; color: transparent; } .studio-logo-sub { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; } /* 导航链接 */ .studio-nav-link { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; padding: 6px 10px; border-radius: var(--r-md); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .studio-nav-link:hover { color: var(--ink-600); background: var(--bg-surface-2); } [data-theme="dark"] .studio-nav-link:hover { color: var(--ink-400); } /* 主题切换按钮（亮/暗/跟随 循环） */ .studio-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg-surface-2); color: var(--text-secondary); cursor: pointer; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); font-size: 16px; line-height: 1; } .studio-theme-toggle:hover { color: var(--ink-600); border-color: var(--border-strong); transform: translateY(-1px); } [data-theme="dark"] .studio-theme-toggle:hover { color: var(--ink-400); } /* 页面容器（替代散落的 max-w-6xl 工具类，统一节奏） */ .studio-container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; } /* 滚动入场（全局可用：元素加 .reveal，进入视口加 .in；--d 可选错峰延迟） */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-spring) var(--d, 0s), transform .7s var(--ease-spring) var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* 小标签（eyebrow）：卡片/区块上方一行极小字点缀，增强层级与精致感 */ .studio-eyebrow { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-600); background: color-mix(in srgb, var(--accent-500) 12%, transparent); } [data-theme="dark"] .studio-eyebrow { color: var(--accent-400); } /* 正文限宽（长文/生成结果更易读，约 65 字符一行） */ .studio-prose { max-width: 65ch; } /* ============================================================ 4) 暗色桥接层（渐进适配现有 Tailwind 灰白页面） 仅覆写少量高频工具类，避免暗色下整页刺眼；逐页套 .studio-* 后自然失效。 ============================================================ */ [data-theme="dark"] .bg-white { background: var(--bg-surface) !important; } [data-theme="dark"] .bg-gray-50 { background: var(--bg-page) !important; } [data-theme="dark"] .bg-gray-100 { background: var(--bg-surface-2) !important; } [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-700 { color: var(--text-secondary) !important; } [data-theme="dark"] .text-gray-500 { color: var(--text-secondary) !important; } [data-theme="dark"] .text-gray-400 { color: var(--text-tertiary) !important; } [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-900 { color: var(--text-primary) !important; } [data-theme="dark"] .text-blue-600 { color: var(--ink-400) !important; } [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200 { border-color: var(--border) !important; } [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow { box-shadow: var(--shadow-card) !important; } /* ============================================================ 5) 生成器交互控件（可点选项 / 标签）选中态 默认态 + .active 选中态：亮青强调，与墨蓝设计系统一致 说明：这些元素原先用内联 style 写死外观，JS 切换 .active 时 CSS 无从覆盖，导致点击"没反应"。现将视觉态收归此处， HTML 内联仅保留布局属性（flex / padding / 圆角 等）。 ============================================================ */ /* 主模式切换 tab：图文四平台 / 短视频脚本 */ .mode-tab { flex: 1; text-align: center; padding: 11px 4px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--bg-surface-2); color: var(--text-secondary); border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .mode-tab.active { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 18px var(--accent-glow); } /* 常用主题快捷选：胶囊 chip */ .chip { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .chip:hover { border-color: var(--border-strong); color: var(--text-primary); } .chip.active { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow); } /* 脚本风格 / 视频时长：单选 opt */ .opt { padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .opt:hover { border-color: var(--border-strong); color: var(--text-primary); } .opt.active { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow); } /* 图文四平台切换：ptab */ .ptab { flex: 1; text-align: center; padding: 10px 4px; border-radius: 12px; font-size: 13px; font-weight: 500; cursor: pointer; background: var(--bg-surface-2); border: 1px solid transparent; color: var(--text-secondary); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ptab:hover { color: var(--text-primary); } .ptab.active { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow); } /* ============================================================ 6) 短视频脚本结果排版（分镜卡片 / 标题候选） 把 DeepSeek 返回的「标题 + 一、二、三、四镜头(画面/字幕/口播人)」 解析为结构化分镜卡片，显著提升可读性与质感。 ============================================================ */ /* 小节标签：🏷 爆款标题候选 / 分镜 等 */ .script-sec-label { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--accent-600); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } [data-theme="dark"] .script-sec-label { color: var(--accent-400); } /* 爆款标题候选：可点复制的标签 */ .script-title-list { display: flex; flex-wrap: wrap; gap: 8px; } .script-title-chip { font-size: 13px; line-height: 1.4; cursor: pointer; padding: 7px 12px; border-radius: 999px; background: var(--bg-surface-2); border: 1px solid var(--border); color: var(--text-secondary); transition: all var(--dur) var(--ease); } .script-title-chip:hover { border-color: var(--accent-500); color: var(--accent-600); background: var(--accent-50, var(--bg-surface)); transform: translateY(-1px); } [data-theme="dark"] .script-title-chip:hover { color: var(--accent-400); } /* 分镜容器与单镜头卡 */ .script-scenes { display: flex; flex-direction: column; gap: 12px; } .script-scene { border: 1px solid var(--border); border-radius: var(--r-lg, 16px); background: var(--bg-surface); padding: 14px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .script-scene:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); } .scene-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .scene-no { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--accent-ink); } .scene-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } /* 字段块：画面 / 字幕 / 口播人 */ .scene-fields { display: flex; flex-direction: column; gap: 8px; } .scene-field { border-radius: 10px; padding: 9px 11px; border-left: 3px solid var(--border-strong); } .field-label { font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--text-tertiary); margin-bottom: 3px; } .field-body { font-size: 13.5px; line-height: 1.7; color: var(--text-primary); } /* 三类字段用不同左侧色，区分画面 / 字幕 / 口播 */ .field-scene { background: rgba(30,58,95,.06); border-left-color: var(--ink-500); } .field-scene .field-label { color: var(--ink-500); } .field-sub { background: rgba(6,182,212,.07); border-left-color: var(--accent-500); } .field-sub .field-label { color: var(--accent-600); } .field-voice { background: var(--bg-surface-2); border-left-color: var(--gray-400); } .field-voice .field-label { color: var(--text-secondary); } [data-theme="dark"] .field-scene { background: rgba(80,111,155,.14); } [data-theme="dark"] .field-sub { background: rgba(56,224,242,.10); } [data-theme="dark"] .field-voice { background: rgba(148,163,184,.10); }