Help
RSS
API
Feed
Maltego
Contact
Domain > redtulip.io
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2024-05-25
3.131.163.83
(
ClassC
)
2026-02-20
15.185.147.119
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyServer: awselb/2.0Date: Fri, 20 Feb 2026 08:18:39 GMTContent-Type: text/htmlContent-Length: 134Connection: keep-aliveLocation: https://redtulip.io:443/ html>head>title>301 Moved Permanently/title>/head>body>center>h1>301 Moved Permanently/h1>/center>/body>/html>
Port 443
HTTP/1.1 200 OKDate: Fri, 20 Feb 2026 08:18:40 GMTContent-Type: text/htmlContent-Length: 117260Connection: keep-aliveServer: ApacheLast-Modified: Sat, 31 Jan 2026 14:41:42 GMTETag: 1ca0c-649b0169a8eebAccept-Ranges: bytesVary: Accept-Encoding !DOCTYPE html>html langen>head> title>RedTulip.io | Authentic Local Experiences/title> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalableno, viewport-fitcover /> meta namedescription contentConnect with local experience providers for authentic travel adventures. Download the RedTulip app today.> !-- PWA / Standalone mode --> meta nameapple-mobile-web-app-capable contentyes /> meta nameapple-mobile-web-app-status-bar-style contentblack-translucent /> meta namemobile-web-app-capable contentyes /> meta nametheme-color content#ffffff /> script srchttps://kit.fontawesome.com/4fb4a946bb.js crossoriginanonymous>/script> !-- Google Analytics --> script async srchttps://www.googletagmanager.com/gtag/js?idG-TXYTF4N0VK>/script> script> window.dataLayer window.dataLayer || ; function gtag(){dataLayer.push(arguments);} gtag(js, new Date()); gtag(config, G-TXYTF4N0VK); /script> link relstylesheet href/dev/assets/css/bootstrap.css> link relstylesheet href/dev/assets/css/app.css> link relstylesheet href/dev/assets/css/style.css> style> /* FONTS - Soehne Family */ @font-face { font-family: soehne-buch; src: url(/dev/assets/css/fonts/soehne-buch.woff2) format(woff2); font-display: swap; } @font-face { font-family: soehne-halbfett; src: url(/dev/assets/css/fonts/soehne-halbfett.woff2) format(woff2); font-display: swap; } @font-face { font-family: soehne-fett; src: url(/dev/assets/css/fonts/soehne-fett.woff2) format(woff2); font-display: swap; } @font-face { font-family: soehne-mono; src: url(/dev/assets/css/fonts/soehne-mono-buch.woff2) format(woff2); font-display: swap; } :root { --slide-height: 100vh; /* Brand Colors */ --primary-color: #2c75de; --primary-color-slt: #e0edff; --primary-color-lt: #66a6ff; --primary-color-dk: #1D4E91; --primary-color-bl: #153869; --accent-color: #69e2e1; --accent-color-lt: #a7fcfc; --accent-color-dk: #459696; --accent-color-bl: #204545; --warn-color: #916df6; --warn-color-slt: #e8dfff; --warn-color-lt: #bca3ff; --warn-color-dk: #634AA8; --warn-color-bl: #332657; --success-color: #5eca44; --success-color-slt: #d2f5c9; --success-color-lt: #7de364; --success-color-dk: #3b7d2a; --success-color-bl: #28541d; --warning-color: #fdab29; --warning-color-lt: #fec366; --warning-color-dk: #e68a6d; --warning-color-bl: #594A23; --danger-color: #590f0f; --danger-color-lt: #a73a54; --danger-color-dk: #400b0b; --danger-color-bl: #260303; --brand-color: #eb5d8f; --brand-color-lt: #ff99bd; --brand-color-dk: #a73a54; --brand-color-bl: #590f0f; --text-dark: #1e2835; --text-theme: rgba(70, 90, 110, 0.85); /* Semantic Color Mapping */ --color-bg: #0d1117; --color-bg-elevated: #161b22; --color-text: #f0f6fc; --color-text-muted: rgba(240, 246, 252, 0.7); --color-text-subtle: rgba(240, 246, 252, 0.5); --color-overlay: rgba(13, 17, 23, 0.9); --color-glass: rgba(44, 117, 222, 0.1); /* Location Colors */ --color-bahrain: #ce1126; --color-hawaii: #2c75de; /* Shadows */ --box-shadow-cont: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3); --box-shadow-cont-small: 0 20px 40px -10px rgba(50,50,93,.25), 0 20px 20px -15px rgba(0,0,0,.5); --box-shadow-cont-hover: 0 50px 100px -20px rgba(50,50,93,0.25), 0 50px 70px -30px rgba(0,0,0,0.3); /* Typography - Soehne */ --font-body: soehne-buch, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; --font-heading: soehne-halbfett, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; --font-bold: soehne-fett, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; --font-mono: soehne-mono, SF Mono, Monaco, Cascadia Code, monospace; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; /* Animation */ --ease-out-expo: cubic-bezier(0.77, 0, 0, 1); --ease-out-back: cubic-bezier(0.77, 0, 0, 1); /* --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); */ --default-easing: cubic-bezier(0.77, 0, 0, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: #f8f9fa; color: var(--text-dark); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* SCROLL PROXY LAYER */ #scroll-proxy { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-y; /* Explicit vertical scroll intent for iOS */ z-index: 15; /* Above visual-layer to receive touch events on iOS */ } .scroll-spacer { width: 100%; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; /* Allow clicks to pass through to buttons below */ } /* VISUAL LAYER */ #visual-layer { position: fixed; inset: 0; pointer-events: none; /* Content display only */ z-index: 10; /* Below scroll-proxy; buttons use pointer-events: auto */ } .slide { position: absolute; inset: 0; width: 100%; height: var(--slide-height); will-change: transform, opacity; overflow: hidden; contain: layout style paint; transform: translate3d(0, 0, 0); } .slide-background { position: absolute; top: -15%; left: -5%; width: 110%; height: 130%; will-change: transform; transform: translate3d(0, 0, 0); } .slide-background img, .slide-background video { width: 100%; height: 100%; object-fit: cover; } /* Light mode: brighten images slightly for better overlay effect */ #slide-mission .slide-background img, #slide-news .slide-background img, #slide-invest .slide-background img, #slide-contact .slide-background img { filter: brightness(1.05) saturate(1.1); } .slide-overlay { position: absolute; inset: 0; pointer-events: none; } /* SLIDE CONTENT LAYOUTS */ .slide-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-lg) var(--space-md); padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); text-align: center; will-change: opacity, transform; transform: translate3d(0, 0, 0); opacity: 0; transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); pointer-events: none; /* Allow scroll through, but children can override */ } .slide.active .slide-content { opacity: 1; } /* Make interactive elements clickable */ .slide-content a, .slide-content button, .slide-content .app-buttons, .slide-content .invest-cta, .slide-content .social-links, .slide-content .contact-block, .slide-content .footer-legal { pointer-events: auto; } /* TYPOGRAPHY */ .font-family-fett { font-family: var(--font-bold); } .display-xl { font-family: var(--font-bold); font-size: clamp(3rem, 10vw, 6rem); font-weight: normal; line-height: 0.95; letter-spacing: -0.03em; color: var(--text-dark); } .display-lg { font-family: var(--font-heading); font-size: clamp(2.25rem, 6vw, 4rem); font-weight: normal; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-dark); } .display-md { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: normal; line-height: 1.15; letter-spacing: -0.01em; } .display-sm { font-family: var(--font-heading); font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: normal; line-height: 1.25; } .text-body { font-family: var(--font-body); font-size: clamp(0.95rem, 2vw, 1.125rem); font-weight: normal; line-height: 1.65; color: var(--text-theme); } .text-caption { font-family: var(--font-bold); font-size: 0.8rem; font-weight: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dark); } .text-mono { font-family: var(--font-mono); font-weight: normal; } .text-gradient { /* background: var(--brand-color); */ background: linear-gradient(to bottom, var(--brand-color) 40%, var(--brand-color-bl) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Reset inherited text-shadow, use filter instead */ text-shadow: none; filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5)); } /* Use background-image (not background shorthand) to preserve background-clip: text */ .text-gradient.text-gradient-primary { background-image: linear-gradient(to bottom, var(--primary-color) 40%, var(--primary-color-bl) 80%); } .text-gradient.text-gradient-success { background-image: linear-gradient(to bottom, var(--success-color) 40%, var(--success-color-bl) 80%); } .text-gradient.text-gradient-warning { background-image: linear-gradient(to bottom, var(--warning-color) 40%, var(--brand-color) 80%); } .text-gradient.text-gradient-warn { background-image: linear-gradient(to bottom, var(--warn-color) 40%, var(--warn-color-bl) 80%); } .text-gradient.text-gradient-accent { background-image: linear-gradient(to bottom, var(--accent-color) 40%, var(--accent-color-dk) 80%); } strong, .font-weight-bold { font-family: var(--font-heading); font-weight: normal; } .font-weight-bolder { font-family: var(--font-bold); font-weight: normal; } .text-brand { color: var(--brand-color); } .text-success { color: var(--success-color); } .text-dark { color: var(--text-dark) !important; } .text-muted { opacity: 0.65; } .text-theme { color: var(--text-theme) !important; } /* SLIDE 1: WELCOME / HERO */ #slide-welcome .slide-overlay { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(235, 93, 143, 0.35) 0%, transparent 60%), radial-gradient(ellipse 20% 10% at 50% calc(100% - 50px), rgba(235, 255, 255, 0.9) 10%, transparent 100%), radial-gradient(ellipse 70% 40% at 50% 50%, rgba(255, 255, 255, .85) 20%, transparent 100%) } /* Slide 1 doesnt need oversized background - parallax only shifts down into off-screen area */ #slide-welcome .slide-background { top: 0; left: 0; width: 100%; height: 100%; } .white-text-shadow, .scroll-indicator { text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(255, 255, 255, 0.4); } /* Strong text shadows for hero content legibility */ #slide-welcome .slide-content { text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(255, 255, 255, 0.4); } #slide-welcome .display-xl { color: var(--text-dark); text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9), 0 4px 16px rgba(255, 255, 255, 0.7), 0 8px 32px rgba(255, 255, 255, 0.5); } .hero-logo { width: clamp(100px, 20vw, 180px); height: auto; margin-bottom: clamp(0.5rem, 2vh, 1.5rem); animation: float 6s ease-in-out infinite; filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.6)); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-tagline { max-width: 600px; margin-bottom: clamp(0.5rem, 3vh, 2rem); margin-top: 1rem; } .text-caption.download-caption { color: var(--brand-color); margin-bottom: 0rem; width: 100%; font-family: var(--font-bold); } .app-buttons { display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 2vw, 1rem); justify-content: center; margin-top: clamp(0.5rem, 2vh, 1.5rem); } .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 1.75rem; font-family: var(--font-heading); font-size: 0.9rem; font-weight: normal; text-decoration: none; border-radius: 100px; transition: all 0.4s var(--ease-out-expo); cursor: pointer; border: none; position: relative; overflow: hidden; min-width: 180px; justify-content: center; } .btn::before { content: ; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; } .btn:hover::before { opacity: 1; } .btn-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dk) 100%); color: var(--color-text); box-shadow: 0 4px 20px rgba(44, 117, 222, 0.4), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(44, 117, 222, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-dark { background: linear-gradient(135deg, #1c1c1e 0%, #000 100%); color: var(--color-text); box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .btn-success { background: linear-gradient(135deg, var(--success-color) 0%, var(--success-color-dk) 100%); color: var(--color-text); box-shadow: 0 4px 20px rgba(94, 202, 68, 0.4); } /* Thick outlined buttons for app stores - dark borders for light mode */ .btn-outline-dark, .btn-outline-success { min-width: 180px; justify-content: center; backdrop-filter: blur(8px); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); } .btn-outline-light { background: rgba(255, 255, 255, 0.6); color: var(--text-dark); border: 4px solid rgba(255,255,255,.5); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .btn-outline-dark { background: rgba(255, 255, 255, 0.6); color: var(--text-dark); border: 2px solid var(--text-dark); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .btn-outline-dark:hover { background: linear-gradient(135deg, #1c1c1e 0%, #000 100%); color: #fff; border-color: #000; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .btn-outline-success { background: rgba(255, 255, 255, 0.6); color: var(--success-color-dk); border: 2px solid var(--success-color-dk); box-shadow: 0 4px 20px rgba(94, 202, 68, 0.15); } .btn-outline-success:hover { background: linear-gradient(135deg, var(--success-color) 0%, var(--success-color-dk) 100%); color: #fff; border-color: var(--success-color); box-shadow: 0 8px 30px rgba(94, 202, 68, 0.4); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .btn-outline { background: rgba(255,255,255,0.05); color: var(--color-text); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); } .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); } .btn i { font-size: 1.25rem; } /* SLIDE 2: MISSION & VISION */ #slide-mission .slide-overlay { background: radial-gradient(ellipse 60% 40% at 20% 80%, rgba(105, 226, 225, 0.2) 0%, transparent 50%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 100%); } #slide-mission .slide-content { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(255, 255, 255, 0.5); } #slide-mission .display-lg, #slide-mission .text-caption { color: var(--text-dark); } #slide-mission .text-body { color: var(--text-theme); } .mission-content { max-width: 900px; display: grid; gap: var(--space-lg); } .mission-header { animation: slideUp 0.8s var(--ease-out-expo) both; } .mission-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .mission-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 4px solid rgba(255, 255, 255, 0.5); border-radius: 24px; padding: var(--space-md); text-align: left; transition: all 0.5s var(--ease-out-expo); animation: cardReveal 0.8s var(--ease-out-expo) both; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .mission-card.mission-card-primary::before { content: ; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%,var(--primary-color) 0%, transparent 80%); opacity: .2; border-radius: 24px; } .mission-card.mission-card-accent::before { content: ; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%,var(--accent-color) 0%, transparent 80%); opacity: .2; border-radius: 24px; } .mission-card.mission-card-warning::before { content: ; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%,var(--warning-color) 0%, transparent 80%); opacity: .2; border-radius: 24px; } .mission-card.mission-card-warn::before { content: ; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%,var(--warn-color) 0%, transparent 80%); opacity: .2; border-radius: 24px; } .mission-card:nth-child(1) { animation-delay: 0.1s; } .mission-card:nth-child(2) { animation-delay: 0.2s; } .mission-card:nth-child(3) { animation-delay: 0.3s; } .mission-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.85); border-color: rgba(44, 117, 222, 0.3); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .mission-card-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dk) 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: var(--space-sm); box-shadow: 0 8px 20px rgba(235, 93, 143, 0.3); } .mission-card h3 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: normal; margin-bottom: var(--space-xs); color: var(--text-dark); text-shadow: none; } .mission-card p { font-family: var(--font-body); font-size: 0.9rem; font-weight: normal; line-height: 1.65; color: var(--text-theme); text-shadow: none; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes cardReveal { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* MOBILE SUB-SLIDES */ #slide-purpose.mobile-slide .slide-content { opacity: 0; transform: translateY(10vh); transition: all 400ms var(--default-easing); } #slide-purpose.mobile-slide.active .slide-content { opacity: 1; transform: translateY(0); } .slide.mobile-slide .slide-content { opacity: 1; } .slide.mobile-slide .slide-content .rbox, .slide.mobile-slide .slide-content .rbox-hero { transform: translateY(10vh); opacity: 0; transition: transform 800ms var(--default-easing), opacity 400ms var(--default-easing); } .slide.mobile-slide.active .slide-content .rbox, .slide.mobile-slide.active .slide-content .rbox-hero { transform: translateY(0); opacity: 1; } .delay-1 { transition-delay: 200ms !important; } #slide-adam .slide-content .rbox { transform: translateY(10vh) rotate(-3.5deg); } #slide-adam.active .slide-content .rbox { transform: translateY(0) rotate(-3.5deg); } #slide-alice .slide-content .rbox { transform: translateY(10vh) rotate(3.5deg); } #slide-alice.active .slide-content .rbox { transform: translateY(0) rotate(3.5deg); } #slide-come-in .img-memories { transform: translateY(10vh); opacity: 0; transition: transform 800ms var(--default-easing), opacity 800ms var(--default-easing); transition-delay: 400ms !important; } #slide-come-in.active .img-memories { transform: translateY(0); opacity: 1; } #slide-alice-reviews .slide-content .rbox { transform: translateY(10vh) rotate(-3.5deg); } #slide-alice-reviews.active .slide-content .rbox { transform: translateY(0) rotate(-3.5deg); } #slide-adam-company .slide-content .rbox { transform: translateY(10vh) rotate(3.5deg); } #slide-adam-company.active .slide-content .rbox { transform: translateY(0) rotate(3.5deg); } /* DESKTOP STORY SLIDES */ .desktop-story { display: flex; justify-content: center; align-items: center; gap: 2rem; width: 100%; max-width: 1400px; padding: 2rem; } .desktop-story-panel { position: relative; flex: 1; max-width: 400px; } .desktop-story-panel img.phone-frame { width: 100%; height: auto; border-radius: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .desktop-story-panel .rbox { position: absolute; width: 90%; left: 5%; } .desktop-story-panel .rbox.top { top: 1rem; } .desktop-story-panel .rbox.bottom { bottom: 1rem; } .desktop-story-title { position: absolute; top: 8vh; left: 0; right: 0; text-align: center; } .desktop-story-title h2 { font-size: 3rem; color: white; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } /* Character cards for desktop */ .desktop-character-cards { display: flex; gap: 3rem; justify-content: center; align-items: flex-start; margin-bottom: 2rem; } .desktop-character-card { background: white; border-radius: 1rem; padding: 1.5rem; max-width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); } .desktop-character-card .rbox-hero { width: 5rem; height: 5rem; margin: 0 auto 1rem; } .desktop-character-card .rbox-hero img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Slide-specific animations */ .slideid^slide-desktop-story .desktop-story-panel { opacity: 0; transform: translateY(30px); transition: all 600ms var(--default-easing); } .slideid^slide-desktop-story.active .desktop-story-panel { opacity: 1; transform: translateY(0); } .slideid^slide-desktop-story .desktop-story-panel:nth-child(2) { transition-delay: 150ms; } .slideid^slide-desktop-story .desktop-story-panel:nth-child(3) { transition-delay: 300ms; } .slideid^slide-desktop-story .desktop-story-title { opacity: 0; transform: translateY(-20px); transition: all 500ms var(--default-easing); } .slideid^slide-desktop-story.active .desktop-story-title { opacity: 1; transform: translateY(0); } .slideid^slide-desktop-story .desktop-character-cards { opacity: 0; transform: translateY(20px); transition: all 500ms var(--default-easing); transition-delay: 400ms; } .slideid^slide-desktop-story.active .desktop-character-cards { opacity: 1; transform: translateY(0); } #slide-characters.slide.mobile-slide .slide-content { padding: calc(8vh + 6rem) 2rem 1rem 1rem; } .slide.mobile-slide .mission-card { background: white; border: none; outline: 4px solid rgba(255,255,255.5); padding: 1rem; } .slide.mobile-slide h2.display-lg.mobile-slide-title { position: absolute; top: calc(8vh + env(safe-area-inset-top)); left: 1rem; font-size: 3.2rem; color: white; text-shadow: none !important; text-align: left; max-width: 70vw; line-height: 3rem; } .slide.mobile-slide .text-caption-lower-mobile { position: absolute; bottom: 1rem; font-size: 0.8rem; text-shadow: none !important; } /* SLIDE 3: NEWS & PROGRESS */ #slide-news .slide-overlay { background: radial-gradient(ellipse 50% 50% at 80% 20%, rgba(44, 117, 222, 0.15) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(206, 17, 38, 0.15) 0%, transparent 50%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 100%); } #slide-news .slide-content { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(255, 255, 255, 0.5); } #slide-news .display-lg, #slide-news .text-caption { color: var(--text-dark); } .news-content { max-width: 1000px; width: 100%; } .location-badges { display: flex; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; } .location-badge { display: flex; align-items: center; gap: var(--space-xs); padding: 0.75rem 1.5rem; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 100px; font-family: var(--font-heading); font-size: 0.85rem; font-weight: normal; color: var(--text-dark); transition: all 0.3s var(--ease-out-expo); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); text-shadow: none; } .location-badge.hawaii { border-color: rgba(44, 117, 222, 0.4); } .location-badge.bahrain { border-color: rgba(206, 17, 38, 0.4); } .location-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; } .location-dot.hawaii { background: var(--primary-color); } .location-dot.bahrain { background: var(--color-bahrain); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); } .stat-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 24px; padding: var(--space-md); text-align: center; transition: all 0.5s var(--ease-out-expo); animation: statReveal 0.8s var(--ease-out-expo) both; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .stat-card:nth-child(1) { animation-delay: 0.1s; } .stat-card:nth-child(2) { animation-delay: 0.2s; } .stat-card:nth-child(3) { animation-delay: 0.3s; } .stat-card:hover { transform: scale(1.02); border-color: rgba(44, 117, 222, 0.3); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .stat-number { font-family: var(--font-mono); font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: normal; background: linear-gradient(135deg, var(--primary-color-dk) 0%, var(--primary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; letter-spacing: -0.02em; } .stat-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: normal; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-theme); margin-top: var(--space-xs); text-shadow: none; } @keyframes statReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .news-ticker { margin-top: var(--space-lg); padding: var(--space-sm) var(--space-md); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(235, 93, 143, 0.3); border-radius: 16px; display: flex; align-items: center; gap: var(--space-sm); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .news-ticker-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-color-dk); white-space: nowrap; text-shadow: none; } .news-ticker-text { font-family: var(--font-body); font-size: 0.875rem; font-weight: normal; color: var(--text-theme); text-shadow: none; } /* SLIDE 4: INVEST / WEFUNDER */ #slide-invest .slide-overlay { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(145, 109, 246, 0.15) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 100%); } #slide-invest .slide-content { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(255, 255, 255, 0.5); } #slide-invest .display-lg { color: var(--text-dark); } #slide-invest .text-body { color: var(--text-theme); } .invest-content { max-width: 700px; } .invest-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(145, 109, 246, 0.4); border-radius: 100px; font-family: var(--font-heading); font-size: 0.7rem; font-weight: normal; letter-spacing: 0.15em; text-transform: uppercase; color: var(--warn-color-dk); margin-bottom: var(--space-md); animation: badgePulse 3s ease-in-out infinite; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); text-shadow: none; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(145, 109, 246, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(145, 109, 246, 0); } } .invest-badge i { color: var(--warn-color); } .invest-highlight { font-family: var(--font-body); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: normal; font-style: italic; color: var(--primary-color-dk); margin: var(--space-md) 0; line-height: 1.5; text-shadow: none; } .invest-cta { margin-top: var(--space-lg); } .btn-invest { background: linear-gradient(135deg, var(--warn-color) 0%, var(--warn-color-dk) 100%); color: #fff; font-family: var(--font-heading); font-size: 0.95rem; padding: 1.25rem 2.5rem; box-shadow: 0 8px 30px rgba(145, 109, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.3); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .btn-invest:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(145, 109, 246, 0.5), inset 0 1px 0 rgba(255,255,255,0.3); } /* SLIDE 5: CONTACT & FOOTER */ #slide-contact .slide-overlay { background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(235, 93, 143, 0.2) 0%, transparent 50%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%); } #slide-contact .slide-content { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(255, 255, 255, 0.5); } #slide-contact .display-lg, #slide-contact .text-caption { color: var(--text-dark); } #slide-contact .text-body { color: var(--text-theme); } .contact-content { max-width: 800px; width: 100%; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); text-align: left; } .contact-block h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: normal; margin-bottom: var(--space-sm); color: var(--text-dark); text-shadow: none; } .contact-block a { display: block; font-family: var(--font-body); color: var(--text-theme); text-decoration: none; font-size: 0.9rem; font-weight: normal; padding: 0.25rem 0; transition: color 0.3s; text-shadow: none; } .contact-block a:hover { color: var(--brand-color); } .social-links { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); justify-content: center; } .social-link { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; color: var(--text-dark); font-size: 1.25rem; transition: all 0.3s var(--ease-out-expo); text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .social-link:hover { background: var(--brand-color); border-color: var(--brand-color); color: #fff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(235, 93, 143, 0.3); } .footer-legal { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(0, 0, 0, 0.1); font-family: var(--font-body); font-size: 0.8rem; font-weight: normal; color: var(--text-theme); text-shadow: none; } .footer-legal a { font-family: var(--font-body); color: var(--text-theme); text-decoration: none; font-weight: normal; transition: color 0.3s; } .footer-legal a:hover { color: var(--brand-color); } .footer-links { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-sm); } /* PROGRESS DOTS */ .progress-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 100; pointer-events: auto; } .progress-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.4s var(--ease-out-expo); } .progress-dot:hover { background: rgba(0, 0, 0, 0.4); transform: scale(1.2); } .progress-dot.active { background: var(--brand-color); border-color: var(--brand-color-dk); transform: scale(1.3); box-shadow: 0 0 15px rgba(235, 93, 143, 0.4); } /* SCROLL INDICATOR */ .scroll-indicator { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 1; transition: opacity 0.5s; pointer-events: none; } .scroll-indicator.hidden { opacity: 0; } .scroll-indicator-text { font-family: var(--font-heading); font-size: 0.65rem; font-weight: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-theme); } .scroll-indicator-icon { width: 24px; height: 40px; border: 2px solid var(--text-theme); border-radius: 12px; position: relative; } .scroll-indicator-icon::after { content: ; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--brand-color); border-radius: 2px; animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(10px); opacity: 0.3; } } /* NOISE OVERLAY */ .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0.03; background-image: url(data:image/svg+xml,%3Csvg viewBox0 0 400 400 xmlnshttp://www.w3.org/2000/svg%3E%3Cfilter idnoiseFilter%3E%3CfeTurbulence typefractalNoise baseFrequency0.9 numOctaves4 stitchTilesstitch/%3E%3C/filter%3E%3Crect width100%25 height100%25 filterurl(%23noiseFilter)/%3E%3C/svg%3E); } /* RESPONSIVE ADJUSTMENTS */ @media (max-width: 768px) { .progress-dots { right: 12px; } .slide-content { padding: var(--space-sm); padding-bottom: 1rem; justify-content: center; } /* Tighter spacing on mobile for hero */ #slide-welcome .slide-content { gap: 0; padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); } .hero-logo { margin-bottom: 0.5rem; } .hero-tagline { margin-bottom: 0.5rem; } .hero-tagline .text-caption { margin-bottom: 0.25rem !important; } .hero-tagline .text-body { font-size: 0.9rem; line-height: 1.5; } .app-buttons { margin-top: 0.5rem; gap: 0.5rem; } .mission-cards, .contact-grid { grid-template-columns: 1fr; } .app-buttons { flex-direction: column; width: 100%; max-width: 280px; } .btn { width: 100%; justify-content: center; padding: 0.875rem 1.5rem; } /* NEWS SLIDE - MOBILE */ #slide-news .slide-content { padding: var(--space-sm); justify-content: center; } #slide-news .news-content { max-width: 100%; } #slide-news .display-lg { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 0.5rem; } #slide-news .text-caption { font-size: 0.7rem; margin-bottom: 0.25rem; } .location-badges { flex-direction: row; gap: var(--space-xs); margin-bottom: var(--space-sm); } .location-badge { padding: 0.4rem 0.75rem; font-size: 0.7rem; } .location-dot { width: 6px; height: 6px; } #slide-news .stats-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); margin-top: var(--space-sm); } #slide-news .stat-card { padding: var(--space-sm) var(--space-xs); border-radius: 16px; } #slide-news .stat-number { font-size: clamp(1.5rem, 5vw, 2rem); } #slide-news .stat-label { font-size: 0.6rem; letter-spacing: 0.1em; } #slide-news .news-ticker { margin-top: var(--space-sm); padding: 0.5rem 0.75rem; border-radius: 12px; flex-direction: column; gap: 0.25rem; text-align: center; } #slide-news .news-ticker-label { font-size: 0.6rem; } #slide-news .news-ticker-text { font-size: 0.75rem; line-height: 1.4; } /* CONTACT SLIDE - MOBILE */ #slide-contact .slide-content { padding: var(--space-sm); justify-content: center; } #slide-contact .contact-content { max-width: 100%; } #slide-contact .display-lg { font-size: clamp(1.5rem, 5vw, 2rem); margin-top: 0.25rem; } #slide-contact .text-caption { font-size: 0.7rem; } #slide-contact .text-body { font-size: 0.85rem; margin-bottom: 0; } #slide-contact .contact-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); margin-top: var(--space-sm); text-align: center; } #slide-contact .contact-block h4 { font-size: 0.75rem; margin-bottom: 0.25rem; letter-spacing: 0.05em; text-transform: uppercase; } #slide-contact .contact-block a { font-size: 0.7rem; padding: 0.15rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #slide-contact .social-links { margin-top: var(--space-sm); gap: 0.5rem; } #slide-contact .social-link { width: 40px; height: 40px; font-size: 1rem; } #slide-contact .footer-legal { margin-top: var(--space-sm); padding-top: var(--space-sm); } #slide-contact .footer-links { gap: var(--space-sm); margin-bottom: 0.25rem; } #slide-contact .footer-legal p { font-size: 0.7rem; } .display-xl { font-size: clamp(2.5rem, 12vw, 4rem); margin-bottom: 0.5rem; } } /* Even smaller screens */ @media (max-width: 380px) { .hero-logo { width: 80px; } .display-xl { font-size: 2.25rem; } .hero-tagline .text-body { font-size: 0.85rem; } } /* MOBILE INDIVIDUAL SLIDES */ /* Mobile slides use same overlay as mission slide */ #slide-purpose .slide-overlay, #slide-our-mission .slide-overlay, #slide-vision .slide-overlay, #slide-seekers .slide-overlay, #slide-keepers .slide-overlay { background: radial-gradient(ellipse 60% 40% at 20% 80%, rgba(105, 226, 225, 0.2) 0%, transparent 50%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 100%); } #slide-purpose .slide-content, #slide-our-mission .slide-content, #slide-vision .slide-content, #slide-seekers .slide-content, #slide-keepers .slide-content { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(255, 255, 255, 0.5); } .mobile-slide .slide-content { max-width: 400px; margin: 0 auto; } .mobile-slide .display-md { margin-bottom: var(--space-sm); } .mobile-slide .text-body { font-size: clamp(0.95rem, 2.5vw, 1.125rem); line-height: 1.65; max-width: 320px; margin: 0 auto; } /* Landscape mobile - reduce vertical spacing */ @media (max-height: 500px) { .hero-logo { width: 60px; margin-bottom: 0.25rem; } .display-xl { font-size: 2rem; margin-bottom: 0.25rem; } .hero-tagline { margin-bottom: 0.25rem; } .hero-tagline .text-caption { display: none; } .hero-tagline .text-body { font-size: 0.8rem; } .app-buttons { flex-direction: row; margin-top: 0.25rem; } .btn { padding: 0.5rem 1rem; font-size: 0.8rem; } .scroll-indicator { display: none; } } #gradient-canvas { --gradient-color-1: #2c75de; --gradient-color-2: #eb5d8f; --gradient-color-3: #69e2e1; --gradient-color-4: #153869; position: absolute; top: calc(0% - env(safe-area-inset-top)); left: 0; width: 100vw; height: calc(63vh + env(safe-area-inset-top)); clip-path: ellipse(70% 75% at 50% 0%); z-index: -1; transition: all 400ms cubic-bezier(0.77, 0, 0, 1); } #gradient-canvas.inactive { top: -100%; } /style> script src/dev/js/Gradient.js >/script>/head>body> !-- Gradient Canvas --> canvas idgradient-canvas>/canvas> !-- Noise texture overlay --> div classnoise-overlay>/div> !-- Scroll Proxy --> div idscroll-proxy>/div> !-- Visual Layer --> div idvisual-layer>/div> !-- Progress Dots --> div classprogress-dots idprogress>/div> !-- Scroll Indicator --> div classscroll-indicator idscroll-indicator> span classscroll-indicator-text>Scroll/span> div classscroll-indicator-icon>/div> /div> script> ///////////////////////// // SET GRADIENT var gradient new Gradient(); gradient.initGradient(#gradient-canvas); // // CONFIGURATION // const CONFIG { slideCompression: 1, parallaxRate: 0.4, slideFade: 0.3, renderDistance: 1.5, velocityThreshold: 5, settledFrames: 15, titleFadeSpeed: 0.6, titleSlideDistance: 40, mobileBreakpoint: 768, }; // // MOBILE DETECTION // let isMobile window.innerWidth CONFIG.mobileBreakpoint; function checkMobile() { const wasMobile isMobile; isMobile window.innerWidth CONFIG.mobileBreakpoint; if (wasMobile ! isMobile) { // Rebuild on breakpoint change location.reload(); } } // // SLIDE DATA // const allSlides { id: slide-welcome, type: video, src: https://cdn.redtulip.io/assets/Logo_Portrait.mp4, srcLandscape: https://cdn.redtulip.io/assets/Logo_Landscape.mp4, content: ` img srcimages/RedTulip-iOS-Default-512x512@1x.png altRedTulip classhero-logo> h1 classdisplay-xl>span classtext-gradient>Red/span>Tulip/h1> div classhero-tagline> p classtext-caption stylemargin-bottom: 0.5rem;>Decentralized Marketplace for Tourism/p> p classtext-body text-dark>Connecting travelers with the people who make places worth visiting: the guides, artisans, storytellers, and hosts whose knowledge rarely reaches a search engine./p> /div> div classapp-buttons> p classtext-caption download-caption>Download Now!/p> a hrefhttps://apps.apple.com/us/app/redtulip/id6745103711 target_blank classbtn btn-outline-light> i classfa-brands fa-apple>/i> span>App Store/span> /a> a hrefhttps://play.google.com/store/apps/details?idio.redtulip target_blank classbtn btn-outline-light> i classfa-brands fa-google-play text-success>/i> span>Google Play/span> /a> /div> ` }, // Desktop: full mission slide with all cards { id: slide-mission, type: image, src: null, desktopOnly: true, content: ` div classmission-content> div classmission-header> p classtext-caption>Our Purpose/p> h2 classdisplay-lg stylemargin-top: 0.5rem;>Empower the span classtext-gradient>Undiscovered/span>/h2> p classtext-body text-dark stylemax-width: 600px; margin: 0.5rem auto 0;> RedTulip helps locals turn what they know and love into income. We help travelers find what they couldnt have Googled. Every booking keeps a tradition alive and puts money directly into the hands of the community. /p> /div> div classmission-cards> div classmission-card mission-card-primary> h3 classdisplay-md>Our span classtext-gradient text-gradient-primary>Mission/span>/h3> p>To build the trusted platform where anyone can safely share what makes their corner of the world special, and get paid fairly for it. Were proving that local tourism economies thrive when locals own the supply side./p> /div> div classmission-card mission-card-accent> h3 classdisplay-md>Our span classtext-gradient text-gradient-accent>Vision/span>/h3> p>Travel that uplifts, not extracts./p> p>A future where the next generation inherits living traditions, not just destinations, thriving in the digital economy./p> /div> div classmission-card mission-card-warning> h3 classdisplay-md>For span classtext-gradient text-gradient-warning>Travelers/span>span classtext-muted> (Seekers)/span>/h3> p>Discover experiences you wont find on mainstream platforms: home-cooked meals, hidden trails, craft workshops, neighborhood walking tours. Book directly. Travel responsibly. Leave with stories, not just photos./p> /div> div classmission-card mission-card-warn> h3 classdisplay-md>For span classtext-gradient text-gradient-warn>Locals/span>span classtext-muted> (Keepers)/span>/h3> p>List your skills, spaces, or knowledge in minutes. Set your own prices. Get paid on your terms. Whether its a fishing lesson or a pottery class, RedTulip handles the trust and transactions; you bring what makes your place home./p> /div> /div> /div> ` }, // Desktop: Story 1 - Meet the Characters (Adam & Alice intro + their details) { id: slide-desktop-story-1, type: transparent, desktopOnly: true, content: ` img src/dev/images/what-is-redtulip/people-connecting-people.png alt styleheight: 20vh; position: fixed; top: 2vh; left: 50%; transform: translateX(-50%); z-index: 10;> div classcontainer p-0 text-left> div classrow> div classcol-5> div classrbox-hero stylewidth: 7rem; height: 7rem; z-index: 10;> img src/dev/images/what-is-redtulip/Adam-Profile.jpg classw-100 alt> /div> div classrbox with-hero p-4 stylemargin-top: -4.5rem; > div classpb-4 stylepadding-left: calc(7rem + 14px);> h3 classmb-0 text-primary-dk no-text-transform styleline-height: 0.75; >This is Adam,br>span classtext-primary text>hes a RedTulip Keeper/span>/h3> /div> div classrbox-body pb-0> h5 classtext mb-0>span classtext-primary>Hes a local/span> that lives in a little house by the ocean on a beautiful island. Adam surfs at sunrise, drinks fresh coconut milk, fishes & rides his bicycle./h5> /div> /div> /div> div classcol-2>/div> div classcol-5> div classrbox-hero delay-1 stylewidth: 7rem; height: 7rem; margin: 0 1rem 0 auto; z-index: 10;> img src/dev/images/what-is-redtulip/Alice-Profile.jpg classw-100 alt> /div> div classrbox with-hero delay-1 p-4 stylemargin-top: -4.5rem;> div classpb-4 stylepadding-right: calc(7rem + 14px); padding-left: 0;> h3 classmb-0 text-brand-dk no-text-transform text-right styleline-height: 0.75;>And this is Alice,br>span classtext-brand text>shes a RedTulip Seeker/span>/h3> /div> div classrbox-body pb-0> h5 classtext mb-2>span class_600 text-brand>Shes a traveler/span> that lives in a big city filled with lights, trains & tall buildings. Alice needs a break from the bustle - but doesnt know where to go or what to do./h5> /div> /div> /div> /div> div classrow styleheight: 45vh;> div classcol-6> div style position: relative; transform: rotate(-3.5deg); z-index: -10; left: 0; top: 0; > img src/dev/images/what-is-redtulip/Adam-1.png alt class style position: absolute; height: 95vh; top: -40vh; left: -10vw; > div classrbox style position: absolute; top: 20vh; right: 9rem; width: 330px; > div classrbox-header bg-primary> h5 classtext-white text no-text-transform mb-3>Adam has all the ingredients for magic - his culture, his coast, his way of life./h5> h5 classtext-white text no-text-transform>He has time to spare... but no idea the world might want what he has to share./h5> /div> /div> /div> /div> div classcol-6> div style position: relative; transform: rotate(3.5deg); z-index: -10; right: 0; top: 0; > img src/dev/images/what-is-redtulip/Alice-1.png alt class style position: absolute; height: 95vh; top: -40vh; right: -10vw; > div classrbox styleposition: absolute; top: 20vh; width: 330px; left: 9rem; > div classrbox-header bg-brand> h5 classtext-white text no-text-transform mb-3>Alice wants more than just another trip. She wants a story worth telling./h5> h5 classtext-white text no-text-transform>But all she finds are hotels, crowds, and empty experiences./h5> /div> /div> /div> /div> /div> /div> ` }, // Desktop: Story 2 - The Problem (Tourism is transactional) { id: slide-desktop-story-2, type: transparent, desktopOnly: true, content: ` div classcontainer p-0 text-left> img src/dev/images/what-is-redtulip/Adam-2.png altAdam wondering style position: absolute; height: 70vh; top: 50%; left: calc(50% - (420px * .65)); transform: translate(-50%, -50%) rotate(-3.5deg); > div classrbox style z-index: 10; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); width: 420px; > div classrbox-header bg-accent padding text-center> h5 classtext-white text no-text-transform mb-0>Tourism has become a/h5> img src/dev/images/what-is-redtulip/transaction.png altTransaction stylewidth: 80%; margin: .5rem auto 1rem auto;> h5 classtext-white text no-text-transform mb-0>Tourists visit, but never truly connect.../h5> /div> /div> img src/dev/images/what-is-redtulip/Alice-2.png altAlice disappointed style position: absolute; height: 70vh; top: 50%; right: calc(50% - (420px * .65)); transform: translate(50%, -50%) rotate(3.5deg); z-index: -10; > /div> ` }, // Desktop: Story 3 - The Solution (RedTulip connects) { id: slide-desktop-story-3, type: transparent, desktopOnly: true, content: ` div classcontainer p-0 style position: absolute; height: 100vh; width: 100vw; display: flex; align-items: flex-end; margin-top: 10vh; > img src/dev/images/what-is-redtulip/Frame3.jpg alt classshadow-cont-small style position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 50vh; border-radius: 20px; outline: 4px solid rgba(255,255,255,0.5); z-index:10; > div classrbox shadow-cont-small style position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + (50% * 0.5))); width: 390px; padding: 1rem; z-index: 10; height: 175px; > div classrbox-header text-center> h5 classno-text-transform mb-0 font-weight-bolder stylefont-size: 2rem;>span classtext-gradient>Red/span>Tulip connects/h5> h5 classtext no-text-transform mb-3>people to people, instantly!/h5> h5 classtext no-text-transform mb-0>A Seeker finds a Keeper, traditions and culture are shared, and a trip is transformed!/h5> /div> /div> img src/images/RedTulip-iOS-Default-512x512@1x.png style width: 140px; margin: 0 auto; position: absolute; top: 45vh; left: 50%; transform: translate(-50%, -80%); filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); z-index: 10; > div style position: absolute; height: 10vh; width: 100%; top: 50vh; > div classshadow-cont-small style position: absolute; height: 31vh; background: url(/dev/images/what-is-redtulip/Frame4b.png) no-repeat center center; background-size: cover; aspect-ratio: 3/4; top: 10vh; left: calc(50% - (.5 * 390px) - (31vh * 3 / 4 * .45)); border-radius: 20px; outline: 4px solid rgba(255,255,255,0.5); z-index: 1; transform:translate(-50%, -50%) rotate(-3.5deg); > /div> div classshadow-cont-small style position: absolute; height: 23vh; background: url(/dev/images/what-is-redtulip/Frame4a.png) no-repeat center center; background-size: cover; aspect-ratio: 4/3; top: calc(175px - 6rem); left: calc(50% - 97.5px); border-radius: 20px; outline: 4px solid rgba(255,255,255,0.5); z-index: 2; transform: rotate(-10.5deg) translate(-50%, 0%); > /div> div classshadow-cont-small style position: absolute; height: 26vh; background: url(/dev/images/what-is-redtulip/Frame4d.png) no-repeat center center; background-size: cover; aspect-ratio: 4/3; top: calc(175px - 2rem); left: calc(50% + 117.5px); border-radius: 20px; outline: 4px solid rgba(255,255,255,0.5); z-index: 1; transform: rotate(14deg) translate(-50%, 0%); > /div> div classshadow-cont-small style position: absolute; height: 30vh; background: url(/dev/images/what-is-redtulip/Frame4e.png) no-repeat center center; background-size: cover; aspect-ratio: 3/4; top: 7vh; left: calc(50% + (390px * .5) + (30vh * 3 / 4 * .35)); border-radius: 20px; outline: 4px solid rgba(255,255,255,0.5); z-index: 0; transform: rotate(6.5deg) translate(-50%, -50%); > /div> /div> /div> ` }, // Desktop: Story 4 - The Outcome (Alice reviews + Adam succeeds) { id: slide-desktop-story-4, type: transparent, desktopOnly: true, content: ` div classcontainer p-0> img src/dev/images/what-is-redtulip/Alice-3.png alt style position: absolute; left: 35%; top: 50%; transform: rotate(-3.5deg) translate(-50%, -50%); height: 80vh; > div classrbox style position: absolute; top: 27%; left: 45%; width: 330px; transform: translate(-50%, -50%) rotate(-3.5deg); z-index: 10; > div classrbox-header bg-brand> h5 classtext-white text no-text-transform mb-3>Alice gets the authentic experience of a lifetime, leaves her glowing review/h5> h5 classtext-white text no-text-transform>- and wonders where else RedTulip could take her next!/h5> /div> /div> img src/dev/images/what-is-redtulip/Adam-3.png alt style position: absolute; right: 36%; top: 50%; transform: rotate(3.5deg) translate(50%, -50%); width: 40vw; > div classrbox style position: absolute; top: 70%; left: 67%; width: 330px; transform: translate(-50%, -50%) rotate(3.5deg); z-index: 10; > div classrbox-header bg-primary> h5 classtext-white text no-text-transform mb-3>Adam starts his own tourism company, finding pride in sharing his world./h5> h5 classtext-white text no-text-transform>Excited for every booking, he discovers a creativity blooming inside of him./h5> /div> /div> /div> ` }, // Mobile: Our Purpose { id: slide-purpose, type: image, src: /images/home-hi/hi-2.jpg, mobileOnly: true, content: ` p classtext-caption>Our Purpose/p> h2 classdisplay-lg stylemargin-top: 0.5rem;>Empower the span classtext-gradient>Undiscovered/span>/h2> p classtext-body text-dark stylemax-width: 320px; margin: 0.5rem auto 0;> RedTulip helps locals turn what they know and love into income. We help travelers find what they couldnt have Googled. Every booking keeps a tradition alive and puts money directly into the hands of the community. /p> p classtext-caption text-caption-lower-mobile> i classfa-solid fa-arrow-down fa-2x text-theme text-muted fa-bounce styledisplay: block;>/i> Lets Meet the Main Characters /p> ` }, // Mobile: Meet our characters { id: slide-characters, type: transparent, mobileOnly: true, content: ` h2 classdisplay-lg mobile-slide-title>Meet our characters/h2> div classcontainer p-0 text-left> div classrbox-hero stylewidth: 6rem; height: 6rem; z-index: 10;> img src/dev/images/what-is-redtulip/Adam-Profile.jpg classw-100 alt> /div> div classrbox with-hero mb-4 stylemargin-top: -4.5rem;> div classrbox-header stylepadding-left: calc(7rem + 14px);> h3 classmb-0 text-primary-dk no-text-transform styleline-height: 0.75; >This is Adam,br>span classtext-primary text>hes a RedTulip Keeper/span>/h3> /div> div classrbox-body padding pb-0> h5 classtext mb-2>span class_600 text-primary>Hes a local/span> that lives in a little house by the ocean on a beautiful island./h5> p class>Adam surfs at sunrise, drinks fresh coconut milk, fishes & rides his bicycle./p> /div> /div> div classrbox-hero delay-1 stylewidth: 6rem; height: 6rem; margin: 0 1rem 0 auto; z-index: 10;> img src/dev/images/what-is-redtulip/Alice-Profile.jpg classw-100 alt> /div> div classrbox with-hero delay-1 stylemargin-top: -4.5rem;> div classrbox-header stylepadding-left: 1rem;> h3 classmb-0 text-brand-dk no-text-transform styleline-height: 0.75;>And this is Alice,br>span classtext-brand text>shes a RedTulip Seeker/span>/h3> /div> div classrbox-body padding pb-0> h5 classtext mb-2>span class_600 text-brand>Shes a traveler/span> that lives in a big city filled with lights, trains & tall buildings./h5> p class>Alice needs a break from the bustle - but doesnt know where to go or what to do./p> /div> /div> /div> ` }, // Mobile: Adam details { id: slide-adam, type: transparent, mobileOnly: true, content: ` div styleposition: relative;> img src/dev/images/what-is-redtulip/Adam-1.png alt classw-100 style position: relative; left: -20vw; transform: rotate(-3.5deg); top: 0;> div classrbox styleposition: absolute; top: 8rem;> div classrbox-header bg-primary> h5 classtext-white text no-text-transform mb-3>Adam has all the ingredients for magic - his culture, his coast, his way of life./h5> h5 classtext-white text no-text-transform>He has time to spare... but no idea the world might want what he has to share./h5> /div> /div> /div> ` }, // Mobile: Alice details { id: slide-alice, type: transparent, mobileOnly: true, content: ` div styleposition: relative;> img src/dev/images/what-is-redtulip/Alice-1.png alt classw-100 style position: relative; right: -20vw; transform: rotate(3.5deg); top:0;> div classrbox styleposition: absolute; top: 8rem;> div classrbox-header bg-brand> h5 classtext-white text no-text-transform mb-3>Alice wants more than just another trip. She wants a story worth telling./h5> h5 classtext-white text no-text-transform>But all she finds are hotels, crowds, and empty experiences./h5> /div> /div> /div> ` }, // Mobile: Travel is transactional { id: slide-transactional, type: transparent, mobileOnly: true, content: ` div styleposition: relative; height: 100%; width: 100%;> img src/dev/images/what-is-redtulip/Adam-2.png alt style width: 70%; position: absolute; left: -16vw; transform: rotate(-3.5deg); top: calc(15vh + env(safe-area-inset-top));> img src/dev/images/what-is-redtulip/Alice-2.png alt style width: 70%; position: absolute; right: -16vw; transform: rotate(3.5deg); top: calc(15vh + env(safe-area-inset-top));> div classrbox styleposition: absolute; top: calc(15vh + env(safe-area-inset-top));> div classrbox-header bg-accent padding text-center> h5 classtext-white text no-text-transform mb-0>Tourism has become a/h5> img src/dev/images/what-is-redtulip/transaction.png alt stylewidth: 80%;> h5 classtext-white text no-text-transform mb-0 mt-3>Tourists visit - but never truly connect.../h5> /div> /div> /div> ` }, // Mobile: This is where we come in { id: slide-come-in, type: transparent, mobileOnly: true, content: ` div styleposition: relative; margin-left: -1rem; margin-right: -1rem; margin-top: calc(-1 * env(safe-area-inset-top));> img src/dev/images/what-is-redtulip/we-come-in.png alt style width: 100%; position: relative; z-index:10;> div classrbox p-relative shadow-cont-small style margin-left: 4rem; width: calc(100% - 8rem); position: relative; top: -6rem; padding-top: 5rem; z-index: 5;> div classrbox-header text-center> h5 classtext-lg no-text-transform mb-0 font-weight-bolder>span classtext-brand>RedTulip/span> connects/h5> h5 classtext no-text-transform mb-3>people to people, instantly!/h5> h5 classtext no-text-transform mb-0>A Seeker finds a Keeper, traditions and culture are shared, and a trip is transformed!/h5> /div> /div> img classimg-memories src/dev/images/what-is-redtulip/memories.png alt stylewidth: 100%; position: absolute; left: 0; top: 27rem; z-index: 1;> /div> ` }, // Mobile: Alice reviews { id: slide-alice-reviews, type: transparent, mobileOnly: true, content: ` div styleposition: relative;> img src/dev/images/what-is-redtulip/Alice-3.png alt classw-100 style position: relative; left: -20vw; transform: rotate(-3.5deg); top: 0;> div classrbox styleposition: absolute; top: 8rem;> div classrbox-header bg-brand> h5 classtext-white text no-text-transform mb-3>Alice gets the authentic experience of a lifetime, leaves her glowing review/h5> h5 classtext-white text no-text-transform>- and wonders where else RedTulip could take her next!/h5> /div> /div> /div> ` }, // Mobile: Adam company { id: slide-adam-company, type: transparent, mobileOnly: true, content: ` div styleposition: relative; height: 100%; width: 100%;> img src/dev/images/what-is-redtulip/Adam-3.png alt class style position: relative; right: 45vw; transform: rotate(3.5deg); width: 150vw; top: 10vh;> div classrbox styleposition: absolute; top: 56vh;> div classrbox-header bg-primary> h5 classtext-white text no-text-transform mb-3>Adam starts his own tourism company, finding pride in sharing his world./h5> h5 classtext-white text no-text-transform>Excited for every booking, he discovers a creativity blooming inside of him./h5> /div> /div> /div> ` }, // Mobile: Our Mission { id: slide-our-mission, type: transparent, mobileOnly: true, content: ` div classmission-content> div classmission-cards> div classmission-card mission-card-primary> h2 classdisplay-md>Our span classtext-gradient text-gradient-primary>Mission/span>/h2> p classtext-body stylemax-width: 320px;>To build the trusted platform where anyone can safely share what makes their corner of the world special, and get paid fairly for it. Were proving that local tourism economies thrive when locals own the supply side./p> /div> div classmission-card mission-card-accent> h2 classdisplay-md>Our span classtext-gradient text-gradient-accent>Vision/span>/h2> p classtext-body stylemax-width: 320px; margin: 0.5rem auto 0;>Travel that uplifts, not extracts./p> p classtext-body stylemax-width: 320px; margin: 0.5rem auto 0;>A future where the next generation inherits living traditions, not just destinations, thriving in the digital economy./p> /div> /div> /div> ` }, { id: slide-news, type: image, src: images/Earth-optimized.jpg, content: ` div classnews-content> p classtext-caption>Platform Growth/p> h2 classdisplay-lg stylemargin-top: 0.5rem;>Building span classtext-gradient>Momentum/span>/h2> div classlocation-badges> div classlocation-badge hawaii> span classlocation-dot hawaii>/span> span>Onboarding in Hawaii/span> /div> div classlocation-badge bahrain> span classlocation-dot bahrain>/span> span>Live in Bahrain/span> /div> /div> div classstats-grid> div classstat-card> div classstat-number data-target3713>0/div> div classstat-label>Visitors/div> /div> div classstat-card> div classstat-number data-target286>0/div> div classstat-label>Keepers/div> /div> div classstat-card> div classstat-number data-target188>0/div> div classstat-label>Listings/div> /div> /div> div classnews-ticker> span classnews-ticker-label>i classfa-solid fa-circle-info>/i> Bahrain/span> span classnews-ticker-text>Marketing to begin to Seekers soon!/span> /div> div classnews-ticker mt-2> span classnews-ticker-label>i classfa-solid fa-circle-info>/i> Hawaii/span> span classnews-ticker-text>Onboarding Keepers in Hawaii!/span> /div> /div> ` }, { id: slide-invest, type: image, src: /images/home-hi/hi-4.jpg, content: ` div classinvest-content> div classinvest-badge> i classfa-solid fa-chart-line>/i> span>Now Funding/span> /div> h2 classdisplay-lg>Invest in span classfont-family-fett>span classtext-gradient>Red/span>Tulip/span>/h2> p classinvest-highlight>Join us in democratizing tourism and empowering local communities worldwide./p> p classtext-body> Our WeFunder campaign is live. Be part of a movement that connects travelers with authentic local experiences while creating sustainable income for communities. /p> div classinvest-cta> a hrefhttps://wefunder.com/redtulip/ target_blank classbtn btn-invest> i classfa-solid fa-arrow-up-right-from-square>/i> span>View on WeFunder/span> /a> /div> /div> ` }, { id: slide-contact, type: image, src: /images/home-hi/hi-6.jpg, content: ` div classcontact-content> p classtext-caption>Get In Touch/p> h2 classdisplay-lg stylemargin-top: 0.5rem;>Lets span classtext-gradient>Connect/span>/h2> p classtext-body>Have questions or want to partner with us? Wed love to hear from you./p> div classcontact-grid> div classcontact-block> h4>Company/h4> a hrefhttps://redtulip.io/dev/About/>About Us/a> a hrefhttps://wefunder.com/redtulip/>Investors/a> a hrefmailto:hello@redtulip.io>hello@redtulip.io/a> /div> div classcontact-block> h4>Support/h4> a hrefhttps://redtulip.io/dev/Help/>Help Center/a> a hrefhttps://redtulip.io/index2.php?reset1>Become a Keeper/a> a hrefmailto:dev@redtulip.io>support@redtulip.io/a> /div> div classcontact-block> h4>Legal/h4> a hrefhttps://redtulip.io/dev/Terms/>Terms of Service/a> a hrefhttps://redtulip.io/dev/Privacy/>Privacy Policy/a> /div> /div> div classsocial-links> a hrefhttps://instagram.com/redtulipofficial target_blank classsocial-link aria-labelInstagram> i classfa-brands fa-instagram>/i> /a> a hrefhttps://www.facebook.com/profile.php?id61578259504055 target_blank classsocial-link aria-labelFacebook> i classfa-brands fa-facebook-f>/i> /a> a hrefhttps://www.tiktok.com/@redtulipofficial target_blank classsocial-link aria-labelTikTok> i classfa-brands fa-tiktok>/i> /a> a hrefhttps://www.linkedin.com/company/redtulipai target_blank classsocial-link aria-labelLinkedIn> i classfa-brands fa-linkedin-in>/i> /a> /div> div classfooter-legal> div classfooter-links> a hrefhttps://redtulip.io/dev/Terms/>Terms/a> a hrefhttps://redtulip.io/dev/Privacy/>Privacy/a> a href#>Cookies/a> /div> p>© 2024 RedTulip.io. All rights reserved./p> /div> /div> ` } ; // Filter slides based on device const slides allSlides.filter(slide > { if (slide.desktopOnly && isMobile) return false; if (slide.mobileOnly && !isMobile) return false; return true; }); // // DOM SETUP // const scrollProxy document.getElementById(scroll-proxy); const visualLayer document.getElementById(visual-layer); const progressContainer document.getElementById(progress); const scrollIndicator document.getElementById(scroll-indicator); const root document.documentElement; // // SCROLL POSITION MAPPING // // Simple 1:1 mapping - each slide is one scroll position const totalScrollPositions slides.length; // Build scroll spacers based on total positions function buildSpacers() { scrollProxy.innerHTML ; for (let i 0; i totalScrollPositions; i++) { const spacer document.createElement(div); spacer.className scroll-spacer; spacer.dataset.position i; scrollProxy.appendChild(spacer); } } buildSpacers(); // Cached slide height let cachedSlideHeight window.innerHeight; function updateSlideHeight() { const spacer document.querySelector(.scroll-spacer); cachedSlideHeight spacer ? spacer.offsetHeight : window.innerHeight; root.style.setProperty(--slide-height, cachedSlideHeight + px); } let resizeTimeout; window.addEventListener(resize, () > { clearTimeout(resizeTimeout); resizeTimeout setTimeout(() > { checkMobile(); updateSlideHeight(); updateVideoSources(); }, 100); }, { passive: true }); requestAnimationFrame(updateSlideHeight); // Build visual slides const slideRefs ; slides.forEach((slide, index) > { const slideEl document.createElement(div); slideEl.className slide; slideEl.id slide.id; slideEl.dataset.index index; // Add mobile-slide class for mobile-only slides if (slide.mobileOnly) { slideEl.classList.add(mobile-slide); } const bgEl document.createElement(div); bgEl.className slide-background; let videoEl null; if (slide.type video) { const isPortrait window.matchMedia((orientation: portrait)).matches; const videoSrc isPortrait ? slide.src : (slide.srcLandscape || slide.src); bgEl.innerHTML ` video autoplay loop muted playsinline> source src${encodeURI(videoSrc)} typevideo/mp4> /video> `; videoEl bgEl.querySelector(video); } else if (slide.type transparent) { // No background - let gradient behind show through } else { bgEl.innerHTML `img src${slide.src} alt loading${index 2 ? eager : lazy}>`; } const contentEl document.createElement(div); contentEl.className slide-content; contentEl.innerHTML slide.content; slideEl.appendChild(bgEl); if (slide.type ! transparent) { const overlayEl document.createElement(div); overlayEl.className slide-overlay; slideEl.appendChild(overlayEl); } slideEl.appendChild(contentEl); visualLayer.appendChild(slideEl); slideRefs.push({ slide: slideEl, bg: bgEl, content: contentEl, video: videoEl, data: slide }); }); // Build progress dots based on scroll positions function buildProgressDots() { progressContainer.innerHTML ; for (let i 0; i totalScrollPositions; i++) { const dot document.createElement(div); dot.className progress-dot + (i 0 ? active : ); dot.addEventListener(click, () > { scrollProxy.scrollTo({ top: i * cachedSlideHeight, behavior: smooth }); }); progressContainer.appendChild(dot); } } buildProgressDots(); let dotEls document.querySelectorAll(.progress-dot); // Update video sources on orientation change function updateVideoSources() { const isPortrait window.matchMedia((orientation: portrait)).matches; slideRefs.forEach(ref > { if (ref.video && ref.data.srcLandscape) { const newSrc isPortrait ? ref.data.src : ref.data.srcLandscape; const sourceEl ref.video.querySelector(source); if (sourceEl && !sourceEl.src.includes(encodeURI(newSrc))) { sourceEl.src encodeURI(newSrc); ref.video.load(); } } }); } window.matchMedia((orientation: portrait)).addEventListener(change, updateVideoSources); // // STATE // let lastScrollTop 0; let velocity 0; let settledCount 0; let isRendering false; let currentActiveSlide -1; let settledTimeout null; let isScrolling false; let statsAnimated false; // Find the news slide index function getNewsSlideIndex() { return slides.findIndex(s > s.id slide-news); } // // SLIDE ACTIVATION // function onSlideActivate(slideIndex) { if (slideIndex 0 || slideIndex > slides.length) return; const slideChanged slideIndex ! currentActiveSlide; if (slideChanged) { if (currentActiveSlide > 0) { const prevRef slideRefscurrentActiveSlide; if (prevRef) { prevRef.slide.classList.remove(active); if (prevRef.video) prevRef.video.pause(); } } currentActiveSlide slideIndex; const ref slideRefsslideIndex; if (ref) { ref.slide.classList.add(active); if (ref.video) { ref.video.muted true; ref.video.playsInline true; ref.video.play().catch(() > {}); } } } // Animate stats when news slide becomes active const newsIndex getNewsSlideIndex(); if (slideIndex newsIndex && !statsAnimated) { animateStats(); statsAnimated true; } // Hide scroll indicator after first scroll if (slideIndex > 0) { scrollIndicator.classList.add(hidden); } else { scrollIndicator.classList.remove(hidden); } } function checkSettled() { isScrolling false; const scrollTop scrollProxy.scrollTop; const scrollProgress scrollTop / cachedSlideHeight; const nearestPosition Math.round(scrollProgress); const distanceFromSnap Math.abs(scrollProgress - nearestPosition); if (distanceFromSnap 0.05) { onSlideActivate(nearestPosition); } } function onScrollStart() { if (!isScrolling) { isScrolling true; } clearTimeout(settledTimeout); settledTimeout setTimeout(checkSettled, 150); } // // RENDER LOOP // function render() { const scrollTop scrollProxy.scrollTop; const scrollProgress scrollTop / cachedSlideHeight; velocity Math.abs(scrollTop - lastScrollTop); lastScrollTop scrollTop; if (velocity CONFIG.velocityThreshold) { settledCount++; if (settledCount > CONFIG.settledFrames) { isRendering false; } } else { settledCount 0; } const nearestSlide Math.round(scrollProgress); // Render each slide for (let index 0; index slideRefs.length; index++) { const { slide: slideEl, bg } slideRefsindex; const offset index - scrollProgress; const absOffset Math.abs(offset); if (absOffset > CONFIG.renderDistance) { slideEl.style.visibility hidden; continue; } slideEl.style.visibility visible; const slideY offset * cachedSlideHeight * CONFIG.slideCompression; const slideOpacity Math.max(0, 1 - absOffset * CONFIG.slideFade); const zIndex Math.round((1 - absOffset) * 10); slideEl.style.opacity slideOpacity; slideEl.style.transform `translate3d(0, ${slideY}px, 0)`; slideEl.style.zIndex zIndex; // Parallax const parallaxY (scrollProgress - index) * cachedSlideHeight * CONFIG.parallaxRate; bg.style.transform `translate3d(0, ${parallaxY}px, 0)`; } dotEls.forEach((dot, i) > { dot.classList.toggle(active, i nearestSlide); }); if (isRendering) { requestAnimationFrame(render); } } function startRendering() { onScrollStart(); if (!isRendering) { isRendering true; settledCount 0; requestAnimationFrame(render); } } scrollProxy.addEventListener(scroll, startRendering, { passive: true }); scrollProxy.addEventListener(touchstart, startRendering, { passive: true }); // // STATS COUNTER ANIMATION // function animateStats() { const statNumbers document.querySelectorAll(.stat-numberdata-target); statNumbers.forEach(stat > { const target parseInt(stat.dataset.target); const duration 2000; const startTime performance.now(); function updateCounter(currentTime) { const elapsed currentTime - startTime; const progress Math.min(elapsed / duration, 1); // Ease out cubic const easeOut 1 - Math.pow(1 - progress, 3); const current Math.floor(easeOut * target); stat.textContent current.toLocaleString(); if (progress 1) { requestAnimationFrame(updateCounter); } else { stat.textContent target.toLocaleString(); } } requestAnimationFrame(updateCounter); }); } // // INITIAL SETUP // // Initial render and activate first slide (video will play via onSlideActivate) startRendering(); setTimeout(() > onSlideActivate(0), 100); // Track current scroll position for keyboard nav let currentScrollPosition 0; function updateCurrentScrollPosition() { const scrollTop scrollProxy.scrollTop; currentScrollPosition Math.round(scrollTop / cachedSlideHeight); } scrollProxy.addEventListener(scrollend, updateCurrentScrollPosition, { passive: true }); // // CLICK-THROUGH FOR LAYERED UI // Forward clicks/taps to buttons in visual-layer below // let touchStartPos null; let touchStartTime 0; const TAP_THRESHOLD 10; // Max movement in px to count as tap const TAP_MAX_DURATION 300; // Max duration in ms to count as tap function findClickableElement(x, y) { // Temporarily hide scroll-proxy to find element below scrollProxy.style.visibility hidden; const target document.elementFromPoint(x, y); scrollProxy.style.visibility visible; if (!target) return null; // Check if target or ancestor is clickable const clickable target.closest(a, button, rolebutton, .social-link); return clickable; } function forwardClick(x, y) { const clickable findClickableElement(x, y); if (clickable) { // For links, trigger click directly clickable.click(); } } // Desktop: forward click events scrollProxy.addEventListener(click, (e) > { // Dont forward if it was a touch (handled separately) if (e.pointerType touch) return; forwardClick(e.clientX, e.clientY); }); // Mobile: track touch to distinguish tap from scroll scrollProxy.addEventListener(touchstart, (e) > { if (e.touches.length 1) { touchStartPos { x: e.touches0.clientX, y: e.touches0.clientY }; touchStartTime Date.now(); } }, { passive: true }); scrollProxy.addEventListener(touchend, (e) > { if (!touchStartPos) return; const touch e.changedTouches0; const dx Math.abs(touch.clientX - touchStartPos.x); const dy Math.abs(touch.clientY - touchStartPos.y); const duration Date.now() - touchStartTime; // Only forward if it was a tap (minimal movement, quick duration) if (dx TAP_THRESHOLD && dy TAP_THRESHOLD && duration TAP_MAX_DURATION) { forwardClick(touch.clientX, touch.clientY); } touchStartPos null; }, { passive: true }); // Keyboard navigation document.addEventListener(keydown, (e) > { if (e.key ArrowDown || e.key PageDown) { e.preventDefault(); updateCurrentScrollPosition(); const nextPos Math.min(currentScrollPosition + 1, totalScrollPositions - 1); scrollProxy.scrollTo({ top: nextPos * cachedSlideHeight, behavior: smooth }); } else if (e.key ArrowUp || e.key PageUp) { e.preventDefault(); updateCurrentScrollPosition(); const prevPos Math.max(currentScrollPosition - 1, 0); scrollProxy.scrollTo({ top: prevPos * cachedSlideHeight, behavior: smooth }); } }); /script>/body>/html>
Subdomains
Date
Domain
IP
www.redtulip.io
2025-03-23
16.24.216.156
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]