| |
| |
| |
| |
|
|
| |
|
|
| |
| :root { |
| --bg-primary: #0b0b0d; |
| --bg-secondary: #111116; |
| --bg-card: rgba(255, 255, 255, 0.04); |
| --bg-card-hover: rgba(255, 255, 255, 0.07); |
| --text-primary: #ffffff; |
| --text-secondary: rgba(255, 255, 255, 0.72); |
| --text-muted: rgba(255, 255, 255, 0.42); |
| --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.12) 0%, rgba(139, 92, 246, 0.12) 100%); |
| --border-color: rgba(255, 255, 255, 0.08); |
| --glass-bg: rgba(255, 255, 255, 0.05); |
| --glass-border: rgba(255, 255, 255, 0.10); |
| --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6); |
| --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.25); |
| --transition-fast: 0.18s ease; |
| --transition-smooth: 0.38s cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
|
|
| |
| *, *::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', sans-serif; |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.6; |
| overflow: hidden; |
| min-height: 100vh; |
| } |
|
|
| |
| .presentation-container { |
| width: 100vw; |
| height: 100vh; |
| position: relative; |
| background-color: #0b0b0d; |
| background-image: |
| repeating-linear-gradient(45deg, #0b0b0d, #0b0b0d 6px, #131317 6px, #131317 7px), |
| radial-gradient(ellipse at 15% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 55%), |
| radial-gradient(ellipse at 85% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 55%); |
| } |
|
|
| |
| .progress-bar { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background: rgba(255, 255, 255, 0.06); |
| z-index: 1000; |
| } |
|
|
| .progress-fill { |
| height: 100%; |
| background: var(--gradient-primary); |
| width: 10%; |
| transition: width var(--transition-smooth); |
| box-shadow: 0 0 8px rgba(99, 102, 241, 0.5); |
| } |
|
|
| |
| .slide-counter { |
| position: fixed; |
| top: 20px; |
| right: 30px; |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| font-family: 'JetBrains Mono', monospace; |
| font-weight: 500; |
| z-index: 1000; |
| letter-spacing: 0.05em; |
| } |
|
|
| #currentSlide { |
| color: var(--text-primary); |
| font-weight: 700; |
| } |
|
|
| |
| .nav-controls { |
| position: fixed; |
| bottom: 30px; |
| left: 50%; |
| transform: translateX(-50%); |
| display: flex; |
| gap: 15px; |
| z-index: 1000; |
| } |
|
|
| .nav-btn { |
| width: 48px; |
| height: 48px; |
| border-radius: 50%; |
| border: 1px solid var(--glass-border); |
| background: var(--glass-bg); |
| backdrop-filter: blur(12px); |
| 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 { |
| position: fixed; |
| bottom: 30px; |
| right: 30px; |
| font-size: 0.72rem; |
| color: var(--text-muted); |
| font-family: 'JetBrains Mono', monospace; |
| z-index: 1000; |
| letter-spacing: 0.06em; |
| } |
|
|
| |
| .slides-wrapper { |
| width: 100%; |
| height: 100%; |
| position: relative; |
| } |
|
|
| |
| .slide { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 70px 90px; |
| opacity: 0; |
| visibility: hidden; |
| transform: translateX(40px); |
| transition: all var(--transition-smooth); |
| overflow-y: auto; |
| } |
|
|
| .slide.active { |
| opacity: 1; |
| visibility: visible; |
| transform: translateX(0); |
| } |
|
|
| .slide.prev { |
| transform: translateX(-40px); |
| } |
|
|
| |
| .slide-content { |
| max-width: 1200px; |
| width: 100%; |
| animation: slideIn 0.55s ease forwards; |
| } |
|
|
| @keyframes slideIn { |
| from { opacity: 0; transform: translateY(18px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| |
| .gradient-text { |
| background: var(--gradient-primary); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| |
| .serif-title { |
| font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; |
| font-weight: 400; |
| letter-spacing: -0.01em; |
| } |
|
|
| .serif-italic { |
| font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; |
| font-style: italic; |
| font-weight: 400; |
| } |
|
|
| |
| .tagline-badge { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.78rem; |
| font-weight: 500; |
| letter-spacing: 0.22em; |
| color: var(--accent-primary); |
| text-transform: uppercase; |
| display: inline-block; |
| margin-bottom: 1rem; |
| } |
|
|
| |
| .sub-line { |
| width: 100px; |
| height: 2px; |
| background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); |
| margin: 1.2rem 0; |
| border-radius: 2px; |
| } |
|
|
| |
| .main-title { |
| font-family: 'Playfair Display', Georgia, serif; |
| font-size: clamp(2.8rem, 6vw, 5rem); |
| font-weight: 400; |
| line-height: 1.12; |
| margin-bottom: 0.5rem; |
| letter-spacing: -0.02em; |
| } |
|
|
| |
| .slide-title { |
| font-size: clamp(1.75rem, 3.5vw, 2.5rem); |
| font-weight: 700; |
| margin-bottom: 0.4rem; |
| letter-spacing: -0.01em; |
| } |
|
|
| .slide-subtitle { |
| font-size: clamp(0.9rem, 1.2vw, 1.05rem); |
| color: var(--text-muted); |
| margin-bottom: 1.5rem; |
| } |
|
|
| |
| .tagline-slide-content { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| max-width: 920px; |
| margin: 0 auto; |
| } |
|
|
| .tagline-title { |
| font-family: 'Playfair Display', Georgia, serif; |
| font-size: clamp(2.2rem, 4.8vw, 3.5rem); |
| line-height: 1.38; |
| color: #ffffff; |
| font-weight: 400; |
| margin-bottom: 1.5rem; |
| } |
|
|
| |
| .footer-date { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.9rem; |
| font-weight: 500; |
| color: rgba(255, 255, 255, 0.8); |
| letter-spacing: 0.06em; |
| } |
|
|
| .footer-link { |
| font-family: 'Inter', sans-serif; |
| font-size: 0.78rem; |
| color: rgba(255, 255, 255, 0.25); |
| letter-spacing: 0.06em; |
| text-decoration: none; |
| transition: color var(--transition-fast); |
| } |
|
|
| .footer-link:hover { |
| color: var(--accent-primary); |
| } |
|
|
| |
| .title-slide { |
| text-align: center; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
|
|
| .tagline { |
| font-size: 1.2rem; |
| color: var(--text-secondary); |
| margin-bottom: 2rem; |
| letter-spacing: 0.02em; |
| } |
|
|
| |
| .logo-row { |
| display: flex; |
| justify-content: center; |
| gap: 18px; |
| flex-wrap: wrap; |
| margin: 1rem 0 2.5rem; |
| } |
|
|
| .logo-icon { |
| width: 34px; |
| height: 34px; |
| object-fit: contain; |
| transition: all var(--transition-smooth); |
| } |
|
|
| .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.92); |
| border-radius: 8px; |
| } |
|
|
| .logo-wrapper:hover { |
| transform: scale(1.15) translateY(-3px); |
| } |
|
|
| .logo-wrapper:hover .logo-icon { |
| filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5)); |
| } |
|
|
| |
| .agenda-list { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| max-width: 750px; |
| } |
|
|
| .agenda-item { |
| display: flex; |
| align-items: center; |
| gap: 22px; |
| padding: 16px 24px; |
| 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(18px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .agenda-item:hover { |
| background: var(--bg-card-hover); |
| border-color: var(--accent-primary); |
| transform: translateX(8px); |
| } |
|
|
| .agenda-number { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 1.2rem; |
| font-weight: 700; |
| background: var(--gradient-primary); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| min-width: 38px; |
| } |
|
|
| .agenda-text { |
| font-size: 1.02rem; |
| color: var(--text-secondary); |
| font-weight: 400; |
| } |
|
|
| |
| .llm-platforms-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); |
| gap: 22px; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .llm-card { |
| padding: 22px; |
| background: var(--bg-card); |
| border: 1.5px solid var(--border-color); |
| border-radius: 16px; |
| transition: all var(--transition-smooth); |
| } |
|
|
| .llm-card:hover { |
| border-color: var(--accent-primary); |
| transform: translateY(-3px); |
| box-shadow: var(--shadow-glow); |
| } |
|
|
| .llm-header { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| margin-bottom: 12px; |
| } |
|
|
| .llm-icon { |
| width: 30px; |
| height: 30px; |
| object-fit: contain; |
| } |
|
|
| .llm-header h3 { |
| font-size: 1rem; |
| font-weight: 600; |
| } |
|
|
| .llm-card > p { |
| font-size: 0.9rem; |
| color: var(--text-muted); |
| line-height: 1.5; |
| } |
|
|
| |
| .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.92); |
| } |
|
|
| |
| .closing-slide { |
| text-align: center; |
| } |
|
|
| .closing-card { |
| padding: 24px; |
| 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.05rem; |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
|
|
| .closing-card p { |
| font-size: 0.88rem; |
| color: var(--text-muted); |
| } |
|
|
| .contact-section { |
| margin-top: 2rem; |
| } |
|
|
| .questions-text { |
| font-size: 1.1rem; |
| color: var(--accent-primary); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .slide { |
| padding: 80px 24px 100px; |
| } |
|
|
| .keyboard-hints { |
| display: none; |
| } |
|
|
| .slide-counter { |
| right: 20px; |
| } |
|
|
| .logo-row { |
| gap: 12px; |
| } |
|
|
| .logo-icon { |
| width: 26px; |
| height: 26px; |
| } |
|
|
| .agenda-list { |
| gap: 10px; |
| } |
|
|
| .agenda-item { |
| padding: 12px 16px; |
| } |
|
|
| .llm-platforms-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
|
|
