diff --git a/index.html b/index.html index c97972a..a28e61d 100644 --- a/index.html +++ b/index.html @@ -418,21 +418,16 @@ } /* ═══════════════════════════════════════ - APP WALKTHROUGH — Sticky Scroll + APP WALKTHROUGH — Sticky + IntersectionObserver ═══════════════════════════════════════ */ .walkthrough { position: relative; z-index: 2; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; + padding: 80px 0 40px; } .walkthrough-inner { display: flex; - align-items: center; - justify-content: center; + align-items: flex-start; gap: 64px; padding: 0 48px; max-width: 1200px; @@ -440,23 +435,43 @@ width: 100%; } - /* Text column (left) */ + /* Scroll progress line — left edge */ + .wt-progress { + position: absolute; + left: 0; + top: 0; + width: 3px; + height: 0%; + background: linear-gradient(180deg, var(--primary), var(--primary-deep)); + border-radius: 0 2px 2px 0; + transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1); + opacity: 0.6; + } + + /* Text column — flows naturally, each step creates scroll distance */ .wt-text { - flex: 0 0 320px; + flex: 0 0 360px; position: relative; - min-height: 200px; } .wt-step { - position: absolute; - top: 0; - left: 0; - right: 0; - opacity: 0; - transform: translateY(20px); + min-height: 80vh; + display: flex; + flex-direction: column; + justify-content: center; + padding: 40px 0; + opacity: 0.12; + transform: translateY(16px); + filter: blur(1px); + transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), + filter 0.6s cubic-bezier(0.16, 1, 0.3, 1); } + .wt-step:first-child { padding-top: 0; } + .wt-step:last-child { min-height: 60vh; } .wt-step.active { opacity: 1; transform: none; + filter: blur(0px); } .wt-step-num { font-size: 0.68rem; @@ -505,11 +520,13 @@ transform: scale(1.25); } - /* Device column (right) */ + /* Device column — sticky, pins below nav while text scrolls */ .wt-device { flex: 1; max-width: 640px; - position: relative; + position: sticky; + top: calc(50vh - 240px); + align-self: flex-start; } .wt-device-frame { border-radius: 14px; @@ -520,6 +537,7 @@ 0 8px 20px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08), 0 48px 80px rgba(0,0,0,0.05); + position: relative; } .wt-device-frame::before { content: ''; @@ -552,7 +570,7 @@ color: #1a1a1a; } - /* Sidebar */ + /* Sidebar — CSS-driven reveal */ .wt-sidebar { width: 44px; background: #f4f0f4; @@ -563,6 +581,14 @@ padding: 10px 0; gap: 4px; opacity: 0; + transform: translateX(-20px); + transition: opacity 0.5s ease, transform 0.5s ease; + } + .walkthrough[data-step="1"] .wt-sidebar, + .walkthrough[data-step="2"] .wt-sidebar, + .walkthrough[data-step="3"] .wt-sidebar { + opacity: 1; + transform: none; } .wt-sidebar-logo { width: 24px; @@ -606,10 +632,20 @@ flex-direction: column; background: #fafafa; } + + /* Greeting — CSS-driven reveal */ .wt-greeting { opacity: 0; + transform: translateY(-10px); + transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; margin-bottom: 4px; } + .walkthrough[data-step="1"] .wt-greeting, + .walkthrough[data-step="2"] .wt-greeting, + .walkthrough[data-step="3"] .wt-greeting { + opacity: 1; + transform: none; + } .wt-greeting-label { font-size: 14px; color: #8a8ea9; @@ -629,18 +665,35 @@ font-size: 28px; line-height: 1; } + + /* Brief — CSS-driven reveal */ .wt-brief { opacity: 0; + transform: translateY(10px); + transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; margin: 16px 0 20px; font-size: 13px; line-height: 1.6; color: #555; max-width: 480px; } + .walkthrough[data-step="2"] .wt-brief, + .walkthrough[data-step="3"] .wt-brief { + opacity: 1; + transform: none; + } + + /* Chat — CSS-driven reveal */ .wt-chat { opacity: 0; + transform: translateY(15px); + transition: opacity 0.5s ease, transform 0.5s ease; margin-top: auto; } + .walkthrough[data-step="3"] .wt-chat { + opacity: 1; + transform: none; + } .wt-chat-input { display: flex; align-items: center; @@ -667,13 +720,21 @@ flex-shrink: 0; } .wt-chat-send i { width: 14px; height: 14px; color: #e5a94e; } + + /* Suggestions — CSS-driven reveal */ .wt-suggestions { opacity: 0; + transform: translateY(15px); + transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } + .walkthrough[data-step="3"] .wt-suggestions { + opacity: 1; + transform: none; + } .wt-suggestion { display: flex; align-items: center; @@ -684,7 +745,7 @@ } .wt-suggestion i { width: 14px; height: 14px; flex-shrink: 0; } - /* Pillar pills (below device) */ + /* Pillar pills — CSS-driven reveal */ .wt-pillars { display: flex; gap: 16px; @@ -692,24 +753,62 @@ flex-wrap: wrap; margin-top: 32px; opacity: 0; + transform: translateY(10px); + transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; + } + .walkthrough[data-step="3"] .wt-pillars { + opacity: 1; + transform: none; } + /* Walkthrough — Tablet */ @media (max-width: 900px) { + .walkthrough { padding: 40px 0 24px; } .walkthrough-inner { flex-direction: column; - gap: 32px; - padding: 80px 20px 24px; + gap: 0; + padding: 0 20px; } - .wt-text { flex: none; width: 100%; min-height: 120px; } - .wt-device { max-width: 100%; } - .wt-app { min-height: 280px; } + .wt-progress { display: none; } + .wt-device { + order: -1; + position: sticky; + top: 72px; + max-width: 100%; + z-index: 1; + padding-bottom: 16px; + } + .wt-text { + flex: none; + width: 100%; + position: relative; + z-index: 2; + } + .wt-step { + min-height: 70vh; + padding: 32px 0; + background: linear-gradient(180deg, rgba(244,237,243,0.95) 0%, rgba(244,237,243,0.8) 80%, transparent 100%); + border-radius: 16px; + padding-left: 16px; + padding-right: 16px; + } + .wt-step:first-child { padding-top: 24px; } + .wt-step.active { filter: blur(0px); } + .wt-app { min-height: 260px; } .wt-main { padding: 20px 24px; } .wt-greeting-name { font-size: 24px; } } + + /* Walkthrough — Mobile */ @media (max-width: 640px) { - .walkthrough-inner { padding: 72px 16px 16px; gap: 20px; } - .wt-text { flex: none; } - .wt-app { min-height: 240px; font-size: 11px; } + .walkthrough { padding: 24px 0 16px; } + .walkthrough-inner { padding: 0 16px; } + .wt-device { top: 68px; } + .wt-step { + min-height: 55vh; + padding: 20px 12px; + } + .wt-app { min-height: 200px; font-size: 11px; } .wt-main { padding: 16px 18px; } .wt-greeting-name { font-size: 20px; } .wt-greeting-name .wt-sparkle { font-size: 18px; } @@ -935,8 +1034,10 @@ transition-duration: 0.01ms !important; } .gs-reveal { opacity: 1; transform: none; } - .wt-step { opacity: 1 !important; transform: none !important; } + .wt-step { opacity: 1 !important; transform: none !important; filter: none !important; } .wt-sidebar, .wt-greeting, .wt-brief, .wt-chat, .wt-suggestions, .wt-pillars { opacity: 1 !important; transform: none !important; } + .wt-device { position: relative !important; top: auto !important; transform: none !important; } + .wt-progress { display: none !important; } .particle { display: none; } } @@ -989,7 +1090,7 @@ -

Free to start · No credit card · Early adopters get priority

+

Free to start · No credit card · Privacy policy

@@ -1003,15 +1104,9 @@
- - - -
+
+
@@ -1224,7 +1319,7 @@ -

No spam, ever. Unsubscribe anytime.

+

No spam, ever. Privacy policy