/*
* ============================================================================
* ZenOps Studio — Slide Deck CSS
* Épisode 01 : C'est quoi Teleport ?
* ============================================================================
*
* Guide complet : ../../style/slide-engine-guide.md
* Design guide : ../../style/design-guide-slides.md
*
* Slides custom : chaos2 (16), timeline (10), arch (8), machid (14), outro (1)
* Slides standard : intro, teleport, avant/après
*
* ============================================================================
*/
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ── Design Tokens ──────────────────────────────────────────────────────────
* Dark theme inspired by GitHub dark / YouTube Studio.
* --bg/bg2/bg3: background layers (darkest → lightest) for depth
* --green: primary accent (Teleport brand)
* --border: subtle dividers, card outlines
* Use rgba() variants of these for glows: rgba(0,230,118,0.15) etc.
*/
:root {
--bg: #0D1117;
--bg2: #161B22;
--bg3: #1C2128;
--green: #00E676;
--violet: #7C3AED;
--blue: #3B82F6;
--orange: #F97316;
--red: #EF4444;
--yellow: #FBBF24;
--cyan: #22D3EE;
--pink: #F472B6;
--teleport: #512FC9;
--white: #FFFFFF;
--gray: #9CA3AF;
--border: #374151;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--white);
overflow: hidden;
}
/* Subtle dot grid — creates a tech-grid background texture.
* Fixed so it doesn't scroll. z-index:-1 keeps it behind everything. */
body::before {
content: '';
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none; z-index: -1;
}
/* ===== SLIDE ENGINE ================================================================
* The core presentation framework. All slides are stacked absolutely inside
* .slide-container. Only the .active slide is visible (opacity:1, scale:1).
*
* Transitions between slides:
* - Outgoing slide fades to opacity:0 + slight scale-down (0.97)
* - Incoming slide fades to opacity:1 + scale(1)
* - Duration: 0.5s ease-out — feels smooth at 30/60fps video capture
*
* .sc ("slide content") is the centered wrapper — constrains width to 1300px
* and vertically/horizontally centers all content via flexbox.
* =============================================================================== */
.progress-bar {
position: fixed; top: 0; left: 0; height: 3px;
background: linear-gradient(90deg, var(--green), var(--cyan), var(--violet));
z-index: 100; transition: width 0.5s ease-out;
}
.slide-container {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
}
.slide {
position: absolute; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(0.97);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
pointer-events: none;
}
.slide.active {
opacity: 1; transform: scale(1); pointer-events: auto;
}
.sc {
width: 92%; max-width: 1300px;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
text-align: center; gap: 30px;
}
/* ===== REVEAL SYSTEM ================================================================
* Progressive disclosure: elements appear one group at a time on keypress.
*
* HOW TO USE:
* Title
← appears on slide enter
* Paragraph
← appears on 1st keypress
* Also step 1
← same step = appear together
* Next group
← appears on 2nd keypress
*
* The JS engine reads data-step, adds .show when step >= data-step.
* CSS handles the animation — 30px upward slide + fade + slight scale.
*
* EASING: cubic-bezier(.16,1,.3,1) — "expo out" feel, fast start, gentle land.
* This easing is reused throughout the deck for consistency.
*
* STAGGER: To stagger items within the same step, use CSS transition-delay
* directly in the HTML: style="transition-delay: 0.1s"
* =============================================================================== */
.r {
opacity: 0; transform: translateY(30px) scale(0.95);
transition: opacity 0.5s cubic-bezier(.16,1,.3,1), transform 0.5s cubic-bezier(.16,1,.3,1);
}
.r.show {
opacity: 1; transform: translateY(0) scale(1);
}
/* ===== TOPIC NAV ===== */
.nav {
position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
background: rgba(13,17,23,0.95); backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; gap: 8px;
z-index: 80; padding: 0 16px; overflow-x: auto;
}
.nav-item {
padding: 6px 16px; border: 1px solid var(--border); border-radius: 20px;
color: var(--gray); cursor: pointer; font-size: 0.95rem; font-weight: 500;
transition: all 0.3s; white-space: nowrap;
}
.nav-item:hover { border-color: var(--green); color: var(--white); }
.nav-item.active {
background: rgba(0,230,118,0.12); border-color: var(--green);
color: var(--green); box-shadow: 0 0 16px rgba(0,230,118,0.15);
}
/* ===== LANGUAGE SWITCHER ===== */
.lang-switch {
position: fixed; top: 14px; right: 16px; z-index: 90;
display: flex; gap: 4px;
background: rgba(13,17,23,0.85); backdrop-filter: blur(10px);
border: 1px solid var(--border); border-radius: 8px;
padding: 3px; font-size: 0.8rem; font-weight: 600;
}
.lang-btn {
padding: 4px 10px; border-radius: 6px; border: none;
background: transparent; color: var(--gray); cursor: pointer;
transition: all 0.25s; font-family: inherit; font-size: inherit; font-weight: inherit;
}
.lang-btn:hover { color: var(--white); }
.lang-btn.active {
background: rgba(0,230,118,0.15); color: var(--green);
}
/* ===== REUSABLE KEYFRAME ANIMATIONS ================================================
* These are continuous (infinite) animations applied via CSS classes.
* They run independently of the reveal system.
*
* HOW TO USE:
* animation: float 4s ease-in-out infinite; ← gentle vertical bobbing
* animation: glow 3s ease-in-out infinite; ← pulsing green box-shadow
* animation: pulse-border 1.5s infinite; ← red border flicker (danger)
* animation: shake 0.5s ease-in-out; ← horizontal shake (one-shot)
*
* PATTERN: All use 0%/100% same state + 50% peak — smooth sinusoidal feel.
* Duration 3-4s for ambient effects, 0.5-1.5s for attention-grabbing.
* =============================================================================== */
@keyframes glow { 0%,100% { box-shadow: 0 0 20px rgba(0,230,118,0); } 50% { box-shadow: 0 0 40px rgba(0,230,118,0.2); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse-border { 0%,100% { border-color: var(--red); } 50% { border-color: rgba(239,68,68,0.3); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
/* ===== GLOBAL REUSABLE ELEMENTS ==================================================
* Shared components used across multiple slides.
* When building a new slide, prefer reusing these over creating new ones.
* =============================================================================== */
.big-icon {
width: 80px; height: 80px; display: block; margin: 0 auto 12px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.big-icon.xl { width: 100px; height: 100px; }
h2.slide-title {
font-size: 3.2rem; font-weight: 800; line-height: 1.2;
background: linear-gradient(135deg, var(--white) 0%, var(--gray) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
h2.slide-title.accent-green {
background: linear-gradient(135deg, var(--green), var(--cyan));
-webkit-background-clip: text; background-clip: text;
}
h2.slide-title.accent-red {
background: linear-gradient(135deg, var(--red), var(--orange));
-webkit-background-clip: text; background-clip: text;
}
h2.slide-title.accent-teleport {
background: linear-gradient(135deg, var(--teleport), var(--violet));
-webkit-background-clip: text; background-clip: text;
}
/* Teleport brand block (logo + title) */
.tp-brand {
display: flex; align-items: center; justify-content: center; gap: 20px;
margin-bottom: 8px;
}
.tp-brand-logo {
width: 80px; height: 80px;
filter: drop-shadow(0 0 20px rgba(81,47,201,0.5));
}
.sub { font-size: 1.35rem; color: var(--gray); max-width: 700px; line-height: 1.6; }
/* ===== CARD SYSTEM (YouTube style) ================================================
* Reusable card component with colored top accent bar.
*
* HOW TO USE:
* ← default green accent
*
Title
*
Description
*