Spaces:
Runtime error
Runtime error
| /* AI API统一转换代理系统 - 时装周奢华风格 Plus */ | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap'); | |
| /* 高端设计系统重置 */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| /* 时装周奢华配色系统 Plus */ | |
| :root { | |
| /* 主色调 - 极简黑白金 */ | |
| --color-primary: #000000; | |
| --color-secondary: #ffffff; | |
| --color-accent: #d4af37; | |
| /* 奢华金色 */ | |
| --color-accent-light: #f5e6b8; | |
| --color-accent-dark: #b8941f; | |
| --color-rose-gold: #e8b4a6; | |
| --color-platinum: #e5e4e2; | |
| /* 背景层级 - 更丰富的层次 */ | |
| --bg-primary: linear-gradient(135deg, #fafafa 0%, #ffffff 50%, #f8f8f8 100%); | |
| --bg-secondary: #ffffff; | |
| --bg-tertiary: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%); | |
| --bg-quaternary: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%); | |
| --bg-overlay: rgba(0, 0, 0, 0.03); | |
| --bg-glass: rgba(255, 255, 255, 0.9); | |
| --bg-luxury: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #ffffff 100%); | |
| /* 文字层级 - 更细致的分层 */ | |
| --text-primary: #000000; | |
| --text-secondary: #666666; | |
| --text-tertiary: #888888; | |
| --text-muted: #999999; | |
| --text-light: #cccccc; | |
| --text-accent: #d4af37; | |
| --text-accent-hover: #b8941f; | |
| --text-success: #2d7d32; | |
| --text-error: #c62828; | |
| --text-warning: #ed6c02; | |
| /* 边框系统 - 更精致的边框 */ | |
| --border-primary: #e0e0e0; | |
| --border-secondary: #f0f0f0; | |
| --border-accent: #d4af37; | |
| --border-dark: #333333; | |
| --border-luxury: linear-gradient(135deg, #e0e0e0, #f0f0f0); | |
| /* 阴影系统 - 更丰富的阴影层次 */ | |
| --shadow-minimal: 0 1px 3px rgba(0, 0, 0, 0.08); | |
| --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05); | |
| --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.08); | |
| --shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.12); | |
| --shadow-luxury: 0 20px 60px rgba(0, 0, 0, 0.15); | |
| --shadow-accent: 0 4px 24px rgba(212, 175, 55, 0.15); | |
| --shadow-accent-strong: 0 8px 32px rgba(212, 175, 55, 0.25); | |
| --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.06); | |
| /* 圆角系统 */ | |
| --radius-none: 0px; | |
| --radius-sm: 2px; | |
| --radius-md: 4px; | |
| --radius-lg: 8px; | |
| --radius-xl: 16px; | |
| /* 间距系统 - 更精确的间距 */ | |
| --space-xs: 0.5rem; | |
| --space-sm: 1rem; | |
| --space-md: 1.5rem; | |
| --space-lg: 2rem; | |
| --space-xl: 3rem; | |
| --space-2xl: 4rem; | |
| --space-3xl: 6rem; | |
| --space-4xl: 8rem; | |
| --space-5xl: 12rem; | |
| /* 字体系统 */ | |
| --font-display: 'Playfair Display', serif; | |
| --font-sans: 'Inter', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| /* 动画系统 - 更优雅的动画 */ | |
| --ease-luxury: cubic-bezier(0.23, 1, 0.32, 1); | |
| --ease-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --ease-refined: cubic-bezier(0.165, 0.84, 0.44, 1); | |
| --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| --duration-fast: 0.2s; | |
| --duration-medium: 0.4s; | |
| --duration-slow: 0.6s; | |
| --duration-luxury: 0.8s; | |
| } | |
| /* 全局样式 */ | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.7; | |
| font-weight: 400; | |
| min-height: 100vh; | |
| padding: var(--space-3xl) var(--space-lg); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| font-feature-settings: 'rlig' 1, 'calt' 1; | |
| letter-spacing: -0.01em; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| /* 添加精美的背景装饰 */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 60%, rgba(0, 0, 0, 0.02) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| /* 奢华容器设计 */ | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-none); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-luxury); | |
| position: relative; | |
| backdrop-filter: blur(10px); | |
| } | |
| /* 添加容器装饰边框 */ | |
| .container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| z-index: 1; | |
| } | |
| .container::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| z-index: 1; | |
| } | |
| /* 时装周风格标题 */ | |
| .container>h1 { | |
| font-family: var(--font-display); | |
| font-size: 2.5rem; | |
| font-weight: 400; | |
| color: var(--text-primary); | |
| text-align: center; | |
| padding: var(--space-3xl) var(--space-xl) var(--space-2xl); | |
| margin: 0; | |
| letter-spacing: -0.02em; | |
| line-height: 1.2; | |
| position: relative; | |
| background: var(--bg-luxury); | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .container>h1::before { | |
| content: ''; | |
| position: absolute; | |
| top: var(--space-lg); | |
| left: 50%; | |
| width: 120px; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| transform: translateX(-50%); | |
| animation: shimmerTop 3s ease-in-out infinite; | |
| } | |
| .container>h1::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: var(--space-lg); | |
| left: 50%; | |
| width: 60px; | |
| height: 1px; | |
| background: var(--color-accent); | |
| transform: translateX(-50%); | |
| animation: shimmerBottom 3s ease-in-out infinite 1.5s; | |
| } | |
| @keyframes shimmerTop { | |
| 0%, | |
| 100% { | |
| opacity: 0.6; | |
| width: 120px; | |
| } | |
| 50% { | |
| opacity: 1; | |
| width: 180px; | |
| } | |
| } | |
| @keyframes shimmerBottom { | |
| 0%, | |
| 100% { | |
| opacity: 0.8; | |
| width: 60px; | |
| } | |
| 50% { | |
| opacity: 1; | |
| width: 90px; | |
| } | |
| } | |
| /* 表单区域 */ | |
| .detection-form { | |
| padding: var(--space-2xl); | |
| background: var(--bg-quaternary); | |
| position: relative; | |
| } | |
| .detection-form::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| opacity: 0.3; | |
| } | |
| .detection-form h2 { | |
| font-family: var(--font-display); | |
| font-size: 1.75rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-xl); | |
| text-align: center; | |
| letter-spacing: -0.01em; | |
| position: relative; | |
| } | |
| .detection-form h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -var(--space-sm); | |
| left: 50%; | |
| width: 30px; | |
| height: 1px; | |
| background: var(--color-accent); | |
| transform: translateX(-50%); | |
| } | |
| /* 表单组 */ | |
| .form-group { | |
| margin-bottom: var(--space-xl); | |
| position: relative; | |
| } | |
| .form-group label { | |
| display: block; | |
| font-family: var(--font-sans); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-xs); | |
| letter-spacing: 0.01em; | |
| text-transform: uppercase; | |
| position: relative; | |
| } | |
| .form-group label::before { | |
| content: ''; | |
| position: absolute; | |
| left: -var(--space-sm); | |
| top: 50%; | |
| width: 3px; | |
| height: 3px; | |
| background: var(--color-accent); | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| opacity: 0; | |
| transition: opacity var(--duration-medium) var(--ease-elegant); | |
| } | |
| .form-group:hover label::before { | |
| opacity: 1; | |
| } | |
| /* 输入框样式 */ | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: var(--space-md) var(--space-lg); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-none); | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| font-family: var(--font-sans); | |
| font-size: 1rem; | |
| font-weight: 400; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| outline: none; | |
| box-shadow: var(--shadow-inset); | |
| position: relative; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| border-color: var(--color-accent); | |
| box-shadow: var(--shadow-accent), var(--shadow-inset); | |
| background: var(--bg-secondary); | |
| transform: translateY(-1px); | |
| } | |
| .form-group input:hover, | |
| .form-group select:hover, | |
| .form-group textarea:hover { | |
| border-color: var(--text-tertiary); | |
| box-shadow: var(--shadow-soft), var(--shadow-inset); | |
| } | |
| .form-group input[type="password"] { | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.1em; | |
| } | |
| .form-group input[type="number"] { | |
| font-family: var(--font-mono); | |
| } | |
| /* 模型选择容器 */ | |
| .model-selection-container { | |
| display: flex; | |
| gap: var(--space-md); | |
| align-items: flex-start; | |
| } | |
| .model-selection-container select { | |
| flex: 1; | |
| } | |
| /* 能力选择网格 */ | |
| .capabilities-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .capabilities-grid label { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--space-md); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-none); | |
| background: var(--bg-secondary); | |
| cursor: pointer; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| min-height: 60px; | |
| overflow: hidden; | |
| } | |
| .capabilities-grid label::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); | |
| transition: left var(--duration-slow) var(--ease-elegant); | |
| } | |
| .capabilities-grid label:hover::before { | |
| left: 100%; | |
| } | |
| .capabilities-grid label:hover { | |
| border-color: var(--color-accent); | |
| background: var(--bg-tertiary); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-medium); | |
| } | |
| .capabilities-grid label input[type="checkbox"] { | |
| width: 18px; | |
| height: 18px; | |
| margin-right: var(--space-sm); | |
| accent-color: var(--color-accent); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .capability-text { | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| flex: 1; | |
| text-transform: none; | |
| margin: 0; | |
| } | |
| .capability-icon { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--color-accent); | |
| opacity: 0; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| } | |
| .capability-icon::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 16px; | |
| height: 16px; | |
| border: 1px solid var(--color-accent); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: 0; | |
| transition: opacity var(--duration-medium) var(--ease-elegant); | |
| } | |
| .capabilities-grid label:hover .capability-icon { | |
| opacity: 1; | |
| transform: scale(1.2); | |
| } | |
| .capabilities-grid label:hover .capability-icon::before { | |
| opacity: 0.3; | |
| } | |
| /* 表单操作按钮 */ | |
| .form-actions { | |
| display: flex; | |
| gap: var(--space-md); | |
| margin-top: var(--space-md); | |
| } | |
| .form-actions button { | |
| padding: var(--space-xs) var(--space-md); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-none); | |
| background: var(--bg-secondary); | |
| color: var(--text-secondary); | |
| font-family: var(--font-sans); | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .form-actions button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); | |
| transition: left var(--duration-medium) var(--ease-elegant); | |
| } | |
| .form-actions button:hover::before { | |
| left: 100%; | |
| } | |
| .form-actions button:hover { | |
| background: var(--text-primary); | |
| color: var(--bg-secondary); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| /* 主要按钮样式 */ | |
| .btn-primary { | |
| width: 100%; | |
| padding: var(--space-lg) var(--space-xl); | |
| border: 2px solid var(--color-primary); | |
| border-radius: var(--radius-none); | |
| background: var(--color-primary); | |
| color: var(--bg-secondary); | |
| font-family: var(--font-sans); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| overflow: hidden; | |
| margin-top: var(--space-xl); | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left var(--duration-slow) var(--ease-refined); | |
| } | |
| .btn-primary::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.1) 50%, transparent 100%); | |
| opacity: 0; | |
| transition: opacity var(--duration-medium) var(--ease-elegant); | |
| } | |
| .btn-primary:hover::before { | |
| left: 100%; | |
| } | |
| .btn-primary:hover::after { | |
| opacity: 1; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow-luxury); | |
| border-color: var(--color-accent-dark); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(-1px); | |
| } | |
| /* 次要按钮样式 */ | |
| .btn-secondary { | |
| padding: var(--space-md) var(--space-lg); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-none); | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| font-family: var(--font-sans); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| text-transform: uppercase; | |
| letter-spacing: 0.025em; | |
| white-space: nowrap; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-secondary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent); | |
| transition: left var(--duration-medium) var(--ease-elegant); | |
| } | |
| .btn-secondary:hover::before { | |
| left: 100%; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--text-primary); | |
| color: var(--bg-secondary); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .btn-secondary:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* 进度区域 */ | |
| .progress-section { | |
| padding: var(--space-2xl); | |
| border-top: 1px solid var(--border-primary); | |
| background: var(--bg-tertiary); | |
| position: relative; | |
| } | |
| .progress-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| opacity: 0.5; | |
| } | |
| .progress-section h2 { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-xl); | |
| text-align: center; | |
| letter-spacing: -0.01em; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 4px; | |
| background: var(--border-primary); | |
| border-radius: var(--radius-none); | |
| overflow: hidden; | |
| margin-bottom: var(--space-lg); | |
| position: relative; | |
| box-shadow: var(--shadow-inset); | |
| } | |
| .progress-bar::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.3; | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| } | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light)); | |
| width: 0%; | |
| transition: width var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); | |
| } | |
| .progress-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| #progress-text { | |
| text-align: center; | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| letter-spacing: 0.025em; | |
| text-transform: uppercase; | |
| position: relative; | |
| } | |
| #progress-text::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%); | |
| transform: translate(-50%, -50%); | |
| animation: breathe 3s ease-in-out infinite; | |
| } | |
| @keyframes breathe { | |
| 0%, | |
| 100% { | |
| width: 0; | |
| height: 0; | |
| opacity: 0; | |
| } | |
| 50% { | |
| width: 100px; | |
| height: 100px; | |
| opacity: 0.1; | |
| } | |
| } | |
| /* 结果区域 */ | |
| .results-section { | |
| padding: var(--space-2xl); | |
| border-top: 1px solid var(--border-primary); | |
| background: var(--bg-secondary); | |
| position: relative; | |
| } | |
| .results-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| opacity: 0.5; | |
| } | |
| .results-section h2 { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-xl); | |
| text-align: center; | |
| letter-spacing: -0.01em; | |
| } | |
| /* 结果摘要 */ | |
| .results-summary { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--space-lg); | |
| margin-bottom: var(--space-2xl); | |
| } | |
| .summary-card { | |
| text-align: center; | |
| padding: var(--space-xl); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-none); | |
| background: var(--bg-secondary); | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .summary-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| opacity: 0; | |
| transition: opacity var(--duration-medium) var(--ease-elegant); | |
| } | |
| .summary-card::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 1px; | |
| background: var(--color-accent); | |
| transform: translateX(-50%); | |
| transition: width var(--duration-medium) var(--ease-elegant); | |
| } | |
| .summary-card:hover::before { | |
| opacity: 1; | |
| } | |
| .summary-card:hover::after { | |
| width: 50%; | |
| } | |
| .summary-card:hover { | |
| transform: translateY(-6px); | |
| box-shadow: var(--shadow-luxury); | |
| border-color: var(--color-accent); | |
| } | |
| .summary-card h3 { | |
| font-family: var(--font-sans); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-sm); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .summary-card .value { | |
| font-family: var(--font-display); | |
| font-size: 1.75rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| letter-spacing: -0.02em; | |
| } | |
| /* 能力结果表格 */ | |
| .capabilities-results { | |
| margin-bottom: var(--space-2xl); | |
| } | |
| .capabilities-results h3 { | |
| font-family: var(--font-display); | |
| font-size: 1.25rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-lg); | |
| text-align: center; | |
| letter-spacing: -0.01em; | |
| } | |
| .capabilities-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: var(--font-sans); | |
| font-size: 0.875rem; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| position: relative; | |
| } | |
| .capabilities-table::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| opacity: 0.3; | |
| } | |
| .capabilities-table thead { | |
| background: var(--bg-tertiary); | |
| border-bottom: 2px solid var(--border-primary); | |
| position: relative; | |
| } | |
| .capabilities-table th { | |
| padding: var(--space-md) var(--space-lg); | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| position: relative; | |
| } | |
| .capabilities-table th::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--color-accent), transparent); | |
| opacity: 0.5; | |
| } | |
| .capabilities-table td { | |
| padding: var(--space-md) var(--space-lg); | |
| border-bottom: 1px solid var(--border-secondary); | |
| color: var(--text-primary); | |
| vertical-align: top; | |
| position: relative; | |
| } | |
| .capabilities-table tbody tr { | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| } | |
| .capabilities-table tbody tr::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 2px; | |
| height: 100%; | |
| background: var(--color-accent); | |
| opacity: 0; | |
| transition: opacity var(--duration-medium) var(--ease-elegant); | |
| } | |
| .capabilities-table tbody tr:hover::before { | |
| opacity: 1; | |
| } | |
| .capabilities-table tbody tr:hover { | |
| background: var(--bg-tertiary); | |
| transform: translateX(4px); | |
| } | |
| /* 状态标签 */ | |
| .status-badge { | |
| display: inline-block; | |
| padding: var(--space-xs) var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .status-badge::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left var(--duration-medium) var(--ease-elegant); | |
| } | |
| .status-badge:hover::before { | |
| left: 100%; | |
| } | |
| .status-supported { | |
| background: linear-gradient(135deg, #e8f5e8, #f1f8e9); | |
| color: var(--text-success); | |
| border: 1px solid #c8e6c9; | |
| box-shadow: 0 2px 8px rgba(45, 125, 50, 0.1); | |
| } | |
| .status-not-supported { | |
| background: linear-gradient(135deg, #ffeaea, #ffebee); | |
| color: var(--text-error); | |
| border: 1px solid #ffcdd2; | |
| box-shadow: 0 2px 8px rgba(198, 40, 40, 0.1); | |
| } | |
| /* 检测信息 */ | |
| .detection-info { | |
| padding: var(--space-lg); | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-none); | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| position: relative; | |
| border-left: 3px solid var(--color-accent); | |
| } | |
| .detection-info::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3px; | |
| height: 100%; | |
| background: linear-gradient(180deg, var(--color-accent), var(--color-accent-light)); | |
| animation: flow 3s ease-in-out infinite; | |
| } | |
| @keyframes flow { | |
| 0%, | |
| 100% { | |
| opacity: 0.6; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| .detection-info p { | |
| margin-bottom: var(--space-sm); | |
| } | |
| .detection-info strong { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| /* 错误消息 */ | |
| .error-message { | |
| background: linear-gradient(135deg, #ffeaea, #ffebee); | |
| color: var(--text-error); | |
| padding: var(--space-lg); | |
| border: 1px solid #ffcdd2; | |
| border-radius: var(--radius-none); | |
| margin-bottom: var(--space-lg); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| position: relative; | |
| border-left: 4px solid var(--text-error); | |
| } | |
| .error-message::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background: linear-gradient(180deg, var(--text-error), #ffcdd2); | |
| animation: errorPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes errorPulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.8; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| /* 表单提示 */ | |
| .form-hint { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: var(--space-xs); | |
| font-style: italic; | |
| position: relative; | |
| padding-left: var(--space-md); | |
| } | |
| .form-hint::before { | |
| content: '💡'; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| font-size: 0.75rem; | |
| opacity: 0.7; | |
| } | |
| /* 详情文本 */ | |
| .details-text { | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| background: var(--bg-tertiary); | |
| padding: var(--space-sm); | |
| border-radius: var(--radius-sm); | |
| overflow-x: auto; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| border-left: 3px solid var(--color-accent); | |
| } | |
| .error-text { | |
| color: var(--text-error); | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| position: relative; | |
| padding-left: var(--space-md); | |
| } | |
| .error-text::before { | |
| content: '⚠️'; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| font-size: 0.75rem; | |
| } | |
| /* 动画类 */ | |
| .fade-in { | |
| opacity: 0; | |
| animation: fadeIn var(--duration-luxury) var(--ease-elegant) forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in-element { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all var(--duration-luxury) var(--ease-elegant); | |
| } | |
| .fade-in-element.fade-in { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* 键盘导航 */ | |
| .keyboard-navigation *:focus { | |
| outline: 2px solid var(--color-accent); | |
| outline-offset: 2px; | |
| } | |
| /* 选择文本样式 */ | |
| ::selection { | |
| background: rgba(212, 175, 55, 0.2); | |
| color: var(--text-primary); | |
| } | |
| /* 滚动条样式 */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-tertiary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, var(--color-accent), var(--color-accent-light)); | |
| border-radius: var(--radius-md); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, var(--color-accent-dark), var(--color-accent)); | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 768px) { | |
| body { | |
| padding: var(--space-lg) var(--space-md); | |
| } | |
| .container>h1 { | |
| font-size: 2rem; | |
| padding: var(--space-2xl) var(--space-lg) var(--space-xl); | |
| } | |
| .detection-form, | |
| .progress-section, | |
| .results-section { | |
| padding: var(--space-lg); | |
| } | |
| .capabilities-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .model-selection-container { | |
| flex-direction: column; | |
| } | |
| .form-actions { | |
| flex-direction: column; | |
| } | |
| .results-summary { | |
| grid-template-columns: 1fr; | |
| } | |
| .capabilities-table { | |
| font-size: 0.75rem; | |
| } | |
| .capabilities-table th, | |
| .capabilities-table td { | |
| padding: var(--space-sm); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| body { | |
| padding: var(--space-md) var(--space-sm); | |
| } | |
| .container>h1 { | |
| font-size: 1.5rem; | |
| } | |
| .detection-form h2 { | |
| font-size: 1.25rem; | |
| } | |
| .capabilities-table { | |
| display: block; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| } | |
| } | |
| /* 高分辨率屏幕优化 */ | |
| @media (min-resolution: 192dpi) { | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| } | |
| /* 深色模式媒体查询准备 */ | |
| @media (prefers-color-scheme: dark) { | |
| /* 可以在这里添加深色模式的变量覆盖 */ | |
| } | |
| /* 减少动画的无障碍设置 */ | |
| /* 渠道管理样式 */ | |
| .channel-management { | |
| background: var(--bg-secondary); | |
| border-radius: 16px; | |
| padding: 32px; | |
| margin-bottom: 32px; | |
| box-shadow: var(--shadow-medium); | |
| border: 1px solid var(--border-secondary); | |
| } | |
| .channel-form { | |
| margin-bottom: 32px; | |
| padding: 24px; | |
| background: var(--bg-tertiary); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .channel-form.editing-mode { | |
| border: 2px solid var(--color-accent); | |
| box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); | |
| background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, var(--bg-tertiary) 100%); | |
| transform: scale(1.005); | |
| } | |
| .channel-form.editing-mode h3 { | |
| color: var(--color-accent); | |
| font-weight: 700; | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .channel-list { | |
| padding: 24px; | |
| background: var(--bg-quaternary); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-primary); | |
| } | |
| .channel-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px; | |
| margin-bottom: 16px; | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-secondary); | |
| transition: all 0.3s ease; | |
| } | |
| .channel-item:hover { | |
| box-shadow: var(--shadow-medium); | |
| transform: translateY(-2px); | |
| } | |
| .channel-item.enabled { | |
| border-left: 4px solid var(--color-success); | |
| } | |
| .channel-item.disabled { | |
| border-left: 4px solid var(--text-muted); | |
| opacity: 0.7; | |
| } | |
| .channel-info h4 { | |
| color: var(--text-primary); | |
| font-family: var(--font-display); | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .channel-info p { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-bottom: 4px; | |
| } | |
| .channel-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .channel-actions button { | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| width: auto; | |
| } | |
| .channel-actions .btn-primary { | |
| background: var(--color-primary); | |
| color: white; | |
| width: auto; | |
| margin: 0; | |
| padding: 8px 16px; | |
| font-size: 0.85rem; | |
| text-transform: none; | |
| letter-spacing: normal; | |
| border: 1px solid var(--color-primary); | |
| } | |
| .channel-actions .btn-primary:hover { | |
| background: var(--color-accent-dark); | |
| border-color: var(--color-accent-dark); | |
| transform: translateY(-1px); | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.15); | |
| } | |
| .channel-actions .btn-secondary { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-primary); | |
| width: auto; | |
| margin: 0; | |
| padding: 8px 16px; | |
| font-size: 0.85rem; | |
| } | |
| .channel-actions .btn-secondary:hover { | |
| background: var(--bg-tertiary); | |
| border-color: var(--color-accent); | |
| transform: translateY(-1px); | |
| } | |
| .btn-danger { | |
| background: var(--color-error); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background: #a5201e; | |
| transform: translateY(-1px); | |
| } | |
| /* API使用说明样式 */ | |
| .api-usage { | |
| background: var(--bg-secondary); | |
| border-radius: 16px; | |
| padding: 32px; | |
| margin-bottom: 32px; | |
| box-shadow: var(--shadow-medium); | |
| border: 1px solid var(--border-secondary); | |
| } | |
| .api-endpoints { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .endpoint-card { | |
| background: var(--bg-tertiary); | |
| padding: 24px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border-primary); | |
| transition: all 0.3s ease; | |
| } | |
| .security-note { | |
| background: linear-gradient(90deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)); | |
| border-left: 4px solid #ffc107; | |
| padding: 8px 12px; | |
| margin: 12px 0; | |
| border-radius: 4px; | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| } | |
| /* 工作原理和支持转换样式优化 */ | |
| .usage-notes { | |
| margin-top: 32px; | |
| padding: 24px; | |
| background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%); | |
| border-radius: 12px; | |
| border: 1px solid var(--border-primary); | |
| } | |
| .usage-notes h4 { | |
| color: var(--color-accent); | |
| font-family: var(--font-display); | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .usage-notes h4::before { | |
| content: ''; | |
| width: 4px; | |
| height: 20px; | |
| background: var(--color-accent); | |
| border-radius: 2px; | |
| } | |
| .usage-notes ol { | |
| margin: 0; | |
| padding-left: 24px; | |
| margin-bottom: 24px; | |
| } | |
| .usage-notes ol li { | |
| margin-bottom: 12px; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| font-size: 0.95rem; | |
| } | |
| .usage-notes ol li strong { | |
| color: var(--color-accent-dark); | |
| font-weight: 600; | |
| } | |
| .usage-notes ul { | |
| margin: 0; | |
| padding-left: 24px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 8px; | |
| } | |
| .usage-notes ul li { | |
| margin-bottom: 8px; | |
| line-height: 1.5; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| position: relative; | |
| padding-left: 8px; | |
| } | |
| .usage-notes ul li::before { | |
| content: '✓'; | |
| color: var(--color-accent); | |
| font-weight: bold; | |
| margin-right: 8px; | |
| margin-left: -8px; | |
| } | |
| .endpoint-card:hover { | |
| box-shadow: var(--shadow-medium); | |
| transform: translateY(-2px); | |
| } | |
| .endpoint-card h3 { | |
| color: var(--text-primary); | |
| font-family: var(--font-display); | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| } | |
| .endpoint-card code { | |
| display: block; | |
| background: var(--color-primary); | |
| color: var(--color-secondary); | |
| padding: 8px 12px; | |
| border-radius: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 0.85rem; | |
| margin-bottom: 12px; | |
| word-break: break-all; | |
| } | |
| .endpoint-card p { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| } | |
| /* 标签页样式 */ | |
| .tab-navigation { | |
| display: flex; | |
| border-bottom: 2px solid var(--border-primary); | |
| margin-bottom: var(--space-2xl); | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-none) var(--radius-none) 0 0; | |
| } | |
| .tab-button { | |
| flex: 1; | |
| padding: var(--space-lg) var(--space-xl); | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: var(--font-sans); | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| position: relative; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .tab-button::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: var(--color-accent); | |
| transform: scaleX(0); | |
| transition: transform var(--duration-medium) var(--ease-elegant); | |
| } | |
| .tab-button:hover { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| } | |
| .tab-button.active { | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| } | |
| .tab-button.active::after { | |
| transform: scaleX(1); | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeInTab var(--duration-medium) var(--ease-elegant); | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeInTab { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* 响应式设计增强 */ | |
| @media (max-width: 768px) { | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .channel-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 16px; | |
| } | |
| .channel-actions { | |
| width: 100%; | |
| justify-content: flex-end; | |
| } | |
| .api-endpoints { | |
| grid-template-columns: 1fr; | |
| } | |
| .tab-button { | |
| font-size: 0.875rem; | |
| padding: var(--space-md) var(--space-lg); | |
| } | |
| } | |
| /* 登录页面样式 */ | |
| .login-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); | |
| } | |
| .login-form { | |
| background: var(--bg-secondary); | |
| padding: var(--space-3xl); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); | |
| width: 100%; | |
| max-width: 400px; | |
| text-align: center; | |
| } | |
| .login-form h1 { | |
| color: var(--color-accent); | |
| margin-bottom: var(--space-lg); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| } | |
| .login-form h2 { | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-2xl); | |
| font-size: 1.25rem; | |
| font-weight: 500; | |
| } | |
| .login-form .form-group { | |
| margin-bottom: var(--space-xl); | |
| text-align: left; | |
| } | |
| .login-form label { | |
| display: block; | |
| margin-bottom: var(--space-sm); | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| } | |
| .login-form input { | |
| width: 100%; | |
| padding: var(--space-md); | |
| border: 1px solid var(--border-primary); | |
| border-radius: var(--radius-md); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all var(--duration-medium) var(--ease-elegant); | |
| } | |
| .login-form input:focus { | |
| outline: none; | |
| border-color: var(--color-accent); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .login-form .btn-primary { | |
| width: 100%; | |
| margin-top: var(--space-lg); | |
| } | |
| .error-message { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #ef4444; | |
| padding: var(--space-md); | |
| border-radius: var(--radius-md); | |
| margin-top: var(--space-lg); | |
| font-size: 0.875rem; | |
| } | |
| /* 头部导航栏样式 */ | |
| .header-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-xl); | |
| border-bottom: 1px solid var(--border-primary); | |
| background: var(--bg-luxury); | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .header-bar h1 { | |
| font-family: var(--font-display); | |
| font-size: 2.5rem; | |
| font-weight: 400; | |
| color: var(--text-primary); | |
| margin: 0; | |
| letter-spacing: -0.02em; | |
| line-height: 1.2; | |
| } | |
| @media (max-width: 768px) { | |
| .header-bar { | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| text-align: center; | |
| } | |
| .header-bar h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .header-bar h1 { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } |