Spaces:
Running
Running
| /* ======================================== | |
| The AI-Powered Developer - Presentation | |
| Premium Modern Dark Theme - REVISED | |
| ======================================== */ | |
| /* CSS Variables */ | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-card: rgba(255, 255, 255, 0.03); | |
| --bg-card-hover: rgba(255, 255, 255, 0.06); | |
| --text-primary: #ffffff; | |
| --text-secondary: rgba(255, 255, 255, 0.7); | |
| --text-muted: rgba(255, 255, 255, 0.5); | |
| --accent-primary: #6366f1; | |
| --accent-secondary: #8b5cf6; | |
| --accent-tertiary: #ec4899; | |
| --accent-success: #22c55e; | |
| --accent-warning: #f59e0b; | |
| --accent-danger: #ef4444; | |
| --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); | |
| --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); | |
| --border-color: rgba(255, 255, 255, 0.08); | |
| --glass-bg: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3); | |
| --transition-fast: 0.2s ease; | |
| --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| /* Reset & Base */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| overflow: hidden; | |
| min-height: 100vh; | |
| } | |
| /* Presentation Container */ | |
| .presentation-container { | |
| width: 100vw; | |
| height: 100vh; | |
| position: relative; | |
| background: var(--bg-primary); | |
| background-image: | |
| radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 70%); | |
| } | |
| /* Progress Bar */ | |
| .progress-bar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: var(--border-color); | |
| z-index: 1000; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| width: 7.69%; | |
| transition: width var(--transition-smooth); | |
| box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); | |
| } | |
| /* Slide Counter */ | |
| .slide-counter { | |
| position: fixed; | |
| top: 20px; | |
| right: 30px; | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| z-index: 1000; | |
| letter-spacing: 0.05em; | |
| } | |
| #currentSlide { | |
| color: var(--text-primary); | |
| font-weight: 700; | |
| } | |
| /* Navigation Controls */ | |
| .nav-controls { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 15px; | |
| z-index: 1000; | |
| } | |
| .nav-btn { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| border: 1px solid var(--glass-border); | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-smooth); | |
| } | |
| .nav-btn:hover { | |
| background: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .nav-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .nav-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Keyboard Hints */ | |
| .keyboard-hints { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| z-index: 1000; | |
| } | |
| /* Slides Wrapper */ | |
| .slides-wrapper { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| /* Individual Slide */ | |
| .slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 60px 80px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateX(50px); | |
| transition: all var(--transition-smooth); | |
| overflow-y: auto; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateX(0); | |
| } | |
| .slide.prev { | |
| transform: translateX(-50px); | |
| } | |
| /* Slide Content */ | |
| .slide-content { | |
| max-width: 1200px; | |
| width: 100%; | |
| animation: slideIn 0.6s ease forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Typography */ | |
| .gradient-text { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .main-title { | |
| font-size: clamp(2.5rem, 6vw, 4.5rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 1rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .slide-title { | |
| font-size: clamp(1.75rem, 3.5vw, 2.5rem); | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| letter-spacing: -0.01em; | |
| } | |
| .subtitle { | |
| font-size: clamp(1.25rem, 2.5vw, 1.75rem); | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| font-weight: 400; | |
| } | |
| .slide-subtitle { | |
| font-size: clamp(0.95rem, 1.25vw, 1.1rem); | |
| color: var(--text-muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| .tagline { | |
| font-size: 1rem; | |
| color: var(--text-muted); | |
| margin-bottom: 2rem; | |
| } | |
| /* ========== LOGO WRAPPERS FOR DARK ICONS ========== */ | |
| .logo-wrapper { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8px; | |
| border-radius: 10px; | |
| background: transparent; | |
| transition: all var(--transition-smooth); | |
| } | |
| .logo-wrapper.light-bg { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-radius: 8px; | |
| } | |
| .logo-wrapper-small { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 6px; | |
| background: transparent; | |
| flex-shrink: 0; | |
| } | |
| .logo-wrapper-small.light-bg { | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| .light-bg-inline { | |
| background: rgba(255, 255, 255, 0.9); | |
| border-radius: 4px; | |
| padding: 2px; | |
| } | |
| /* Title Slide */ | |
| .title-slide { | |
| text-align: center; | |
| } | |
| .title-badge { | |
| display: inline-block; | |
| padding: 8px 20px; | |
| background: var(--gradient-subtle); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 100px; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--accent-primary); | |
| margin-bottom: 2rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .logo-row { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| margin-top: 1rem; | |
| } | |
| .logo-icon { | |
| width: 36px; | |
| height: 36px; | |
| object-fit: contain; | |
| transition: all var(--transition-smooth); | |
| } | |
| .logo-wrapper:hover { | |
| transform: scale(1.15) translateY(-3px); | |
| } | |
| .logo-wrapper:hover .logo-icon { | |
| filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5)); | |
| } | |
| /* Agenda List */ | |
| .agenda-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| max-width: 700px; | |
| } | |
| .agenda-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| padding: 15px 22px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| transition: all var(--transition-smooth); | |
| animation: fadeInUp 0.5s ease forwards; | |
| animation-delay: var(--delay); | |
| opacity: 0; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .agenda-item:hover { | |
| background: var(--bg-card-hover); | |
| border-color: var(--accent-primary); | |
| transform: translateX(10px); | |
| } | |
| .agenda-number { | |
| font-size: 1.25rem; | |
| font-weight: 800; | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| min-width: 40px; | |
| } | |
| .agenda-text { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Interactive Badge */ | |
| .interactive-badge { | |
| display: inline-block; | |
| padding: 6px 16px; | |
| background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.2)); | |
| border: 1px solid rgba(236, 72, 153, 0.3); | |
| border-radius: 100px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--accent-tertiary); | |
| margin-bottom: 1rem; | |
| } | |
| .warning-badge { | |
| display: inline-block; | |
| padding: 6px 16px; | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(245, 158, 11, 0.2)); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 100px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--accent-danger); | |
| margin-bottom: 1rem; | |
| } | |
| .demo-badge { | |
| display: inline-block; | |
| padding: 10px 25px; | |
| background: var(--gradient-primary); | |
| border-radius: 100px; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 1.5rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| /* ========== SLIDE 3: Scenarios & Approaches ========== */ | |
| .scenarios-container { | |
| margin-bottom: 1.5rem; | |
| } | |
| .section-header { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.75rem; | |
| } | |
| .scenario-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .scenario-tag { | |
| padding: 8px 16px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 100px; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .approaches-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .approach-card { | |
| padding: 25px; | |
| background: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| border-radius: 16px; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| } | |
| .approach-card:hover { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .approach-card.selected { | |
| border-color: var(--accent-primary); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .approach-letter { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| background: var(--gradient-primary); | |
| border-radius: 8px; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| margin-bottom: 12px; | |
| } | |
| .approach-card h3 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .approach-card>p { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-bottom: 12px; | |
| } | |
| .approach-details { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .discussion-prompt { | |
| font-size: 1rem; | |
| color: var(--accent-tertiary); | |
| text-align: center; | |
| padding: 15px; | |
| background: rgba(236, 72, 153, 0.1); | |
| border-radius: 10px; | |
| border: 1px solid rgba(236, 72, 153, 0.2); | |
| } | |
| /* ========== SLIDE 4: Templates Grid ========== */ | |
| .templates-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 2rem; | |
| } | |
| .template-card { | |
| padding: 20px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| text-align: center; | |
| transition: all var(--transition-smooth); | |
| } | |
| .template-card:hover { | |
| border-color: var(--accent-secondary); | |
| transform: translateY(-3px); | |
| } | |
| .template-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| .template-card h3 { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| } | |
| .template-card p { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .provider-links { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 20px; | |
| } | |
| .provider-links h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| } | |
| .links-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 12px; | |
| } | |
| .provider-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 16px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| text-decoration: none; | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| transition: all var(--transition-smooth); | |
| } | |
| .provider-link:hover { | |
| border-color: var(--accent-primary); | |
| color: var(--text-primary); | |
| transform: translateY(-2px); | |
| } | |
| .link-icon { | |
| width: 24px; | |
| height: 24px; | |
| object-fit: contain; | |
| } | |
| .text-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| height: 24px; | |
| background: var(--gradient-primary); | |
| border-radius: 6px; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| color: white; | |
| } | |
| /* ========== SLIDE 5: LLM Platforms with Voting ========== */ | |
| .llm-platforms-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 2rem; | |
| } | |
| .llm-card { | |
| padding: 20px; | |
| background: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| border-radius: 16px; | |
| transition: all var(--transition-smooth); | |
| cursor: pointer; | |
| } | |
| .llm-card:hover { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-3px); | |
| } | |
| .llm-card.voted { | |
| border-color: var(--accent-success); | |
| background: rgba(34, 197, 94, 0.1); | |
| } | |
| .llm-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .llm-icon { | |
| width: 32px; | |
| height: 32px; | |
| object-fit: contain; | |
| } | |
| .llm-header h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .llm-card>p { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| margin-bottom: 15px; | |
| } | |
| .text-logo { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| background: var(--gradient-primary); | |
| border-radius: 8px; | |
| font-size: 1.25rem; | |
| font-weight: 800; | |
| color: white; | |
| } | |
| /* Vote Bar */ | |
| .vote-bar { | |
| height: 8px; | |
| background: var(--border-color); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| margin-bottom: 8px; | |
| } | |
| .vote-fill { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| width: 0%; | |
| transition: width var(--transition-bounce); | |
| border-radius: 100px; | |
| } | |
| .vote-count { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .leaderboard-link { | |
| text-align: center; | |
| } | |
| .arena-link { | |
| display: inline-block; | |
| padding: 15px 30px; | |
| background: var(--gradient-primary); | |
| border-radius: 100px; | |
| color: white; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all var(--transition-smooth); | |
| } | |
| .arena-link:hover { | |
| transform: scale(1.05); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| /* ========== SLIDE 6: Modes Extended ========== */ | |
| .modes-extended-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 2rem; | |
| } | |
| .mode-extended-card { | |
| padding: 25px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| transition: all var(--transition-smooth); | |
| } | |
| .mode-extended-card:hover { | |
| border-color: var(--accent-secondary); | |
| transform: translateY(-3px); | |
| } | |
| .mode-icon-wrapper { | |
| font-size: 2rem; | |
| margin-bottom: 12px; | |
| } | |
| .mode-extended-card h3 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .mode-extended-card>p { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| margin-bottom: 12px; | |
| } | |
| .mode-tasks { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .task-tag { | |
| padding: 5px 10px; | |
| background: var(--gradient-subtle); | |
| border-radius: 100px; | |
| font-size: 0.75rem; | |
| color: var(--accent-primary); | |
| } | |
| .mcp-section { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 20px; | |
| } | |
| .mcp-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .mcp-card { | |
| padding: 20px; | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| } | |
| .mcp-card h4 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--accent-primary); | |
| } | |
| .mcp-card p { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .mcp-card ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .mcp-card li { | |
| padding: 5px 0; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Expert Talk Link */ | |
| .expert-talk-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-top: 12px; | |
| padding: 6px 12px; | |
| background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15)); | |
| border: 1px solid rgba(236, 72, 153, 0.3); | |
| border-radius: 100px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--accent-tertiary); | |
| text-decoration: none; | |
| transition: all var(--transition-smooth); | |
| } | |
| .expert-talk-link:hover { | |
| background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(139, 92, 246, 0.25)); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2); | |
| } | |
| .expert-icon { | |
| font-size: 0.9rem; | |
| } | |
| /* ========== SLIDE 7: Benchmark Table ========== */ | |
| .benchmarks-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .benchmark-table-container { | |
| overflow-x: auto; | |
| max-height: 55vh; | |
| } | |
| .benchmark-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background: var(--bg-card); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .benchmark-table th, | |
| .benchmark-table td { | |
| padding: 15px 20px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .benchmark-table th { | |
| background: rgba(99, 102, 241, 0.1); | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .benchmark-table td { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .benchmark-table tr:hover td { | |
| background: var(--bg-card-hover); | |
| } | |
| .benchmark-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .model-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .table-icon { | |
| width: 20px; | |
| height: 20px; | |
| object-fit: contain; | |
| } | |
| .mini-text-logo { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--gradient-primary); | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| color: white; | |
| } | |
| .rank-cell { | |
| font-size: 1.1rem; | |
| text-align: center; | |
| min-width: 40px; | |
| } | |
| .score-cell { | |
| text-align: center; | |
| } | |
| .score-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-secondary); | |
| } | |
| .score-badge.high { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)); | |
| color: var(--accent-success); | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .score-badge.medium { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1)); | |
| color: var(--accent-primary); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| } | |
| /* Compact table for more rows */ | |
| .benchmark-table.compact-table th, | |
| .benchmark-table.compact-table td { | |
| padding: 6px 10px; | |
| font-size: 0.8rem; | |
| } | |
| .benchmark-table.compact-table .model-cell { | |
| gap: 6px; | |
| } | |
| .benchmark-table.compact-table .logo-wrapper-small { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .table-note { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| margin-top: 5px; | |
| font-style: italic; | |
| } | |
| /* Compact LLM grid for more cards */ | |
| .llm-platforms-grid.compact { | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| } | |
| .llm-platforms-grid.compact .llm-card { | |
| padding: 15px; | |
| } | |
| .llm-platforms-grid.compact .llm-header h3 { | |
| font-size: 0.9rem; | |
| } | |
| .llm-platforms-grid.compact .llm-card>p { | |
| font-size: 0.75rem; | |
| margin-bottom: 10px; | |
| } | |
| .kpi-links { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 12px 15px; | |
| } | |
| .kpi-links h3 { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .kpi-link { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 10px 8px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| text-decoration: none; | |
| color: var(--text-primary); | |
| text-align: center; | |
| transition: all var(--transition-smooth); | |
| } | |
| .kpi-link:hover { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-2px); | |
| } | |
| .kpi-icon { | |
| font-size: 1.25rem; | |
| } | |
| .kpi-link span { | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| } | |
| .kpi-link small { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| } | |
| /* ========== SLIDE 8: Editor Poll ========== */ | |
| .editors-poll-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 20px; | |
| } | |
| .editor-poll-card { | |
| padding: 20px; | |
| background: var(--bg-card); | |
| border: 2px solid var(--border-color); | |
| border-radius: 16px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| } | |
| .editor-poll-card:hover { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-3px); | |
| } | |
| .editor-poll-card.voted { | |
| border-color: var(--accent-success); | |
| background: rgba(34, 197, 94, 0.1); | |
| } | |
| .editor-poll-icon { | |
| width: 48px; | |
| height: 48px; | |
| object-fit: contain; | |
| } | |
| .editor-name { | |
| display: block; | |
| font-weight: 600; | |
| margin: 12px 0; | |
| font-size: 0.95rem; | |
| } | |
| /* Editor Comparison Table */ | |
| .editor-comparison { | |
| margin-top: 1.5rem; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 15px; | |
| } | |
| .editor-table-container { | |
| overflow-x: auto; | |
| } | |
| .editor-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.8rem; | |
| } | |
| .editor-table th, | |
| .editor-table td { | |
| padding: 8px 12px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .editor-table th { | |
| background: rgba(99, 102, 241, 0.1); | |
| font-weight: 600; | |
| color: var(--accent-primary); | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .editor-table td { | |
| color: var(--text-secondary); | |
| } | |
| .editor-table tr:hover td { | |
| background: var(--bg-card-hover); | |
| } | |
| .editor-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* ========== SLIDE 9: My Pick ========== */ | |
| .my-pick-container { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .pick-card { | |
| max-width: 500px; | |
| width: 100%; | |
| padding: 40px; | |
| background: var(--bg-card); | |
| border: 2px solid var(--accent-primary); | |
| border-radius: 24px; | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .pick-card.featured { | |
| position: relative; | |
| } | |
| .pick-card.featured::before { | |
| content: '★ Recommended'; | |
| position: absolute; | |
| top: -12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 6px 20px; | |
| background: var(--gradient-primary); | |
| border-radius: 100px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: white; | |
| } | |
| .pick-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| margin-bottom: 25px; | |
| } | |
| .pick-main-icon { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: contain; | |
| } | |
| .pick-header h3 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| } | |
| .pick-tagline { | |
| color: var(--accent-primary); | |
| font-size: 1rem; | |
| } | |
| .pick-features { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .feature-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| } | |
| .feature-icon { | |
| font-size: 1.5rem; | |
| } | |
| /* ========== SLIDE 10: Demo ========== */ | |
| .demo-slide { | |
| text-align: center; | |
| } | |
| .demo-title { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| } | |
| .demo-subtitle { | |
| font-size: 1.25rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 3rem; | |
| } | |
| .demo-placeholder { | |
| padding: 60px; | |
| background: var(--bg-card); | |
| border: 2px dashed var(--border-color); | |
| border-radius: 24px; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .demo-icon { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| } | |
| .demo-placeholder p { | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| } | |
| /* ========== SLIDE 11: Incidents ========== */ | |
| .incidents-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 2rem; | |
| } | |
| .incident-card { | |
| padding: 20px; | |
| background: var(--bg-card); | |
| border-radius: 16px; | |
| border-left: 4px solid; | |
| } | |
| .incident-card.danger { | |
| border-left-color: var(--accent-danger); | |
| } | |
| .incident-card.warning { | |
| border-left-color: var(--accent-warning); | |
| } | |
| .incident-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .incident-icon { | |
| font-size: 1.5rem; | |
| } | |
| .incident-header h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| } | |
| .incident-card>p { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| .takeaway-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 20px; | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 12px; | |
| } | |
| .takeaway-icon { | |
| font-size: 2rem; | |
| } | |
| .takeaway-box p { | |
| font-size: 1rem; | |
| color: var(--text-secondary); | |
| } | |
| /* ========== SLIDE 12: Precautions ========== */ | |
| .precautions-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .precaution-card { | |
| padding: 25px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| text-align: center; | |
| transition: all var(--transition-smooth); | |
| } | |
| .precaution-card:hover { | |
| border-color: var(--accent-success); | |
| transform: translateY(-3px); | |
| } | |
| .precaution-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 15px; | |
| display: block; | |
| } | |
| .precaution-card h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| color: var(--accent-success); | |
| } | |
| .precaution-card p { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| /* ========== SLIDE 13: Closing ========== */ | |
| .closing-slide { | |
| text-align: center; | |
| } | |
| .closing-title { | |
| font-size: clamp(3rem, 8vw, 5rem); | |
| font-weight: 800; | |
| margin-bottom: 2rem; | |
| } | |
| .closing-message { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 2rem; | |
| text-align: left; | |
| } | |
| .closing-card { | |
| padding: 25px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| } | |
| .closing-icon { | |
| font-size: 2rem; | |
| margin-bottom: 12px; | |
| display: block; | |
| } | |
| .closing-card h3 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| } | |
| .closing-card p { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| .contact-section { | |
| margin-top: 2rem; | |
| } | |
| .questions-text { | |
| font-size: 1.25rem; | |
| color: var(--text-secondary); | |
| } | |
| /* ========== Responsive ========== */ | |
| @media (max-width: 768px) { | |
| .slide { | |
| padding: 80px 25px 100px; | |
| } | |
| .nav-controls { | |
| bottom: 20px; | |
| } | |
| .keyboard-hints { | |
| display: none; | |
| } | |
| .slide-counter { | |
| right: 20px; | |
| } | |
| .logo-row { | |
| gap: 15px; | |
| } | |
| .logo-icon { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .approaches-grid, | |
| .templates-grid, | |
| .llm-platforms-grid, | |
| .modes-extended-grid, | |
| .editors-poll-grid, | |
| .incidents-grid, | |
| .precautions-grid, | |
| .closing-message { | |
| grid-template-columns: 1fr; | |
| } | |
| .agenda-item { | |
| padding: 12px 18px; | |
| } | |
| .pick-card { | |
| padding: 25px; | |
| } | |
| .pick-main-icon { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| } | |
| /* Reduce motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } |