Spaces:
Running
Running
| /* 全局样式重置和变量定义 - WaveSpeed.ai 风格 */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| /* 主背景色 - 深色主题 */ | |
| --primary-bg: #0a0a0a; | |
| --secondary-bg: #111111; | |
| --card-bg: #161616; | |
| --card-hover-bg: #1a1a1a; | |
| --border-color: #27272a; | |
| /* 品牌色 - 紫色调 */ | |
| --primary-color: #8b5cf6; | |
| --secondary-color: #a78bfa; | |
| --accent-color: #c4b5fd; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| /* 旧色彩兼容 */ | |
| --dark-color: #1a1a1a; | |
| --light-color: #f5f5f5; | |
| /* 文字颜色 */ | |
| --text-color: #ffffff; | |
| --text-primary: #ffffff; | |
| --text-secondary: #a1a1aa; | |
| --text-muted: #71717a; | |
| /* 渐变 */ | |
| --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); | |
| --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); | |
| --gradient-dark: linear-gradient(135deg, #161616 0%, #0a0a0a 100%); | |
| /* 阴影 - 深色主题 */ | |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.5); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.5); | |
| --shadow-lg: 0 10px 15px rgba(0,0,0,0.5); | |
| --shadow-xl: 0 20px 25px rgba(0,0,0,0.5); | |
| --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3); | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| background-color: var(--primary-bg); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* 导航栏样式 */ | |
| header { | |
| background: rgba(10, 10, 10, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border-color); | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .logo-icon { | |
| font-size: 2rem; | |
| margin-right: 0.5rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .cta-button { | |
| background: var(--gradient-primary); | |
| color: white ; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 50px; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.15); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* 英雄区域 */ | |
| .hero { | |
| margin-top: 80px; | |
| padding: 6rem 2rem; | |
| background: var(--primary-bg); | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle at center, rgba(139, 92, 246, 0.1) 0%, transparent 70%); | |
| animation: pulse 20s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1) rotate(0deg); } | |
| 50% { transform: scale(1.1) rotate(180deg); } | |
| } | |
| .hero-content { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-title { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.3; | |
| } | |
| .brand-text { | |
| display: block; | |
| font-size: 3.5rem; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 0.5rem; | |
| } | |
| .tagline { | |
| display: block; | |
| font-size: 2.5rem; | |
| color: var(--text-primary); | |
| } | |
| .highlight { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.25rem; | |
| margin-bottom: 3rem; | |
| color: var(--text-secondary); | |
| } | |
| .hero-stats { | |
| display: flex; | |
| gap: 4rem; | |
| margin-bottom: 3rem; | |
| justify-content: center; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .hero-cta { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .primary-button, .secondary-button { | |
| padding: 1rem 2rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 1rem; | |
| display: inline-block; | |
| text-decoration: none; | |
| text-align: center; | |
| } | |
| .primary-button { | |
| background: var(--gradient-primary); | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.15); | |
| } | |
| .primary-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.2); | |
| transition: left 0.3s ease; | |
| } | |
| .primary-button:hover::before { | |
| left: 100%; | |
| } | |
| .primary-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .secondary-button { | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 2px solid var(--primary-color); | |
| } | |
| .secondary-button:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .hero-visual { | |
| position: absolute; | |
| right: 2rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| display: none; /* 暂时隐藏右侧的预览卡片 */ | |
| } | |
| /* 移动端显示 */ | |
| @media (min-width: 1200px) { | |
| .hero-visual { | |
| display: block; | |
| } | |
| } | |
| /* 排行榜预览 */ | |
| .leaderboard-preview { | |
| display: flex; | |
| gap: 1.5rem; | |
| justify-content: center; | |
| margin-top: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .leaderboard-item { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 1.5rem 2rem; | |
| min-width: 250px; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .leaderboard-item:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .leaderboard-item.winner { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%); | |
| border-color: var(--primary-color); | |
| } | |
| .leaderboard-item .rank { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: var(--text-muted); | |
| min-width: 40px; | |
| } | |
| .leaderboard-item.winner .rank { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .model-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| flex: 1; | |
| } | |
| .leaderboard-item .model-icon { | |
| width: 32px; | |
| height: 32px; | |
| font-size: 14px; | |
| } | |
| .leaderboard-item .model-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .leaderboard-item .score { | |
| font-size: 1.75rem; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| } | |
| .leaderboard-item.winner .score { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .comparison-preview { | |
| background: rgba(22, 22, 22, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow-xl); | |
| border: 1px solid var(--border-color); | |
| } | |
| .preview-item { | |
| background: var(--card-bg); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-primary); | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .preview-item:hover { | |
| transform: translateX(-10px); | |
| border-color: var(--primary-color); | |
| } | |
| .preview-item.winner { | |
| background: var(--gradient-primary); | |
| color: white; | |
| border: none; | |
| } | |
| .preview-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .crown { | |
| font-size: 1.5rem; | |
| } | |
| .preview-item h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .score { | |
| font-size: 2rem; | |
| font-weight: 800; | |
| } | |
| /* 对比表格部分 */ | |
| .comparison-section { | |
| padding: 5rem 0; | |
| background: var(--secondary-bg); | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| text-align: center; | |
| margin-bottom: 1rem; | |
| color: var(--text-primary); | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| margin-bottom: 1rem; | |
| font-size: 1.125rem; | |
| } | |
| .data-source { | |
| text-align: center; | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| margin-bottom: 3rem; | |
| } | |
| .data-source a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .data-source a:hover { | |
| text-decoration: underline; | |
| } | |
| .comparison-table { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th { | |
| background: var(--card-hover-bg); | |
| padding: 1.5rem 1rem; | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| td { | |
| padding: 1.5rem 1rem; | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--text-secondary); | |
| } | |
| tr:last-child td { | |
| border-bottom: none; | |
| } | |
| tr:hover { | |
| background: var(--card-hover-bg); | |
| } | |
| .winner-row { | |
| background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05)); | |
| } | |
| .model-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .rank-badge { | |
| background: var(--gradient-primary); | |
| color: white; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 0.875rem; | |
| flex-shrink: 0; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .winner-row .rank-badge { | |
| background: var(--gradient-primary); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .model-icon-wrapper { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .model-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 16px; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.3); | |
| } | |
| .model-icon:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .model-icon.bytedance { | |
| background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); | |
| } | |
| .model-icon.minimax { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| } | |
| .model-icon.google { | |
| background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC04 75%, #EA4335 100%); | |
| } | |
| .model-icon.kuaishou { | |
| background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); | |
| } | |
| .preview-header .model-icon { | |
| width: 30px; | |
| height: 30px; | |
| font-size: 14px; | |
| margin: 0 0.5rem; | |
| } | |
| .winner-row .model-icon { | |
| transform: scale(1.1); | |
| } | |
| .winner-row .model-icon:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); | |
| } | |
| .model-version { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| } | |
| .score-badge { | |
| display: inline-block; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px; | |
| background: var(--card-hover-bg); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .winner-row .score-badge { | |
| background: var(--gradient-primary); | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.15); | |
| } | |
| .elo-range { | |
| font-size: 0.75rem; | |
| opacity: 0.8; | |
| font-weight: 400; | |
| } | |
| .rating { | |
| color: #fbbf24; | |
| font-size: 1.125rem; | |
| } | |
| .metric { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .percentage { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* 演示视频区域 */ | |
| .demo-section { | |
| padding: 5rem 0; | |
| background: var(--secondary-bg); | |
| } | |
| .demo-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .demo-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .demo-card:hover { | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .demo-card.main { | |
| grid-column: 1; | |
| grid-row: 1 / span 2; | |
| } | |
| .demo-card h3 { | |
| margin-bottom: 1.5rem; | |
| color: var(--text-primary); | |
| } | |
| .demo-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .gallery-item { | |
| position: relative; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .gallery-item:hover, | |
| .gallery-item.active { | |
| border-color: var(--primary-color); | |
| transform: scale(1.05); | |
| } | |
| .gallery-placeholder { | |
| aspect-ratio: 16/9; | |
| background: var(--gradient-dark); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-primary); | |
| } | |
| .gallery-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .placeholder-icon { | |
| font-size: 3rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .gallery-placeholder p { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .demo-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin: 1rem 0; | |
| } | |
| .demo-nav { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| border: none; | |
| background: var(--card-hover-bg); | |
| color: var(--text-primary); | |
| font-size: 1.25rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .demo-nav:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .demo-cta { | |
| display: inline-block; | |
| margin-top: 1rem; | |
| padding: 0.75rem 1.5rem; | |
| background: var(--gradient-primary); | |
| color: white; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| } | |
| .demo-cta:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .demo-description { | |
| color: var(--text-secondary); | |
| line-height: 1.8; | |
| margin-bottom: 1rem; | |
| } | |
| .comparison-visual { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .speed-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: var(--card-hover-bg); | |
| padding: 1rem 1.5rem; | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| margin-bottom: 1rem; | |
| } | |
| .speed-bar::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| transition: width 1s ease; | |
| z-index: 0; | |
| opacity: 0.2; | |
| } | |
| .speed-bar.seedance::before { | |
| width: 100%; | |
| } | |
| .speed-bar.competitor::before { | |
| width: 37%; /* 187/50 ≈ 37% of Seedance's speed */ | |
| } | |
| .speed-bar span { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .model-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .time { | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .quality-showcase { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| } | |
| .quality-item { | |
| text-align: center; | |
| } | |
| .quality-badge { | |
| display: inline-block; | |
| padding: 1rem 2rem; | |
| border-radius: 12px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--card-hover-bg); | |
| color: var(--text-primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .quality-badge.best { | |
| background: var(--gradient-primary); | |
| color: white; | |
| } | |
| .demo-features { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-top: 2rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| .demo-features h3 { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| color: var(--text-primary); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-item { | |
| text-align: center; | |
| } | |
| .feature-icon { | |
| display: inline-block; | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .feature-item h4 { | |
| color: #ffffff; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .feature-item p { | |
| color: #e0e0e0; | |
| line-height: 1.6; | |
| font-size: 0.875rem; | |
| font-weight: 400; | |
| } | |
| /* 评测结果部分 */ | |
| .benchmark-results { | |
| padding: 5rem 0; | |
| background: var(--primary-bg); | |
| } | |
| .benchmark-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .benchmark-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .benchmark-card:hover { | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .benchmark-card.main { | |
| grid-column: 1; | |
| grid-row: 1 / span 2; | |
| } | |
| .benchmark-card h3 { | |
| margin-bottom: 1.5rem; | |
| color: var(--text-primary); | |
| } | |
| .benchmark-image { | |
| margin-bottom: 1.5rem; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| } | |
| .benchmark-image.small { | |
| height: 200px; | |
| } | |
| .image-placeholder { | |
| background: var(--gradient-dark); | |
| padding: 3rem; | |
| text-align: center; | |
| min-height: 300px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 12px; | |
| } | |
| .benchmark-image.small .image-placeholder { | |
| min-height: 200px; | |
| padding: 2rem; | |
| } | |
| .image-placeholder .placeholder-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .image-placeholder p { | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .image-placeholder small { | |
| color: var(--text-muted); | |
| font-size: 0.875rem; | |
| } | |
| .benchmark-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .benchmark-highlights { | |
| display: flex; | |
| justify-content: space-around; | |
| gap: 1rem; | |
| } | |
| .highlight-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.75rem; | |
| background: var(--card-hover-bg); | |
| border-radius: 8px; | |
| } | |
| .metric-name { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .metric-score { | |
| color: var(--primary-color); | |
| font-weight: 700; | |
| font-size: 1.125rem; | |
| } | |
| .ranking-info { | |
| text-align: center; | |
| padding: 2rem 0; | |
| } | |
| .rank-display { | |
| display: inline-flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .rank-number { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1; | |
| } | |
| .rank-label { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| margin-top: 0.5rem; | |
| } | |
| .rank-description { | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| font-size: 0.875rem; | |
| } | |
| .performance-list { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .performance-list li { | |
| padding: 0.5rem 0; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .performance-list strong { | |
| color: var(--primary-color); | |
| font-size: 1rem; | |
| } | |
| .benchmark-source { | |
| text-align: center; | |
| padding: 1.5rem; | |
| background: var(--card-bg); | |
| border-radius: 12px; | |
| margin-top: 2rem; | |
| } | |
| .benchmark-source p { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .benchmark-source a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .benchmark-source a:hover { | |
| text-decoration: underline; | |
| } | |
| /* 技术优势部分 */ | |
| .tech-advantages { | |
| padding: 5rem 0; | |
| background: var(--secondary-bg); | |
| } | |
| .tech-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .tech-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .tech-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .tech-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| display: inline-block; | |
| } | |
| .tech-card h3 { | |
| color: #ffffff; | |
| margin-bottom: 1rem; | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| } | |
| .tech-card p { | |
| color: #e0e0e0; | |
| line-height: 1.6; | |
| font-size: 0.875rem; | |
| font-weight: 400; | |
| } | |
| .platform-cta { | |
| text-align: center; | |
| background: var(--card-bg); | |
| padding: 3rem; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .platform-cta h3 { | |
| font-size: 1.75rem; | |
| margin-bottom: 1rem; | |
| color: #ffffff; | |
| font-weight: 600; | |
| } | |
| .platform-cta p { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| color: #e0e0e0; | |
| font-weight: 400; | |
| } | |
| /* 性能图表部分 */ | |
| .performance-section { | |
| padding: 5rem 0; | |
| background: var(--primary-bg); | |
| } | |
| .charts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .chart-card { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| .chart-card h3 { | |
| margin-bottom: 1.5rem; | |
| color: var(--text-primary); | |
| } | |
| .bar-chart { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .bar-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .bar-label { | |
| min-width: 120px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .bar-container { | |
| flex: 1; | |
| background: #E9ECEF; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .bar { | |
| background: #7F8C8D; | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| font-weight: 600; | |
| transition: width 1s ease; | |
| } | |
| .bar.seedance { | |
| background: var(--gradient-success); | |
| } | |
| .cost-comparison { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| } | |
| .cost-item { | |
| text-align: center; | |
| padding: 1.5rem; | |
| border-radius: 15px; | |
| background: #F8F9FA; | |
| color: #1a1a1a; | |
| } | |
| .cost-item.winner { | |
| background: var(--gradient-primary); | |
| color: white; | |
| } | |
| .cost-value { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| margin: 0.5rem 0; | |
| } | |
| .cost-label { | |
| font-size: 0.875rem; | |
| opacity: 0.8; | |
| } | |
| .savings-badge { | |
| background: white; | |
| color: var(--primary-color); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| margin-top: 0.5rem; | |
| display: inline-block; | |
| } | |
| .satisfaction-scores { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| } | |
| .score-circle { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: #E9ECEF; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| color: #1a1a1a; | |
| } | |
| .score-circle.seedance { | |
| background: var(--gradient-success); | |
| color: white; | |
| text-shadow: 0 1px 3px rgba(0,0,0,0.2); | |
| } | |
| .score-value { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| } | |
| .score-label { | |
| font-size: 0.875rem; | |
| margin-top: 0.5rem; | |
| } | |
| /* 价格部分 */ | |
| .pricing-section { | |
| padding: 5rem 0; | |
| background: white; | |
| } | |
| .pricing-comparison { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3rem; | |
| } | |
| .price-table { | |
| overflow-x: auto; | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .price-table table { | |
| width: 100%; | |
| background: var(--card-bg); | |
| border-collapse: collapse; | |
| } | |
| .price-table th { | |
| background: var(--card-hover-bg); | |
| padding: 1.25rem 1rem; | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .price-table td { | |
| padding: 1.25rem 1rem; | |
| border-bottom: 1px solid var(--border-color); | |
| vertical-align: middle; | |
| color: var(--text-primary); | |
| } | |
| .highlight-row { | |
| background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05)); | |
| border-left: 3px solid var(--primary-color); | |
| } | |
| .model-name { | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .model-icon.small { | |
| width: 32px; | |
| height: 32px; | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| .badge { | |
| font-size: 0.75rem; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .badge.new { | |
| background: var(--gradient-danger); | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .badge.best-value { | |
| background: var(--gradient-success); | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .price-cell { | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .price-value { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .price-unit { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| } | |
| .try-button { | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| display: inline-block; | |
| transition: all 0.3s ease; | |
| background: var(--gradient-primary); | |
| color: white; | |
| white-space: nowrap; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.15); | |
| } | |
| .try-button.secondary { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-secondary); | |
| } | |
| .try-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .leaderboard-cta { | |
| text-align: center; | |
| padding: 2rem; | |
| background: #F8F9FA; | |
| border-radius: 15px; | |
| margin: 2rem 0; | |
| } | |
| .leaderboard-cta p { | |
| margin-bottom: 1rem; | |
| color: #333333; | |
| font-weight: 400; | |
| } | |
| .leaderboard-link { | |
| display: inline-block; | |
| color: var(--primary-color); | |
| font-weight: 600; | |
| text-decoration: none; | |
| padding: 0.75rem 1.5rem; | |
| border: 2px solid var(--primary-color); | |
| border-radius: 50px; | |
| transition: all 0.3s ease; | |
| } | |
| .leaderboard-link:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .price-highlights { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .highlight-card { | |
| background: #F8F9FA; | |
| border-radius: 20px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: transform 0.3s ease; | |
| } | |
| .highlight-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .highlight-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| opacity: 0.9; | |
| } | |
| .highlight-card h3 { | |
| color: #1a1a1a; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .highlight-card p { | |
| color: #333333; | |
| line-height: 1.6; | |
| font-weight: 400; | |
| } | |
| /* 应用案例部分 */ | |
| .use-cases-section { | |
| padding: 5rem 0; | |
| background: white; | |
| } | |
| .use-cases-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .use-case-card { | |
| background: #F8F9FA; | |
| border-radius: 20px; | |
| padding: 2.5rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .use-case-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background: var(--gradient-primary); | |
| transform: scaleX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| .use-case-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .use-case-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .use-case-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| display: inline-block; | |
| } | |
| .use-case-card h3 { | |
| color: #1a1a1a; | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| } | |
| .use-case-card p { | |
| color: #333333; | |
| line-height: 1.8; | |
| margin-bottom: 1.5rem; | |
| font-weight: 400; | |
| } | |
| .learn-more { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: color 0.3s ease; | |
| } | |
| .learn-more:hover { | |
| color: var(--secondary-color); | |
| } | |
| .case-study-cta { | |
| text-align: center; | |
| background: var(--gradient-primary); | |
| color: white; | |
| padding: 3rem; | |
| border-radius: 20px; | |
| } | |
| .case-study-cta h3 { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .case-study-cta p { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| /* 客户评价部分 */ | |
| .testimonials-section { | |
| padding: 5rem 0; | |
| background: #F8F9FA; | |
| } | |
| .testimonials-section .section-title { | |
| color: #2c3e50; | |
| } | |
| /* 确保白色背景部分的标题是深色 */ | |
| .pricing-section .section-title, | |
| .use-cases-section .section-title { | |
| color: #2c3e50; | |
| } | |
| .pricing-section .section-subtitle, | |
| .use-cases-section .section-subtitle { | |
| color: #5a5a5a; | |
| } | |
| .testimonials-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .testimonial-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 2.5rem; | |
| box-shadow: var(--shadow-md); | |
| transition: transform 0.3s ease; | |
| position: relative; | |
| border: 1px solid #e8e8e8; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-xl); | |
| border-color: #3498db; | |
| } | |
| .testimonial-label { | |
| position: absolute; | |
| top: -14px; | |
| left: 30px; | |
| background: #3498db; | |
| color: white; | |
| padding: 6px 20px; | |
| border-radius: 20px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .stars { | |
| color: #FFC107; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.25rem; | |
| letter-spacing: 3px; | |
| } | |
| .testimonial-text { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| line-height: 1.9; | |
| color: #2c3e50; | |
| font-weight: 400; | |
| min-height: 100px; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid #f0f0f0; | |
| } | |
| .author-avatar { | |
| width: 52px; | |
| height: 52px; | |
| background: linear-gradient(135deg, #3498db, #2c3e50); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| font-size: 1.125rem; | |
| flex-shrink: 0; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.3); | |
| } | |
| .testimonial-author > div:not(.author-avatar) { | |
| flex: 1; | |
| } | |
| .testimonial-author strong { | |
| color: var(--dark-color); | |
| font-size: 1.125rem; | |
| display: block; | |
| margin-bottom: 0.25rem; | |
| font-weight: 600; | |
| } | |
| .testimonial-author span { | |
| color: #7F8C8D; | |
| font-size: 0.9375rem; | |
| display: block; | |
| } | |
| /* CTA区域 */ | |
| .cta-section { | |
| padding: 5rem 0; | |
| background: var(--gradient-primary); | |
| color: white; | |
| text-align: center; | |
| } | |
| .cta-content h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .cta-content p { | |
| font-size: 1.25rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .primary-button.large, | |
| .secondary-button.large { | |
| padding: 1.25rem 2.5rem; | |
| font-size: 1.125rem; | |
| } | |
| .cta-note { | |
| font-size: 0.875rem; | |
| opacity: 0.8; | |
| } | |
| /* 页脚 */ | |
| footer { | |
| background: var(--dark-color); | |
| color: white; | |
| padding: 3rem 0 1rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h4 { | |
| margin-bottom: 1rem; | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| } | |
| .footer-section ul li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-section a { | |
| color: #BDC3C7; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-section a:hover { | |
| color: white; | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid #34495E; | |
| color: #7F8C8D; | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 768px) { | |
| .hero { | |
| text-align: center; | |
| } | |
| .hero-title { | |
| font-size: 1.75rem; | |
| } | |
| .brand-text { | |
| font-size: 2.25rem; | |
| } | |
| .tagline { | |
| font-size: 1.5rem; | |
| } | |
| .hero-stats { | |
| justify-content: center; | |
| } | |
| .hero-visual { | |
| position: relative; | |
| right: auto; | |
| top: auto; | |
| transform: none; | |
| margin-top: 2rem; | |
| } | |
| .leaderboard-preview { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .leaderboard-item { | |
| width: 100%; | |
| max-width: 400px; | |
| min-width: unset; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .comparison-table { | |
| font-size: 0.875rem; | |
| } | |
| th, td { | |
| padding: 0.75rem 0.5rem; | |
| } | |
| .charts-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .price-table { | |
| font-size: 0.875rem; | |
| } | |
| .price-table th, .price-table td { | |
| padding: 0.75rem 0.5rem; | |
| } | |
| .price-highlights { | |
| grid-template-columns: 1fr; | |
| } | |
| .cta-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .primary-button.large, | |
| .secondary-button.large { | |
| width: 100%; | |
| max-width: 300px; | |
| } | |
| .demo-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .demo-card.main { | |
| grid-column: 1; | |
| grid-row: auto; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .demo-gallery { | |
| grid-template-columns: 1fr; | |
| } | |
| .benchmark-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .benchmark-card.main { | |
| grid-column: 1; | |
| grid-row: auto; | |
| } | |
| } | |
| /* 动画效果 */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero-content, | |
| .chart-card, | |
| .pricing-card, | |
| .testimonial-card { | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| /* 加载动画 */ | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .primary-button:active { | |
| animation: pulse 0.3s ease; | |
| } | |
| /* 核心能力展示部分 */ | |
| .capabilities-showcase { | |
| padding: 80px 0; | |
| background: var(--secondary-bg); | |
| } | |
| .capabilities-grid { | |
| margin-top: 60px; | |
| } | |
| .capability-section { | |
| margin-bottom: 80px; | |
| padding: 40px; | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| transition: all 0.3s ease; | |
| } | |
| .capability-section:hover { | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .capability-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| font-size: 28px; | |
| color: var(--text-primary); | |
| } | |
| .capability-number { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| background: var(--gradient-primary); | |
| color: white; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 18px; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .capability-description { | |
| font-size: 18px; | |
| color: var(--text-secondary); | |
| margin-bottom: 30px; | |
| line-height: 1.8; | |
| } | |
| .demo-videos-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 30px; | |
| } | |
| .demo-video-card { | |
| background: var(--card-hover-bg); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| border: 1px solid var(--border-color); | |
| } | |
| .demo-video-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary-color); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .video-container { | |
| position: relative; | |
| background: var(--gradient-dark); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .video-container video { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| background: var(--gradient-dark); | |
| min-height: 300px; | |
| } | |
| /* 当视频无法加载时显示占位符 */ | |
| .video-container video:not([src]) + .video-placeholder, | |
| .video-container video[src=""] + .video-placeholder { | |
| display: flex ; | |
| } | |
| .video-placeholder { | |
| padding: 40px; | |
| text-align: center; | |
| background: var(--gradient-dark); | |
| min-height: 300px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .video-info { | |
| padding: 20px; | |
| background: var(--card-bg); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .video-icon { | |
| font-size: 60px; | |
| margin-bottom: 20px; | |
| filter: grayscale(0%); | |
| } | |
| .video-placeholder h4 { | |
| font-size: 20px; | |
| color: var(--text-primary); | |
| margin-bottom: 15px; | |
| } | |
| .video-info h4 { | |
| font-size: 18px; | |
| color: var(--text-primary); | |
| margin-bottom: 10px; | |
| } | |
| .video-placeholder .prompt { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| padding: 0 20px; | |
| font-style: italic; | |
| } | |
| .video-specs { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| margin-top: 15px; | |
| } | |
| .video-specs span { | |
| background: var(--card-bg); | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| border: 1px solid var(--border-color); | |
| } | |
| .play-button { | |
| display: block; | |
| padding: 15px 30px; | |
| background: var(--gradient-primary); | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 600; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| text-shadow: 0 1px 2px rgba(0,0,0,0.15); | |
| } | |
| .play-button:hover { | |
| transform: translateX(5px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .experience-cta { | |
| text-align: center; | |
| margin-top: 80px; | |
| padding: 60px; | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .experience-cta h3 { | |
| font-size: 32px; | |
| color: var(--text-primary); | |
| margin-bottom: 15px; | |
| } | |
| .experience-cta p { | |
| font-size: 18px; | |
| color: var(--text-secondary); | |
| margin-bottom: 30px; | |
| } | |
| .cta-buttons { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .primary-button.large, | |
| .secondary-button.large { | |
| padding: 18px 40px; | |
| font-size: 18px; | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 768px) { | |
| .capability-section { | |
| padding: 30px 20px; | |
| } | |
| .capability-title { | |
| font-size: 22px; | |
| flex-wrap: wrap; | |
| } | |
| .capability-number { | |
| width: 40px; | |
| height: 40px; | |
| font-size: 16px; | |
| } | |
| .demo-videos-grid { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .video-placeholder { | |
| padding: 30px 20px; | |
| min-height: 250px; | |
| } | |
| .video-icon { | |
| font-size: 48px; | |
| } | |
| .experience-cta { | |
| padding: 40px 20px; | |
| } | |
| .experience-cta h3 { | |
| font-size: 24px; | |
| } | |
| .cta-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .primary-button.large, | |
| .secondary-button.large { | |
| width: 100%; | |
| max-width: 300px; | |
| } | |
| } | |
| .demo-video-card.enhanced { | |
| background: var(--card-bg); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .demo-video-card.enhanced:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); | |
| } | |
| .video-wrapper { | |
| position: relative; | |
| width: 100%; | |
| background: #000; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .video-caption { | |
| padding: 20px; | |
| background: var(--card-bg); | |
| } | |
| .video-caption h4 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin-bottom: 8px; | |
| } | |
| .video-caption p { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| line-height: 1.5; | |
| } | |
| .demo-videos-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 30px; | |
| margin-top: 30px; | |
| } | |
| @media (max-width: 768px) { | |
| .demo-videos-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |