/* global React */const { useEffect, useRef, useState } = React;// ============================================================// DESIGN TOKENS — pinned to 1920×1080 slide canvas// ===================
88c1242 verified | /* ============================================================ | |
| DESIGN TOKENS | |
| ============================================================ */ | |
| :root { | |
| /* Colors */ | |
| --c-orange: #FF4D00; | |
| --c-black: #000000; | |
| --c-white: #FFFFFF; | |
| --c-white20: rgba(255,255,255,0.20); | |
| --c-white10: rgba(255,255,255,0.10); | |
| --c-white05: rgba(255,255,255,0.05); | |
| --c-black20: rgba(0,0,0,0.20); | |
| --c-black10: rgba(0,0,0,0.10); | |
| --c-black50: rgba(0,0,0,0.50); | |
| /* Type scale */ | |
| --t-eyebrow: 24px; | |
| --t-micro: 24px; | |
| --t-body: 32px; | |
| --t-bodyLg: 38px; | |
| --t-small: 26px; | |
| --t-kicker: 44px; | |
| --t-title: 88px; | |
| --t-titleLg: 120px; | |
| --t-display: 200px; | |
| --t-mega: 280px; | |
| /* Spacing */ | |
| --sp-px: 120px; | |
| --sp-pxLg: 160px; | |
| --sp-pyTop: 100px; | |
| --sp-pyBot: 90px; | |
| --sp-gap: 40px; | |
| --sp-gapLg: 64px; | |
| --sp-titleGap: 56px; | |
| --sp-itemGap: 32px; | |
| /* Fonts */ | |
| --f-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif; | |
| --f-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, monospace; | |
| --f-body: 'Inter', system-ui, -apple-system, sans-serif; | |
| } | |
| /* ============================================================ | |
| RESET & BASE | |
| ============================================================ */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: var(--c-black); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ============================================================ | |
| SLIDE FRAME | |
| ============================================================ */ | |
| .slide { | |
| width: 100%; | |
| height: 100vh; | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| padding: var(--sp-pyTop) var(--sp-pxLg) var(--sp-pyBot); | |
| overflow: hidden; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| transform: scale(0.97); | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| transform: scale(1); | |
| } | |
| .slide.no-pad { | |
| padding: 0; | |
| } | |
| /* ============================================================ | |
| META BAR | |
| ============================================================ */ | |
| .meta-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--f-mono); | |
| font-size: var(--t-eyebrow); | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| border-bottom: 2px solid currentColor; | |
| padding-bottom: 20px; | |
| margin-bottom: var(--sp-titleGap); | |
| } | |
| .meta-bar .meta-right { | |
| opacity: 0.55; | |
| } | |
| /* ============================================================ | |
| BOTTOM META | |
| ============================================================ */ | |
| .bottom-meta { | |
| position: absolute; | |
| left: var(--sp-pxLg); | |
| right: var(--sp-pxLg); | |
| bottom: 48px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--f-mono); | |
| font-size: var(--t-micro); | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| opacity: 0.55; | |
| } | |
| /* ============================================================ | |
| DISPLAY TEXT | |
| ============================================================ */ | |
| .display { | |
| font-family: var(--f-display); | |
| text-transform: uppercase; | |
| letter-spacing: -0.04em; | |
| line-height: 0.88; | |
| } | |
| .display.title { font-size: var(--t-title); } | |
| .display.titleLg { font-size: var(--t-titleLg); } | |
| .display.kicker { font-size: var(--t-kicker); } | |
| .display.mega { font-size: var(--t-mega); } | |
| .display.displaySz { font-size: var(--t-display); } | |
| /* ============================================================ | |
| BODY TEXT | |
| ============================================================ */ | |
| .body-text { | |
| font-family: var(--f-body); | |
| line-height: 1.45; | |
| text-wrap: pretty; | |
| } | |
| .body-text.size-body { font-size: var(--t-body); } | |
| .body-text.size-bodyLg { font-size: var(--t-bodyLg); } | |
| .body-text.size-small { font-size: var(--t-small); } | |
| /* ============================================================ | |
| MONO LABEL | |
| ============================================================ */ | |
| .mono { | |
| font-family: var(--f-mono); | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| } | |
| .mono.size-eyebrow { font-size: var(--t-eyebrow); } | |
| .mono.size-micro { font-size: var(--t-micro); } | |
| /* ============================================================ | |
| INDEX (01, 02, etc.) | |
| ============================================================ */ | |
| .idx { | |
| font-family: var(--f-mono); | |
| letter-spacing: -0.02em; | |
| } | |
| /* ============================================================ | |
| MARQUEE | |
| ============================================================ */ | |
| .marquee-strip { | |
| overflow: hidden; | |
| border-top: 2px solid var(--c-black); | |
| border-bottom: 2px solid var(--c-black); | |
| padding: 20px 0; | |
| } | |
| .marquee-strip.skew { transform: skewY(-2deg); } | |
| .marquee-track { | |
| display: flex; | |
| width: max-content; | |
| white-space: nowrap; | |
| } | |
| .marquee-track.dir-left { animation: ka-marquee 40s linear infinite; } | |
| .marquee-track.dir-right { animation: ka-marquee-rev 40s linear infinite; } | |
| .marquee-item { | |
| font-family: var(--f-display); | |
| font-size: 10vw; | |
| text-transform: uppercase; | |
| letter-spacing: -0.04em; | |
| line-height: 1; | |
| padding: 0 40px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 32px; | |
| } | |
| .marquee-item .diamond { | |
| color: var(--c-orange); | |
| font-size: 0.6em; | |
| } | |
| /* ============================================================ | |
| BADGE (Circular rotating text) | |
| ============================================================ */ | |
| .badge { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .badge.spinning svg { | |
| animation: ka-spin 18s linear infinite; | |
| } | |
| .badge svg { | |
| width: 100%; | |
| height: 100%; | |
| overflow: visible; | |
| } | |
| /* ============================================================ | |
| ARROW | |
| ============================================================ */ | |
| .arrow-svg { | |
| flex-shrink: 0; | |
| } | |
| /* ============================================================ | |
| ANIMATIONS | |
| ============================================================ */ | |
| @keyframes ka-marquee { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| @keyframes ka-marquee-rev { | |
| 0% { transform: translateX(-50%); } | |
| 100% { transform: translateX(0); } | |
| } | |
| @keyframes ka-spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @keyframes ka-fade-in-up { | |
| 0% { opacity: 0; transform: translateY(40px); } | |
| 100% { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes ka-fade-in { | |
| 0% { opacity: 0; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes ka-scale-in { | |
| 0% { opacity: 0; transform: scale(0.85); } | |
| 100% { opacity: 1; transform: scale(1); } | |
| } | |
| .anim-fade-in-up { | |
| animation: ka-fade-in-up 0.6s ease-out both; | |
| } | |
| .anim-fade-in { | |
| animation: ka-fade-in 0.5s ease both; | |
| } | |
| .anim-scale-in { | |
| animation: ka-scale-in 0.5s ease both; | |
| } | |
| .anim-delay-1 { animation-delay: 0.1s; } | |
| .anim-delay-2 { animation-delay: 0.2s; } | |
| .anim-delay-3 { animation-delay: 0.3s; } | |
| .anim-delay-4 { animation-delay: 0.4s; } | |
| .anim-delay-5 { animation-delay: 0.5s; } | |
| .anim-delay-6 { animation-delay: 0.6s; } | |
| /* ============================================================ | |
| NAV OVERLAY | |
| ============================================================ */ | |
| .nav-btn { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| border: 1.5px solid rgba(255,255,255,0.25); | |
| background: rgba(255,255,255,0.08); | |
| color: rgba(255,255,255,0.7); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| backdrop-filter: blur(8px); | |
| } | |
| .nav-btn:hover { | |
| background: rgba(255,255,255,0.18); | |
| color: #fff; | |
| border-color: rgba(255,255,255,0.45); | |
| transform: scale(1.08); | |
| } | |
| .nav-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* ============================================================ | |
| OVERVIEW MODAL | |
| ============================================================ */ | |
| .overview-card { | |
| aspect-ratio: 16 / 9; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: all 0.25s ease; | |
| position: relative; | |
| } | |
| .overview-card:hover { | |
| border-color: var(--c-orange); | |
| transform: scale(1.03); | |
| z-index: 2; | |
| } | |
| .overview-card .overview-label { | |
| position: absolute; | |
| bottom: 8px; | |
| left: 10px; | |
| font-family: var(--f-mono); | |
| font-size: 11px; | |
| color: rgba(255,255,255,0.7); | |
| background: rgba(0,0,0,0.7); | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| } | |
| /* ============================================================ | |
| CUSTOM SLIDE STYLES | |
| ============================================================ */ | |
| /* Feature grid */ | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--sp-gap); | |
| flex: 1; | |
| } | |
| .feature-card { | |
| background: var(--c-white10); | |
| border: 1px solid var(--c-white20); | |
| border-radius: 16px; | |
| padding: 40px 32px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| transition: background 0.3s ease, border-color 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| background: var(--c-white20); | |
| border-color: var(--c-orange); | |
| } | |
| .feature-card .card-idx { | |
| font-family: var(--f-mono); | |
| font-size: var(--t-eyebrow); | |
| color: var(--c-orange); | |
| letter-spacing: -0.02em; | |
| } | |
| .feature-card .card-title { | |
| font-family: var(--f-display); | |
| font-size: var(--t-kicker); | |
| text-transform: uppercase; | |
| letter-spacing: -0.03em; | |
| line-height: 0.95; | |
| } | |
| .feature-card .card-body { | |
| font-family: var(--f-body); | |
| font-size: var(--t-small); | |
| line-height: 1.5; | |
| opacity: 0.7; | |
| } | |
| /* Stat row */ | |
| .stat-row { | |
| display: flex; | |
| gap: var(--sp-gapLg); | |
| align-items: baseline; | |
| } | |
| .stat-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .stat-number { | |
| font-family: var(--f-display); | |
| font-size: var(--t-titleLg); | |
| line-height: 0.88; | |
| letter-spacing: -0.04em; | |
| text-transform: uppercase; | |
| } | |
| .stat-label { | |
| font-family: var(--f-mono); | |
| font-size: var(--t-eyebrow); | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| opacity: 0.6; | |
| } | |
| /* Timeline */ | |
| .timeline { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--sp-itemGap); | |
| flex: 1; | |
| justify-content: center; | |
| } | |
| .timeline-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 32px; | |
| padding: 24px 0; | |
| border-bottom: 1px solid var(--c-white10); | |
| } | |
| .timeline-item:last-child { | |
| border-bottom: none; | |
| } | |
| .timeline-year { | |
| font-family: var(--f-mono); | |
| font-size: var(--t-eyebrow); | |
| letter-spacing: -0.02em; | |
| color: var(--c-orange); | |
| min-width: 100px; | |
| } | |
| .timeline-content { | |
| flex: 1; | |
| } | |
| .timeline-title { | |
| font-family: var(--f-display); | |
| font-size: var(--t-body); | |
| text-transform: uppercase; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 8px; | |
| } | |
| .timeline-desc { | |
| font-family: var(--f-body); | |
| font-size: var(--t-small); | |
| line-height: 1.5; | |
| opacity: 0.65; | |
| } | |
| /* Two column */ | |
| .two-col { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--sp-gapLg); | |
| flex: 1; | |
| align-items: center; | |
| } | |
| /* Quote style */ | |
| .quote-block { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| max-width: 80%; | |
| } | |
| .quote-text { | |
| font-family: var(--f-display); | |
| font-size: var(--t-title); | |
| text-transform: uppercase; | |
| letter-spacing: -0.04em; | |
| line-height: 0.92; | |
| } | |
| .quote-attr { | |
| font-family: var(--f-mono); | |
| font-size: var(--t-eyebrow); | |
| letter-spacing: -0.02em; | |
| text-transform: uppercase; | |
| opacity: 0.55; | |
| } | |
| /* Image placeholder */ | |
| .img-block { | |
| border-radius: 16px; | |
| overflow: hidden; | |
| border: 2px solid var(--c-white10); | |
| } | |
| .img-block img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| /* Progress bar */ | |
| .progress-bar { | |
| height: 6px; | |
| background: var(--c-white10); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--c-orange); | |
| border-radius: 3px; | |
| transition: width 0.8s ease; | |
| } | |
| /* End slide */ | |
| .end-badge-container { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Responsive fallback for smaller screens */ | |
| @media (max-width: 1200px) { | |
| :root { | |
| --sp-px: 60px; | |
| --sp-pxLg: 60px; | |
| --sp-pyTop: 60px; | |
| --sp-pyBot: 50px; | |
| --sp-titleGap: 36px; | |
| --sp-gap: 24px; | |
| --sp-gapLg: 40px; | |
| --t-title: 60px; | |
| --t-titleLg: 80px; | |
| --t-display: 120px; | |
| --t-mega: 160px; | |
| --t-kicker: 32px; | |
| --t-body: 22px; | |
| --t-bodyLg: 26px; | |
| --t-small: 18px; | |
| --t-eyebrow: 16px; | |
| --t-micro: 14px; | |
| } | |
| .feature-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .two-col { | |
| grid-template-columns: 1fr; | |
| } | |
| .stat-number { | |
| font-size: 64px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| :root { | |
| --sp-px: 24px; | |
| --sp-pxLg: 24px; | |
| --sp-pyTop: 40px; | |
| --sp-pyBot: 40px; | |
| --t-title: 40px; | |
| --t-titleLg: 56px; | |
| --t-display: 72px; | |
| --t-mega: 96px; | |
| --t-kicker: 24px; | |
| --t-body: 16px; | |
| --t-bodyLg: 20px; | |
| --t-small: 14px; | |
| --t-eyebrow: 12px; | |
| --t-micro: 11px; | |
| } | |
| .feature-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .stat-row { | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .stat-number { | |
| font-size: 48px; | |
| } | |
| .slide { | |
| padding: var(--sp-pyTop) var(--sp-pxLg) var(--sp-pyBot); | |
| } | |
| } |