Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap'); | |
| :root { | |
| --bg-light: #F8F9FA; | |
| --card-bg: #FFFFFF; | |
| --text-main: #202124; | |
| --text-muted: #5F6368; | |
| /* Google Brand Colors */ | |
| --g-blue: #4285F4; | |
| --g-red: #EA4335; | |
| --g-yellow: #FBBC05; | |
| --g-green: #34A853; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| /* Prefer Google Sans if available, otherwise fallback to Google Sans Text from webfont, then Roboto */ | |
| font-family: 'Google Sans', 'Google Sans Text', 'Product Sans', Roboto, Arial, sans-serif; | |
| background-color: var(--bg-light); | |
| color: var(--text-main); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .presentation-container { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| /* Controls */ | |
| .controls { | |
| position: absolute; | |
| bottom: 40px; | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| background: var(--card-bg); | |
| padding: 12px 24px; | |
| border-radius: 50px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| .nav-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .nav-btn:hover:not(:disabled) { | |
| color: var(--g-blue); | |
| transform: scale(1.1); | |
| } | |
| .nav-btn:disabled { | |
| color: #DADCE0; | |
| cursor: not-allowed; | |
| } | |
| .counter { | |
| font-weight: 500; | |
| font-size: 1.1rem; | |
| color: var(--text-muted); | |
| min-width: 60px; | |
| text-align: center; | |
| } | |
| /* Slides Wrapper */ | |
| .slides-wrapper { | |
| position: relative; | |
| width: 85%; | |
| max-width: 1200px; | |
| height: 75%; | |
| } | |
| .slide { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| visibility: hidden; | |
| /* Soft Google-style upward fade */ | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Animation States */ | |
| .slide.active { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| z-index: 10; | |
| } | |
| /* For Google I/O style, we don't do horizontal sliding, just a clean fade up/down */ | |
| .slide.left { transform: translateY(-30px); z-index: 1; } | |
| .slide.right { transform: translateY(30px); z-index: 1; } | |
| /* Content Formatting */ | |
| .slide-content { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Title Slide Styling */ | |
| .title-slide { | |
| text-align: center; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .google-dots { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 24px; | |
| } | |
| .dot { width: 16px; height: 16px; border-radius: 50%; } | |
| .dot.blue { background-color: var(--g-blue); } | |
| .dot.red { background-color: var(--g-red); } | |
| .dot.yellow { background-color: var(--g-yellow); } | |
| .dot.green { background-color: var(--g-green); } | |
| .title-slide h1 { | |
| font-size: 4.5rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| letter-spacing: -1px; | |
| margin-bottom: 16px; | |
| } | |
| .title-slide h2 { | |
| font-size: 2rem; | |
| font-weight: 400; | |
| color: var(--text-muted); | |
| } | |
| /* Normal Slide Headers */ | |
| .header { | |
| margin-bottom: 40px; | |
| } | |
| .module-tag { | |
| display: inline-block; | |
| padding: 6px 16px; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 16px; | |
| } | |
| .tag-blue { background: rgba(66, 133, 244, 0.1); color: var(--g-blue); } | |
| .tag-red { background: rgba(234, 67, 53, 0.1); color: var(--g-red); } | |
| .tag-yellow { background: rgba(251, 188, 5, 0.1); color: #d99a00; } | |
| .tag-green { background: rgba(52, 168, 83, 0.1); color: var(--g-green); } | |
| .header h2 { | |
| font-size: 3.5rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| letter-spacing: -0.5px; | |
| } | |
| /* Cards / Content Panels */ | |
| .panel { | |
| background: var(--card-bg); | |
| border-radius: 24px; | |
| padding: 50px; | |
| flex: 1; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.05); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .panel h3 { | |
| font-size: 2rem; | |
| font-weight: 500; | |
| color: var(--text-main); | |
| margin-bottom: 24px; | |
| } | |
| .panel p { | |
| font-size: 1.4rem; | |
| line-height: 1.6; | |
| color: var(--text-muted); | |
| margin-bottom: 24px; | |
| } | |
| /* Data / Visual Blocks */ | |
| .visualizer-block { | |
| background: #F1F3F4; | |
| border-radius: 16px; | |
| padding: 30px; | |
| text-align: center; | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| } | |
| .code-font { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .token-row { margin: 15px 0; font-size: 2rem; display: flex; justify-content: center; gap: 10px; } | |
| .t-chunk { padding: 8px 16px; background: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-weight: 500; } | |
| .t-id { padding: 8px 16px; color: var(--text-muted); } | |
| /* Colors for specific concepts */ | |
| .c-blue { color: var(--g-blue); } | |
| .c-red { color: var(--g-red); } | |
| .c-green { color: var(--g-green); } | |
| .c-yellow { color: var(--g-yellow); } | |
| .math-block { | |
| background: #F1F3F4; | |
| padding: 2rem; | |
| border-radius: 16px; | |
| text-align: center; | |
| font-size: 2.2rem; | |
| margin: 20px 0; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| margin-top: 20px; | |
| } | |
| .info-card { | |
| background: #F8F9FA; | |
| border: 1px solid #E8EAED; | |
| padding: 30px; | |
| border-radius: 16px; | |
| } | |
| .info-card h4 { font-size: 1.4rem; margin-bottom: 12px; font-weight: 600; } | |
| .info-card p { font-size: 1.1rem; margin-bottom: 0; } | |
| .code-block { | |
| text-align: left; | |
| background: #202124; | |
| color: #E8EAED; | |
| } | |
| .code-block pre { margin: 0; font-size: 1.3rem; line-height: 1.6; } | |
| /* Launch Buttons */ | |
| .launch-btn { | |
| display: inline-block; | |
| margin-top: 30px; | |
| padding: 15px 30px; | |
| background-color: var(--g-blue); | |
| color: white; | |
| text-decoration: none; | |
| font-size: 1.4rem; | |
| font-weight: 500; | |
| border-radius: 50px; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3); | |
| } | |
| .launch-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4); | |
| color: white; | |
| } | |
| .launch-btn.red { background-color: var(--g-red); box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3); } | |
| .launch-btn.red:hover { box-shadow: 0 6px 20px rgba(234, 67, 53, 0.4); } | |
| .launch-btn.yellow { background-color: var(--g-yellow); box-shadow: 0 4px 15px rgba(251, 188, 5, 0.3); color: #202124;} | |
| .launch-btn.yellow:hover { box-shadow: 0 6px 20px rgba(251, 188, 5, 0.4); color: #202124; } | |
| .launch-btn.green { background-color: var(--g-green); box-shadow: 0 4px 15px rgba(52, 168, 83, 0.3); } | |
| .launch-btn.green:hover { box-shadow: 0 6px 20px rgba(52, 168, 83, 0.4); } | |