/* About page intentionally has no contact/currency/account header strip. Keep this guard so stale server HTML cannot reveal the removed strip. */ body.tripy-about-page-body .tripy-about-topbar { display: none !important; } /* Node About-page activation safety net. WordPress adds ty-home-experience-active on ; Node must do the same. These unscoped canvas rules also prevent a blank block before JavaScript runs. */ body.tripy-about-page-body { margin: 0; background: #020617; color: #d9ecff; } body.tripy-about-page-body .tripy-public-content--about { background: #020617; overflow: hidden; } .ty-hx-galaxy-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.82; } html, body { overflow-x: hidden; } .ty-hx-root { --ty-bg: #040b1f; --ty-card: rgba(9, 16, 43, 0.62); --ty-ink: #dff2ff; --ty-muted: #90afc7; --ty-primary: #20f0ff; --ty-accent: #6bff9d; --ty-violet: #8f74ff; --ty-border: rgba(83, 138, 188, 0.32); /* ✅ layout: keep aligned with page flow (no 50vw hacks) */ position: relative; width: 100%; max-width: 100%; left: auto; right: auto; margin-left: 0; margin-right: 0; padding: clamp(72px, 8vw, 120px) 0 clamp(80px, 9vw, 132px); overflow: clip; background: transparent; color: var(--ty-ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* ✅ full-bleed background only (prevents right-shift) */ .ty-hx-root::before { content: ""; position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 0; background: radial-gradient(circle at 20% 15%, #132e66 0%, rgba(8, 18, 52, 0.82) 32%, #050816 65%, #04050d 100%); } .ty-hx-noise, .ty-hx-grid, .ty-hx-orb { position: absolute; pointer-events: none; } .ty-hx-grid { inset: 0; background-image: linear-gradient(rgba(93, 196, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 196, 255, 0.09) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle at center, black 25%, transparent 78%); opacity: 0.4; animation: tyGridPulse 8s ease-in-out infinite; } .ty-hx-noise { inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.3; mix-blend-mode: soft-light; } .ty-hx-orb { filter: blur(20px); opacity: 0.42; border-radius: 50%; animation: tyFloat 11s ease-in-out infinite; } .ty-hx-orb-a { width: clamp(180px, 21vw, 280px); height: clamp(180px, 21vw, 280px); left: 8%; top: 11%; background: radial-gradient(circle at 30% 30%, #19f0ff 0%, rgba(25,240,255,0.1) 68%); } .ty-hx-orb-b { width: clamp(220px, 25vw, 340px); height: clamp(220px, 25vw, 340px); right: 7%; top: 18%; animation-delay: -2.8s; background: radial-gradient(circle at 70% 35%, #a172ff 0%, rgba(161,114,255,0.12) 70%); } .ty-hx-orb-c { width: clamp(170px, 19vw, 260px); height: clamp(170px, 19vw, 260px); right: 20%; bottom: 8%; animation-delay: -4.6s; background: radial-gradient(circle at 55% 55%, #68ff98 0%, rgba(104,255,152,0.10) 72%); } .ty-hx-wrap { width: 100%; max-width: none; margin: 0 auto; padding-inline: clamp(6px, 1vw, 14px); transform: none; position: relative; z-index: 2; display: grid; gap: clamp(28px, 4vw, 48px); direction: ltr !important; } .ty-hx-hero { text-align: center; max-width: 980px; margin: 0 auto; } .ty-hx-chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid rgba(81, 166, 242, 0.45); color: #aee7ff; background: rgba(11, 24, 53, 0.7); box-shadow: inset 0 0 0 1px rgba(127, 206, 255, 0.12), 0 8px 24px rgba(4, 12, 31, 0.55); } .ty-hx-hero h1 { margin: 16px 0 8px; font-family: "Syne", "Space Grotesk", sans-serif; font-weight: 800; line-height: 1.02; font-size: clamp(34px, 5.7vw, 78px); letter-spacing: -0.028em; } .ty-hx-hero h1 span { background: linear-gradient(90deg, #78f4ff 0%, #76ffc8 34%, #b684ff 68%, #7ec6ff 100%); background-size: 180% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tyGradientMove 5.8s linear infinite; } .ty-hx-typing { margin: 14px 0 0; font-size: clamp(17px, 2.1vw, 26px); color: #daf5ff; min-height: 1.6em; letter-spacing: 0.01em; } .ty-hx-caret { display: inline-block; width: 1px; height: 1.08em; background: #a9f8ff; margin-left: 4px; vertical-align: -0.1em; animation: tyCaret 0.9s steps(2, start) infinite; } .ty-hx-copy { margin: 14px auto 0; max-width: 790px; color: var(--ty-muted); font-size: clamp(14px, 1.35vw, 19px); line-height: 1.65; } .ty-hx-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } .ty-hx-btn { --btn-border: rgba(112, 212, 255, 0.45); --btn-bg: rgba(10, 27, 61, 0.75); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 12px 22px; min-height: 46px; border: 1px solid var(--btn-border); text-decoration: none !important; color: #dff4ff !important; background: var(--btn-bg); font-weight: 700; letter-spacing: 0.02em; transform: translateY(0); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease; box-shadow: 0 8px 30px rgba(3, 14, 44, 0.5), inset 0 0 0 1px rgba(173, 233, 255, 0.12); } .ty-hx-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(3, 14, 44, 0.62), inset 0 0 0 1px rgba(200, 249, 255, 0.22); } .ty-hx-btn-primary { --btn-border: rgba(130, 251, 229, 0.8); --btn-bg: linear-gradient(120deg, rgba(26, 189, 255, 0.35) 0%, rgba(54, 214, 152, 0.35) 100%); } .ty-hx-btn-ghost:hover { border-color: rgba(120, 220, 255, 0.95); } .ty-hx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--ty-border); background: linear-gradient(145deg, rgba(8, 21, 54, 0.66), rgba(11, 15, 37, 0.74)); box-shadow: 0 20px 60px rgba(2, 8, 26, 0.6), inset 0 0 0 1px rgba(127, 214, 255, 0.11); transform-style: preserve-3d; } .ty-hx-stat { border-radius: 14px; background: linear-gradient(145deg, rgba(23, 43, 90, 0.62), rgba(10, 18, 44, 0.55)); border: 1px solid rgba(107, 174, 223, 0.22); padding: 18px 10px; text-align: center; } .ty-hx-stat strong { display: block; font-family: "Syne", "Space Grotesk", sans-serif; font-weight: 800; font-size: clamp(24px, 2.3vw, 34px); line-height: 1; color: #dff8ff; } .ty-hx-stat span { margin-top: 6px; display: block; font-size: 13px; font-weight: 500; color: #95b6cb; } .ty-hx-section { border-radius: 22px; border: 1px solid rgba(95, 165, 214, 0.22); background: linear-gradient(155deg, rgba(6, 17, 45, 0.72), rgba(8, 13, 31, 0.82)); padding: clamp(20px, 3vw, 34px); box-shadow: inset 0 0 0 1px rgba(180, 232, 255, 0.07), 0 20px 64px rgba(2, 10, 27, 0.6); } .ty-hx-section-head h2 { margin: 0; font-size: clamp(20px, 3.2vw, 40px); font-family: "Syne", "Space Grotesk", sans-serif; line-height: 1.06; letter-spacing: -0.02em; } .ty-hx-section-head p { margin: 10px 0 0; color: var(--ty-muted); font-size: clamp(14px, 1.32vw, 18px); } .ty-hx-grid-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ty-hx-card { min-height: 170px; border-radius: 16px; padding: 18px; position: relative; overflow: hidden; border: 1px solid rgba(105, 174, 222, 0.22); background: linear-gradient(145deg, rgba(17, 35, 77, 0.52), rgba(8, 16, 44, 0.68)); transform-style: preserve-3d; transition: border-color 200ms ease, transform 220ms ease, box-shadow 220ms ease; } .ty-hx-card::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 90deg, rgba(117, 255, 225, 0), rgba(117, 255, 225, 0.13), rgba(126, 198, 255, 0), rgba(167, 134, 255, 0.15), rgba(117, 255, 225, 0)); animation: tySpin 8.6s linear infinite; opacity: 0.6; } .ty-hx-card > * { position: relative; z-index: 1; } .ty-hx-card h3 { margin: 0; font-size: 20px; line-height: 1.22; } .ty-hx-card p { margin: 9px 0 0; color: #98b8cb; line-height: 1.55; } .ty-hx-card:hover { border-color: rgba(122, 236, 255, 0.7); transform: translateY(-4px) scale(1.01); box-shadow: 0 22px 42px rgba(3, 16, 43, 0.65); } .ty-hx-flow .ty-hx-timeline { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ty-hx-step { padding: 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(15, 31, 71, 0.62), rgba(8, 15, 38, 0.8)); border: 1px solid rgba(96, 163, 210, 0.24); } .ty-hx-step span { display: inline-flex; border-radius: 999px; min-width: 44px; justify-content: center; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #bdedff; background: rgba(21, 177, 255, 0.16); border: 1px solid rgba(106, 228, 255, 0.35); } .ty-hx-step h4 { margin: 11px 0 6px; font-size: 18px; } .ty-hx-step p { margin: 0; color: #90b0c8; line-height: 1.5; font-size: 14px; } .ty-hx-cta-band { border-radius: 20px; display: grid; grid-template-columns: 1.3fr auto; align-items: center; gap: 16px; padding: clamp(20px, 3vw, 30px); border: 1px solid rgba(125, 206, 255, 0.35); background: linear-gradient(100deg, rgba(0, 227, 173, 0.16), rgba(42, 153, 247, 0.16) 34%, rgba(146, 111, 255, 0.14) 100%), rgba(8, 16, 37, 0.82); box-shadow: 0 24px 60px rgba(4, 12, 34, 0.56); } .ty-hx-cta-band h2 { margin: 0; font-size: clamp(24px, 3vw, 42px); font-family: "Syne", "Space Grotesk", sans-serif; line-height: 1.05; } .ty-hx-cta-band p { margin: 9px 0 0; color: #a8c7da; } .ty-hx-app-download { border-radius: 20px; border: 1px solid rgba(108, 188, 235, 0.28); background: linear-gradient(160deg, rgba(10, 22, 54, 0.76), rgba(5, 14, 36, 0.86)); padding: clamp(20px, 3vw, 30px); box-shadow: 0 24px 58px rgba(4, 12, 32, 0.56), inset 0 0 0 1px rgba(146, 223, 255, 0.09); } .ty-hx-app-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ty-hx-app-card { border-radius: 16px; border: 1px solid rgba(114, 191, 236, 0.26); background: linear-gradient(150deg, rgba(18, 39, 86, 0.58), rgba(8, 17, 45, 0.72)); padding: 18px; text-align: center; transform-style: preserve-3d; } .ty-hx-app-card h3 { margin: 14px 0 6px; font-size: 20px; } .ty-hx-app-card p { margin: 0; color: #98bad1; } .ty-hx-app-card .ty-hx-btn { margin-top: 14px; } .ty-hx-qr { width: 148px; height: 148px; margin: 0 auto; border-radius: 14px; border: 1px solid rgba(155, 236, 255, 0.52); box-shadow: 0 16px 32px rgba(4, 12, 35, 0.45), inset 0 0 0 1px rgba(194, 247, 255, 0.12); display: grid; place-items: center; position: relative; overflow: hidden; } .ty-hx-qr img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; } .ty-hx-qr::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, rgba(120, 250, 230, 0.16), rgba(126, 182, 255, 0.08), rgba(165, 123, 255, 0.16)); pointer-events: none; } .ty-hx-qr::after { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 90deg, rgba(126, 255, 226, 0), rgba(126, 255, 226, 0.25), rgba(161, 127, 255, 0), rgba(126, 255, 226, 0)); animation: tySpin 6.4s linear infinite; } .ty-hx-qr span { position: relative; z-index: 3; font-size: 11px; line-height: 1.3; text-align: center; font-weight: 700; color: #dcf6ff; padding: 5px 7px; border-radius: 9px; background: rgba(11, 29, 61, 0.84); border: 1px solid rgba(128, 206, 255, 0.42); position: absolute; left: 8px; bottom: 8px; } .ty-hx-qr-android { background: linear-gradient(145deg, rgba(27, 226, 134, 0.45), rgba(26, 164, 255, 0.3)); } .ty-hx-qr-ios { background: linear-gradient(145deg, rgba(163, 132, 255, 0.42), rgba(24, 205, 255, 0.28)); } .ty-hx-reveal { opacity: 1; transform: none; transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1); } .ty-hx-root.ty-hx-enhanced .ty-hx-reveal { opacity: 0; transform: translateY(26px) scale(0.985); } .ty-hx-root.ty-hx-enhanced .ty-hx-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* White, visual-first redesign with Tripy AI highlight */ .ty-hx-root { background: radial-gradient(circle at 94% 4%, rgba(129, 233, 255, 0.34), rgba(129, 233, 255, 0) 27%), radial-gradient(circle at 8% 20%, rgba(167, 168, 255, 0.22), rgba(167, 168, 255, 0) 30%), linear-gradient(180deg, #ffffff 0%, #f8fcff 56%, #eef7ff 100%); color: #0c1a33; } .ty-hx-grid { opacity: 0.35; background-image: linear-gradient(rgba(84, 144, 201, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 144, 201, 0.18) 1px, transparent 1px); } .ty-hx-noise { opacity: 0.1; } .ty-hx-map-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; mix-blend-mode: multiply; } .ty-hx-map-layer img { width: 100%; height: 100%; display: block; object-fit: cover; animation: tyMapDrift 30s ease-in-out infinite; } .ty-hx-orb { opacity: 0.28; filter: blur(30px); } .ty-hx-hero { text-align: center; max-width: none; } .ty-hx-hero-shell { display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(20px, 3vw, 34px); direction: ltr !important; max-width: none; margin: 0 auto; } .ty-hx-hero-copy-col { position: relative; z-index: 2; order: 2; max-width: 920px; margin: 0 auto; text-align: center; } .ty-hx-hero-shell > .ty-hx-visual-scene { order: 1 !important; } .ty-hx-hero-shell > .ty-hx-hero-copy-col { order: 2 !important; } .ty-hx-chip { color: #0f4f8a; background: linear-gradient(135deg, rgba(219, 245, 255, 0.95), rgba(235, 249, 255, 0.95)); border: 1px solid rgba(96, 170, 220, 0.6); box-shadow: 0 10px 24px rgba(124, 182, 225, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.8); } .ty-hx-hero h1 { margin: 12px 0 6px; color: #0f2345; font-size: clamp(24px, 3.8vw, 50px); letter-spacing: -0.024em; line-height: 1.04; } .ty-hx-hero h1 span { background: linear-gradient(90deg, #236fb0 0%, #4e78d4 34%, #6b63d4 67%, #23c4b0 100%); background-size: 210% 100%; } .ty-hx-typing { color: #1f3a69; font-weight: 700; } .ty-hx-caret { background: #2569a8; } .ty-hx-copy { color: #49627f; } .ty-hx-cta-row { justify-content: center; } .ty-hx-btn { color: #0f2f56 !important; background: linear-gradient(150deg, rgba(232, 247, 255, 0.95), rgba(245, 252, 255, 0.92)); border: 1px solid rgba(112, 185, 231, 0.52); box-shadow: 0 12px 26px rgba(131, 177, 214, 0.23), inset 0 0 0 1px rgba(255, 255, 255, 0.82); } .ty-hx-btn-primary { color: #ffffff !important; background: linear-gradient(135deg, #0ea5e9 0%, #4f46e5 52%, #14b8a6 100%); border-color: rgba(69, 130, 245, 0.52); } .ty-hx-btn-primary:hover { color: #ffffff !important; } .ty-hx-visual-scene { position: relative; order: 1; min-height: clamp(360px, 42vw, 520px); width: min(100%, 1280px); margin: 0 auto clamp(10px, 2.4vw, 22px); border-radius: 30px; border: 1px solid rgba(112, 186, 232, 0.35); background: radial-gradient(circle at 25% 22%, rgba(137, 246, 255, 0.4), rgba(137, 246, 255, 0) 36%), radial-gradient(circle at 82% 74%, rgba(162, 142, 255, 0.28), rgba(162, 142, 255, 0) 38%), linear-gradient(155deg, rgba(236, 247, 255, 0.95), rgba(245, 251, 255, 0.9)); box-shadow: 0 24px 50px rgba(116, 163, 203, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.75); overflow: hidden; transform-style: preserve-3d; } .ty-hx-visual-scene::before { content: ""; position: absolute; inset: -26%; border-radius: 50%; background: conic-gradient(from 170deg, rgba(34, 182, 222, 0), rgba(34, 182, 222, 0.14), rgba(109, 120, 238, 0), rgba(93, 228, 196, 0.16), rgba(34, 182, 222, 0)); animation: tySpin 22s linear infinite; pointer-events: none; } .ty-hx-visual-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 84% 74%, rgba(154, 137, 255, 0.26), rgba(154, 137, 255, 0) 34%); pointer-events: none; } .ty-hx-depth-tunnel { position: absolute; inset: 12%; border-radius: 50%; background: repeating-radial-gradient(circle at center, rgba(59, 117, 195, 0.16) 0 1px, rgba(59, 117, 195, 0) 10px 22px); opacity: 0.65; animation: tyTunnel 12s linear infinite; filter: blur(0.3px); } .ty-hx-bg-word { position: absolute; top: 8%; right: -4%; font-family: "Syne", "Space Grotesk", sans-serif; font-size: clamp(40px, 6.3vw, 88px); font-weight: 800; line-height: 1; letter-spacing: 0.03em; color: rgba(39, 86, 153, 0.08); animation: tyWordFloat 8.2s ease-in-out infinite; pointer-events: none; } .ty-hx-bg-word-2 { top: auto; right: auto; left: -3%; bottom: 10%; animation-delay: -3.6s; } .ty-hx-tripyai-core { position: absolute; width: clamp(210px, 26vw, 320px); aspect-ratio: 1; left: 50%; top: 52%; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; } .ty-hx-tripyai-pulse { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(173, 228, 255, 0.86) 42%, rgba(74, 111, 214, 0.32) 76%, rgba(74, 111, 214, 0.04) 100%); box-shadow: 0 0 44px rgba(78, 177, 226, 0.35), inset 0 0 30px rgba(77, 107, 215, 0.26); animation: tyPulseBeat 2.6s ease-in-out infinite; } .ty-hx-tripyai-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(88, 146, 224, 0.4); } .ty-hx-tripyai-ring.ty-ring-1 { animation: tyOrbit 10s linear infinite; } .ty-hx-tripyai-ring.ty-ring-2 { inset: 8%; animation: tyOrbit 7.2s linear reverse infinite; opacity: 0.8; } .ty-hx-tripyai-ring.ty-ring-3 { inset: 16%; animation: tyOrbit 5.8s linear infinite; opacity: 0.6; } .ty-hx-tripyai-label { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transform: translateZ(22px); } .ty-hx-tripyai-label strong { font-family: "Syne", "Space Grotesk", sans-serif; font-size: clamp(26px, 3.1vw, 40px); color: #19377a; text-shadow: 0 8px 22px rgba(79, 140, 231, 0.3); } .ty-hx-tripyai-label em { font-style: normal; color: #3f5d83; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } .ty-hx-image-orbit { --orbit-radius: clamp(140px, 18vw, 220px); position: absolute; inset: 0; animation: tySpin 38s linear infinite; pointer-events: none; } .ty-hx-orbit-item { position: absolute; left: 50%; top: 50%; width: clamp(110px, 10.5vw, 148px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid rgba(108, 170, 223, 0.6); box-shadow: 0 14px 28px rgba(86, 135, 175, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.95); transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateY(calc(var(--orbit-radius) * -1)) rotate(calc(var(--i) * -45deg)); animation: tyOrbitPulse 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -0.45s); } .ty-hx-orbit-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.03); transform: scale(1.01); transition: transform 320ms ease; } .ty-hx-orbit-item figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; font-size: 11px; line-height: 1; letter-spacing: 0.02em; font-weight: 700; color: #0f3159; background: rgba(255, 255, 255, 0.85); } .ty-hx-float-card { position: absolute; min-width: 165px; max-width: 190px; border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(126, 189, 230, 0.54); box-shadow: 0 16px 28px rgba(124, 166, 201, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.66); backdrop-filter: blur(2px); animation: tyCardFloat 7.2s ease-in-out infinite; } .ty-hx-float-card h4 { margin: 0; font-size: 14px; color: #16325f; } .ty-hx-float-card p { margin: 4px 0 0; font-size: 12px; color: #4d6788; } .ty-float-a { left: 6%; top: 26%; } .ty-float-b { right: 6%; top: 24%; animation-delay: -2.2s; } .ty-float-c { right: 10%; bottom: 18%; animation-delay: -3.8s; } .ty-hx-cinema { border-radius: 22px; border: 1px solid rgba(119, 180, 224, 0.32); background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(246, 251, 255, 0.91)); box-shadow: 0 18px 46px rgba(125, 173, 206, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.66); padding: clamp(20px, 3vw, 34px); } .ty-hx-marquee { margin-top: 16px; border-radius: 18px; border: 1px solid rgba(122, 186, 227, 0.32); padding: 14px; overflow: hidden; background: linear-gradient(140deg, rgba(233, 246, 255, 0.55), rgba(255, 255, 255, 0.95)); } .ty-hx-marquee-track { display: flex; gap: 14px; width: max-content; animation: tyMarquee 36s linear infinite; } .ty-hx-marquee:hover .ty-hx-marquee-track { animation-play-state: paused; } .ty-hx-marquee-card { position: relative; width: clamp(160px, 16vw, 230px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid rgba(123, 185, 225, 0.44); box-shadow: 0 12px 24px rgba(124, 166, 201, 0.22); transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; } .ty-hx-marquee-card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 420ms ease; } .ty-hx-marquee-card span { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(12, 43, 83, 0.75); color: #e7f7ff; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; } .ty-hx-marquee-card:hover { transform: translateY(-5px); border-color: rgba(74, 166, 237, 0.7); box-shadow: 0 18px 30px rgba(118, 167, 207, 0.28); } .ty-hx-marquee-card:hover img { transform: scale(1.08); } .ty-hx-stats, .ty-hx-section, .ty-hx-cta-band, .ty-hx-app-download { border-color: rgba(119, 180, 224, 0.32); background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(246, 251, 255, 0.9)); box-shadow: 0 18px 46px rgba(125, 173, 206, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.66); width: 100%; max-width: none; margin-left: 0; margin-right: 0; } .ty-hx-stat { background: linear-gradient(145deg, rgba(241, 249, 255, 0.96), rgba(255, 255, 255, 0.95)); border-color: rgba(128, 186, 229, 0.34); } .ty-hx-stat strong, .ty-hx-section-head h2, .ty-hx-card h3, .ty-hx-step h4, .ty-hx-cta-band h2, .ty-hx-app-card h3 { color: #102a4f; } .ty-hx-stat span, .ty-hx-section-head p, .ty-hx-card p, .ty-hx-step p, .ty-hx-cta-band p, .ty-hx-app-card p { color: #4d6788; } .ty-hx-card, .ty-hx-step, .ty-hx-app-card { background: linear-gradient(145deg, rgba(246, 252, 255, 0.96), rgba(255, 255, 255, 0.94)); border-color: rgba(125, 184, 226, 0.34); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .ty-hx-card::before { opacity: 0.3; } .ty-home-experience-active #st-content-wrapper .container, .ty-home-experience-active .st-main-content .container, .ty-home-experience-active #main-content .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .ty-home-experience-active #st-content-wrapper, .ty-home-experience-active #main-content, .ty-home-experience-active .st-main-content, .ty-home-experience-active .st-main-content .st-main-content-inner, .ty-home-experience-active #content, .ty-home-experience-active #primary, .ty-home-experience-active .content-area, .ty-home-experience-active .site-main { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; } .ty-home-experience-active #st-content-wrapper .row, .ty-home-experience-active .st-main-content .row, .ty-home-experience-active #main-content .row { margin-left: 0 !important; margin-right: 0 !important; display: block !important; } .ty-home-experience-active #st-content-wrapper .sidebar-left, .ty-home-experience-active #st-content-wrapper .sidebar-right, .ty-home-experience-active #st-content-wrapper aside.sidebar-left, .ty-home-experience-active #st-content-wrapper aside.sidebar-right { display: none !important; } .ty-home-experience-active #st-content-wrapper .col-sm-9, .ty-home-experience-active #st-content-wrapper .col-md-9, .ty-home-experience-active #st-content-wrapper .col-lg-9, .ty-home-experience-active #st-content-wrapper .col-sm-12, .ty-home-experience-active #st-content-wrapper .row > [class*="col-"], .ty-home-experience-active .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; left: auto !important; right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .ty-home-experience-active .ty-hx-root { width: 100% !important; max-width: 100% !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; overflow: clip !important; } .ty-home-experience-active .ty-hx-wrap { width: 100%; max-width: none; margin-left: auto !important; margin-right: auto !important; padding-inline: clamp(6px, 1vw, 14px); transform: none !important; } body.home #st-content-wrapper .container, body.home .st-main-content .container, body.home #main-content .container, body.page-id-71 #st-content-wrapper .container, body.page-id-71 .st-main-content .container, body.page-id-71 #main-content .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.home #st-content-wrapper .row, body.home .st-main-content .row, body.home #main-content .row, body.page-id-71 #st-content-wrapper .row, body.page-id-71 .st-main-content .row, body.page-id-71 #main-content .row { margin-left: 0 !important; margin-right: 0 !important; display: block !important; } body.home #st-content-wrapper .sidebar-left, body.home #st-content-wrapper .sidebar-right, body.home #st-content-wrapper aside.sidebar-left, body.home #st-content-wrapper aside.sidebar-right, body.page-id-71 #st-content-wrapper .sidebar-left, body.page-id-71 #st-content-wrapper .sidebar-right, body.page-id-71 #st-content-wrapper aside.sidebar-left, body.page-id-71 #st-content-wrapper aside.sidebar-right { display: none !important; } body.home #st-content-wrapper .row > [class*="col-"], body.home .row > [class*="col-"], body.page-id-71 #st-content-wrapper .row > [class*="col-"], body.page-id-71 .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; left: auto !important; right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } body.home .ty-hx-root, body.page-id-71 .ty-hx-root { width: 100% !important; max-width: 100% !important; margin: 0 !important; left: auto !important; right: auto !important; transform: none !important; overflow-x: hidden !important; } body.home .ty-hx-wrap, body.page-id-71 .ty-hx-wrap { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-inline: clamp(6px, 1vw, 14px) !important; } .ty-hx-title { margin: 10px 0 6px; color: #0f2345; font-family: "Syne", "Space Grotesk", sans-serif; font-size: clamp(23px, 3.6vw, 44px); letter-spacing: -0.024em; line-height: 1.03; } .ty-hx-color-shift { background: linear-gradient(90deg, #1f6db1 0%, #5d62db 35%, #15bda4 70%, #1f6db1 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; animation: tyGradientMove 7s linear infinite; } .ty-hx-color-shift:hover { filter: hue-rotate(28deg) saturate(1.35); animation-duration: 1.4s; } .ty-hx-chip.ty-hx-color-shift { background-image: linear-gradient(90deg, #0f5ca2 0%, #5f5ed6 34%, #0cb79d 70%, #0f5ca2 100%); } .ty-hx-mini-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .ty-hx-mini-tags span { border-radius: 999px; padding: 7px 11px; border: 1px solid rgba(118, 185, 229, 0.5); background: linear-gradient(160deg, rgba(241, 250, 255, 0.92), rgba(255, 255, 255, 0.86)); color: #1d3f6c; font-size: 12px; font-weight: 700; transition: transform 220ms ease, border-color 220ms ease; } .ty-hx-mini-tags span:hover { transform: translateY(-2px); border-color: rgba(42, 160, 236, 0.76); } .ty-hx-visual-scene { min-height: clamp(520px, 62vw, 820px); border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; padding: clamp(10px, 2.3vw, 22px) 0; } .ty-hx-tripyai-label { display: none; } .ty-hx-tripyai-core { width: clamp(320px, 40vw, 560px); } .ty-hx-lottie-shell { position: relative; z-index: 4; width: 72%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.86), rgba(201, 233, 255, 0.7) 44%, rgba(79, 117, 224, 0.32) 74%, rgba(79, 117, 224, 0.05)); box-shadow: 0 0 42px rgba(66, 158, 226, 0.36), inset 0 0 28px rgba(79, 111, 214, 0.24); } .ty-hx-lottie-static { position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain; z-index: 1; opacity: 0.95; transform: translateZ(6px); transition: opacity 220ms ease, transform 300ms ease; } .ty-hx-lottie { width: 86%; height: 86%; position: relative; z-index: 2; } .ty-hx-lottie-shell.is-lottie-loaded .ty-hx-lottie-static { opacity: 0.1; transform: translateZ(6px) scale(0.86); } .ty-hx-lottie-fallback { display: none !important; } .ty-hx-lottie.is-fallback + .ty-hx-lottie-fallback { opacity: 0; } .ty-hx-float-card { z-index: 5; min-width: 200px; max-width: 260px; border: 1px solid rgba(86, 165, 223, 0.56); background: rgba(255, 255, 255, 0.94); box-shadow: 0 16px 34px rgba(92, 138, 176, 0.22); backdrop-filter: blur(6px); } .ty-hx-service-universe { overflow: visible; } .ty-hx-service-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .ty-hx-service-tile { border-radius: 16px; border: 1px solid rgba(125, 184, 226, 0.4); background: linear-gradient(150deg, rgba(245, 252, 255, 0.95), rgba(255, 255, 255, 0.95)); padding: 16px 14px; text-align: center; box-shadow: 0 14px 28px rgba(117, 163, 197, 0.16); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .ty-hx-service-tile:hover { transform: translateY(-6px) scale(1.01); border-color: rgba(60, 160, 235, 0.74); box-shadow: 0 22px 36px rgba(112, 162, 199, 0.24); } .ty-hx-service-media { position: relative; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(232, 247, 255, 0.96), rgba(255, 255, 255, 0.95)); border: 1px solid rgba(123, 188, 228, 0.42); box-shadow: 0 12px 24px rgba(112, 161, 198, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.78); overflow: hidden; } .ty-hx-service-svg { width: 62%; height: 62%; object-fit: contain; display: block; opacity: 0.92; filter: drop-shadow(0 6px 8px rgba(43, 109, 176, 0.25)); } .ty-hx-lottie-service { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); margin: 0; border-radius: 12px; background: transparent; border: 0; box-shadow: none; transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease; animation: tyFloat 4.6s ease-in-out infinite; } .ty-hx-lottie-service.is-fallback { opacity: 0; } .ty-hx-service-tile:hover .ty-hx-lottie-service { transform: translateY(-4px) scale(1.08); box-shadow: 0 14px 24px rgba(115, 168, 204, 0.22); } .ty-hx-service-tile h3 { margin: 4px 0 6px; font-size: 20px; } .ty-hx-service-tile p { margin: 0; font-size: 13px; color: #49627f; } .ty-hx-difference .ty-hx-feature-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ty-hx-feature-card { border-radius: 15px; border: 1px solid rgba(125, 184, 226, 0.42); background: linear-gradient(145deg, rgba(248, 253, 255, 0.95), rgba(255, 255, 255, 0.95)); padding: 14px; box-shadow: 0 12px 24px rgba(121, 168, 202, 0.15); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .ty-hx-feature-card:hover { transform: translateY(-5px); border-color: rgba(58, 160, 235, 0.72); box-shadow: 0 18px 32px rgba(115, 168, 205, 0.24); } .ty-hx-feature-no { display: inline-flex; min-width: 42px; justify-content: center; border-radius: 999px; padding: 5px 10px; border: 1px solid rgba(101, 173, 225, 0.58); background: linear-gradient(120deg, rgba(214, 243, 255, 0.96), rgba(236, 253, 246, 0.92)); color: #1d4f82; font-size: 12px; font-weight: 800; } .ty-hx-feature-card h3 { margin: 10px 0 6px; font-size: 18px; line-height: 1.25; font-weight: 700; } .ty-hx-feature-card p { margin: 0; color: #4d6788; font-size: 13px; line-height: 1.5; } .ty-hx-cta-band { grid-template-columns: minmax(0, 1fr); gap: 18px; } .ty-hx-ecosystem-visual { border-radius: 18px; border: 1px solid rgba(109, 185, 229, 0.34); background: linear-gradient(155deg, rgba(237, 248, 255, 0.95), rgba(250, 253, 255, 0.96)); padding: 16px; box-shadow: 0 18px 34px rgba(109, 157, 193, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.76); overflow: hidden; } .ty-hx-eco-map { position: relative; min-height: clamp(220px, 28vw, 310px); border-radius: 14px; border: 1px solid rgba(116, 186, 228, 0.28); background: radial-gradient(circle at 80% 18%, rgba(157, 138, 255, 0.22), rgba(157, 138, 255, 0) 34%), radial-gradient(circle at 16% 72%, rgba(74, 205, 236, 0.23), rgba(74, 205, 236, 0) 32%), linear-gradient(140deg, rgba(228, 246, 255, 0.72), rgba(255, 255, 255, 0.94)); overflow: hidden; } .ty-hx-eco-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; animation: tyMapDrift 26s ease-in-out infinite; } .ty-hx-eco-routes { position: absolute; inset: 14% 8%; } .ty-hx-eco-route { position: absolute; border-radius: 999px; border: 1.5px dashed rgba(31, 127, 187, 0.46); filter: drop-shadow(0 0 6px rgba(65, 151, 219, 0.26)); } .ty-hx-eco-route::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #5ee1ff 0%, #3ca7e8 64%, rgba(60, 167, 232, 0.1) 100%); box-shadow: 0 0 10px rgba(55, 173, 242, 0.48); animation: tyRouteDot 5.6s linear infinite; } .ty-hx-eco-route-a { inset: 4% 16% auto 10%; height: 62%; } .ty-hx-eco-route-b { inset: 18% 10% auto 28%; height: 52%; animation-delay: -1.5s; } .ty-hx-eco-route-c { inset: 24% 18% auto 8%; height: 42%; animation-delay: -2.4s; } .ty-hx-eco-route-a::after { top: -6px; left: -6px; } .ty-hx-eco-route-b::after { top: calc(50% - 6px); right: -6px; } .ty-hx-eco-route-c::after { bottom: -6px; left: calc(50% - 6px); } .ty-hx-eco-nodes { position: absolute; inset: 0; } .ty-hx-eco-node { position: absolute; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(104, 178, 224, 0.5); box-shadow: 0 10px 20px rgba(96, 147, 183, 0.24); animation: tyCardFloat 6.2s ease-in-out infinite; } .ty-hx-eco-node img { width: 68%; height: 68%; object-fit: contain; } .ty-hx-eco-node-hotel { left: 12%; top: 20%; } .ty-hx-eco-node-tour { left: 34%; top: 10%; animation-delay: -1.8s; } .ty-hx-eco-node-activity { right: 28%; top: 14%; animation-delay: -2.3s; } .ty-hx-eco-node-rental { right: 12%; bottom: 32%; animation-delay: -2.9s; } .ty-hx-eco-node-car { left: 46%; bottom: 16%; animation-delay: -1.1s; } .ty-hx-eco-journey { position: absolute; left: 6%; right: 6%; bottom: 12px; width: auto; height: 52px; object-fit: contain; opacity: 0.88; animation: tyDriveLane 9s ease-in-out infinite; } .ty-hx-eco-strip { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; padding: 4px; overflow: hidden; pointer-events: none; } .ty-hx-eco-strip figure { margin: 0; width: 108px; height: 64px; border-radius: 10px; overflow: hidden; position: relative; flex: 0 0 auto; border: 1px solid rgba(108, 179, 223, 0.48); box-shadow: 0 10px 16px rgba(89, 137, 175, 0.24); animation: tyStripFlow 14s linear infinite; } .ty-hx-eco-strip figure:nth-child(2n) { animation-delay: -2.8s; } .ty-hx-eco-strip figure:nth-child(3n) { animation-delay: -5.4s; } .ty-hx-eco-strip img { width: 100%; height: 100%; object-fit: cover; display: block; } .ty-hx-eco-strip figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 700; color: #ecf7ff; background: rgba(13, 44, 78, 0.76); } .ty-hx-eco-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ty-hx-eco-pills span { border-radius: 999px; padding: 7px 11px; border: 1px solid rgba(114, 183, 227, 0.5); background: rgba(246, 252, 255, 0.96); color: #1b446f; font-size: 12px; font-weight: 700; } .ty-hx-root h2, .ty-hx-root h3, .ty-hx-root h4, .ty-hx-root p { transition: color 220ms ease, letter-spacing 220ms ease; } .ty-hx-root h2:hover, .ty-hx-root h3:hover, .ty-hx-root h4:hover { color: #1f66ab; letter-spacing: 0.01em; } .ty-hx-root p:hover { color: #365881; } .ty-hx-stats, .ty-hx-section, .ty-hx-cta-band, .ty-hx-app-download, .ty-hx-cinema { transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } .ty-hx-stats:hover, .ty-hx-section:hover, .ty-hx-cta-band:hover, .ty-hx-app-download:hover, .ty-hx-cinema:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(111, 162, 199, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.72); } .ty-hx-step:hover, .ty-hx-app-card:hover { transform: translateY(-5px); border-color: rgba(77, 164, 237, 0.6); box-shadow: 0 20px 36px rgba(122, 166, 203, 0.24); } /* Currency dropdown fix: click-only open/close + search */ .ty-home-experience-active .dropdown-currency { position: relative; } .ty-home-experience-active .dropdown-currency .dropdown-menu { display: none !important; position: absolute !important; top: calc(100% + 8px); width: min(360px, 92vw); min-width: 280px; max-height: min(72vh, 430px); overflow: auto; padding: 10px; margin: 0 !important; border-radius: 14px; border: 1px solid rgba(122, 186, 227, 0.45); background: linear-gradient(170deg, rgba(252, 254, 255, 0.98), rgba(240, 248, 255, 0.96)); box-shadow: 0 20px 42px rgba(101, 144, 182, 0.26); right: 0 !important; left: auto !important; z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(0.98); transform-origin: top right; transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease; column-count: 1 !important; -webkit-column-count: 1 !important; } .ty-home-experience-active .dropdown-currency:hover .dropdown-menu { display: none !important; } .ty-home-experience-active header .dropdown-currency:hover > .dropdown-menu, .ty-home-experience-active #header .dropdown-currency:hover > .dropdown-menu, .ty-home-experience-active .topbar-right .dropdown-currency:hover > .dropdown-menu { display: none !important; } .ty-home-experience-active .dropdown-currency.ty-open .dropdown-menu, .ty-home-experience-active .dropdown-currency.open .dropdown-menu { display: block !important; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .ty-home-experience-active .dropdown-currency.ty-open:hover .dropdown-menu, .ty-home-experience-active .dropdown-currency.open:hover .dropdown-menu { display: block !important; } .ty-home-experience-active .dropdown-currency > a, .ty-home-experience-active .dropdown-currency > button, .ty-home-experience-active .dropdown-currency .dropdown-toggle { cursor: pointer; } .ty-home-experience-active .dropdown-currency.ty-open > a, .ty-home-experience-active .dropdown-currency.ty-open .dropdown-toggle { color: #1e67a8 !important; } .ty-home-experience-active .dropdown-currency .dropdown-menu > li { display: block !important; margin: 0 0 6px !important; list-style: none; float: none !important; width: 100% !important; clear: both !important; break-inside: avoid; page-break-inside: avoid; } .ty-home-experience-active .dropdown-currency .dropdown-menu > li:last-child { margin-bottom: 0 !important; } .ty-home-experience-active .dropdown-currency .dropdown-menu > li > a { display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; border-radius: 10px; border: 1px solid rgba(120, 184, 226, 0.32); color: #19365f !important; background: rgba(255, 255, 255, 0.92); padding: 9px 12px !important; font-weight: 700; font-size: 13px; line-height: 1.25 !important; white-space: normal !important; overflow: visible !important; text-overflow: initial !important; text-align: left !important; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease; } .ty-home-experience-active .dropdown-currency .dropdown-menu > li > a:hover { transform: translateY(-1px); border-color: rgba(56, 169, 235, 0.85); background: linear-gradient(120deg, rgba(196, 237, 255, 0.85), rgba(218, 255, 240, 0.72)); color: #0f2f56 !important; } .ty-home-experience-active .dropdown-currency .dropdown-menu .ty-currency-search-wrap { position: sticky; top: 0; z-index: 5; margin-bottom: 8px !important; padding: 0 !important; background: linear-gradient(180deg, rgba(248, 252, 255, 1), rgba(248, 252, 255, 0.94)); } .ty-home-experience-active .dropdown-currency .dropdown-menu .ty-currency-search { width: 100%; border: 1px solid rgba(112, 179, 223, 0.52); border-radius: 10px; background: #ffffff; color: #12345f; padding: 10px 12px; outline: none; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(215, 239, 255, 0.8); } .ty-home-experience-active .dropdown-currency .dropdown-menu .ty-currency-search::placeholder { color: #7e96ad; } @media (max-width: 1060px) { .ty-hx-hero { text-align: center; } .ty-hx-hero-shell { grid-template-columns: 1fr; } .ty-hx-hero-copy-col { max-width: 760px; margin: 0 auto; } .ty-hx-cta-row { justify-content: center; } .ty-hx-visual-scene { width: min(760px, 100%); margin: 0 auto; } .ty-hx-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ty-hx-difference .ty-hx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty-hx-image-orbit { --orbit-radius: clamp(126px, 24vw, 180px); } .ty-hx-orbit-item { width: clamp(96px, 13vw, 130px); } .ty-hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ty-hx-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty-hx-flow .ty-hx-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty-hx-cta-band { grid-template-columns: 1fr; } .ty-hx-eco-map { min-height: 260px; } .ty-hx-eco-strip figure:nth-child(n + 5) { display: none; } .ty-hx-app-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .ty-hx-root { width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; padding: 56px 0 72px; } .ty-hx-wrap { width: 100%; padding-inline: 10px; } .ty-hx-hero h1 { font-size: clamp(27px, 9.3vw, 42px); } .ty-hx-typing { font-size: clamp(16px, 4.8vw, 22px); } .ty-hx-visual-scene { min-height: 420px; border-radius: 22px; } .ty-hx-title { font-size: clamp(24px, 8.6vw, 38px); } .ty-hx-mini-tags { justify-content: center; } .ty-hx-service-grid, .ty-hx-difference .ty-hx-feature-grid { grid-template-columns: 1fr; } .ty-hx-service-tile { text-align: left; } .ty-hx-lottie-service { margin-left: 0; margin-right: 0; } .ty-hx-bg-word { font-size: clamp(32px, 12vw, 56px); } .ty-hx-float-card { min-width: 136px; max-width: 150px; padding: 9px 10px; } .ty-hx-float-card h4 { font-size: 12px; } .ty-hx-float-card p { font-size: 11px; } .ty-hx-eco-map { min-height: 230px; } .ty-hx-eco-node { width: 40px; height: 40px; } .ty-hx-eco-pills { gap: 6px; } .ty-hx-eco-pills span { font-size: 11px; padding: 6px 9px; } .ty-hx-eco-strip figure { width: 88px; height: 56px; } .ty-hx-eco-strip figure:nth-child(n + 4) { display: none; } .ty-hx-image-orbit { --orbit-radius: clamp(102px, 34vw, 154px); } .ty-hx-orbit-item { width: 92px; border-radius: 12px; } .ty-hx-orbit-item:nth-child(n + 7) { display: none; } .ty-float-a { left: 3%; top: 18%; } .ty-float-b { right: 3%; top: 18%; } .ty-float-c { right: 6%; bottom: 16%; } .ty-hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty-hx-grid-cards, .ty-hx-flow .ty-hx-timeline { grid-template-columns: 1fr; } .ty-home-experience-active .dropdown-currency .dropdown-menu { width: min(330px, 92vw); } .ty-hx-marquee-card { width: 170px; } } /* Final universe-style overrides */ body.ty-home-experience-active #topbar, body.ty-home-experience-active header#header, body.ty-home-experience-active .st-header, body.ty-home-experience-active .st-header-2 header#header { display: none !important; } body.ty-home-experience-active #st-content-wrapper, body.ty-home-experience-active .page-wrapper, body.ty-home-experience-active .page-wrapper .page-content { margin-top: 0 !important; padding-top: 0 !important; } body.ty-home-experience-active .ty-hx-root { padding-top: 18px !important; padding-bottom: clamp(64px, 9vw, 120px) !important; color: #dcecff !important; } body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 18% 20%, rgba(28, 72, 170, 0.72) 0%, rgba(28, 72, 170, 0) 38%), radial-gradient(circle at 84% 68%, rgba(66, 197, 235, 0.36) 0%, rgba(66, 197, 235, 0) 40%), radial-gradient(circle at 55% 52%, rgba(101, 75, 225, 0.22) 0%, rgba(101, 75, 225, 0) 44%), linear-gradient(160deg, #05091a 0%, #091735 44%, #090d24 100%) !important; } body.ty-home-experience-active .ty-hx-map-layer { opacity: 0.2; mix-blend-mode: screen; } body.ty-home-experience-active .ty-hx-wrap { padding-inline: clamp(6px, 1vw, 12px) !important; gap: clamp(20px, 3.4vw, 40px) !important; } body.ty-home-experience-active .ty-hx-stats, body.ty-home-experience-active .ty-hx-section, body.ty-home-experience-active .ty-hx-cinema, body.ty-home-experience-active .ty-hx-app-download { background: linear-gradient(145deg, rgba(9, 15, 34, 0.82), rgba(11, 24, 44, 0.68)) !important; border: 1px solid rgba(108, 171, 255, 0.34) !important; box-shadow: 0 18px 46px rgba(4, 9, 25, 0.52), inset 0 0 0 1px rgba(189, 228, 255, 0.06) !important; } body.ty-home-experience-active .ty-hx-section-head p, body.ty-home-experience-active .ty-hx-copy, body.ty-home-experience-active .ty-hx-point-pill p, body.ty-home-experience-active .ty-hx-app-card p { color: rgba(199, 218, 244, 0.92) !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(560px, 70vw, 860px) !important; background: none !important; box-shadow: none !important; border: 0 !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(360px, 44vw, 620px) !important; top: 51%; } body.ty-home-experience-active .ty-hx-center-logo-shell { position: relative; z-index: 6; width: 70%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.95), rgba(166, 215, 255, 0.72) 44%, rgba(74, 126, 255, 0.30) 72%, rgba(74, 126, 255, 0.08) 100%); box-shadow: 0 0 56px rgba(69, 153, 255, 0.36), inset 0 0 42px rgba(43, 108, 232, 0.22); } body.ty-home-experience-active .ty-hx-center-logo { width: 78%; height: 78%; object-fit: contain; display: block; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35)); } body.ty-home-experience-active .ty-hx-lottie-shell, body.ty-home-experience-active .ty-hx-lottie, body.ty-home-experience-active .ty-hx-lottie-static, body.ty-home-experience-active .ty-hx-lottie-fallback { display: none !important; } body.ty-home-experience-active .ty-hx-float-card { min-width: 200px; max-width: 250px; border: 1px solid rgba(120, 188, 255, 0.46); background: linear-gradient(155deg, rgba(14, 27, 60, 0.9), rgba(18, 32, 73, 0.84)); box-shadow: 0 16px 34px rgba(4, 11, 31, 0.48), inset 0 0 0 1px rgba(189, 231, 255, 0.06); color: #deecff; } body.ty-home-experience-active .ty-hx-float-card img { width: 34px; height: 34px; object-fit: contain; display: block; margin-bottom: 7px; filter: drop-shadow(0 8px 14px rgba(34, 116, 255, 0.35)); } body.ty-home-experience-active .ty-hx-float-card h4 { color: #f3fbff; } body.ty-home-experience-active .ty-hx-float-card p { color: #c4daf4; } body.ty-home-experience-active .ty-float-a { left: 4%; top: 25%; } body.ty-home-experience-active .ty-float-b { right: 4%; top: 21%; } body.ty-home-experience-active .ty-float-c { right: 9%; bottom: 21%; } body.ty-home-experience-active .ty-float-d { position: absolute; left: 9%; bottom: 20%; animation-delay: -2.1s; } body.ty-home-experience-active .ty-float-e { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); animation-delay: -3.1s; } body.ty-home-experience-active .ty-hx-ai-satellites { position: absolute; inset: 0; pointer-events: none; z-index: 7; } body.ty-home-experience-active .ty-hx-ai-satellite { position: absolute; border-radius: 999px; padding: 8px 12px; border: 1px solid rgba(118, 195, 255, 0.48); background: linear-gradient(145deg, rgba(12, 32, 74, 0.86), rgba(17, 43, 89, 0.78)); box-shadow: 0 12px 24px rgba(4, 12, 35, 0.52), inset 0 0 0 1px rgba(189, 227, 255, 0.08); color: #d8edff; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; animation: tyAiSatelliteFloat 8s ease-in-out infinite; } body.ty-home-experience-active .ty-ai-s1 { left: 20%; top: 12%; } body.ty-home-experience-active .ty-ai-s2 { right: 10%; top: 30%; animation-delay: -1.4s; } body.ty-home-experience-active .ty-ai-s3 { left: 8%; top: 46%; animation-delay: -2.1s; } body.ty-home-experience-active .ty-ai-s4 { right: 16%; bottom: 28%; animation-delay: -2.8s; } body.ty-home-experience-active .ty-ai-s5 { left: 30%; bottom: 14%; animation-delay: -3.6s; } body.ty-home-experience-active .ty-hx-feature-cloud { padding: clamp(20px, 2.7vw, 32px); } body.ty-home-experience-active .ty-hx-ai-stack { padding: clamp(20px, 2.7vw, 30px); } body.ty-home-experience-active .ty-hx-ai-strip { margin-top: 14px; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 8px 4px 10px; scroll-snap-type: x proximity; } body.ty-home-experience-active .ty-hx-ai-strip::-webkit-scrollbar { height: 8px; } body.ty-home-experience-active .ty-hx-ai-strip::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(90deg, #3b7eff, #43d7d1); } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 290px; max-width: 290px; border-radius: 14px; border: 1px solid rgba(118, 191, 255, 0.44); background: linear-gradient(145deg, rgba(10, 25, 55, 0.92), rgba(13, 30, 67, 0.84)); box-shadow: 0 14px 28px rgba(4, 11, 31, 0.52), inset 0 0 0 1px rgba(188, 223, 255, 0.06); padding: 12px; scroll-snap-align: start; } body.ty-home-experience-active .ty-hx-ai-chip h3 { margin: 10px 0 8px; font-size: 17px; line-height: 1.24; } body.ty-home-experience-active .ty-hx-ai-chip p { margin: 0; font-size: 12px; color: rgba(201, 219, 241, 0.94); line-height: 1.45; } body.ty-home-experience-active .ty-hx-ai-dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #66e4ff 0%, #3a7af2 70%); box-shadow: 0 0 12px rgba(95, 212, 255, 0.66); display: inline-block; animation: tyAiDotPulse 1.8s ease-in-out infinite; } body.ty-home-experience-active .ty-hx-feature-scroll { margin-top: 16px; border-radius: 18px; border: 1px solid rgba(108, 170, 248, 0.35); background: linear-gradient(160deg, rgba(10, 22, 50, 0.86), rgba(12, 20, 48, 0.76)); box-shadow: inset 0 0 0 1px rgba(188, 224, 255, 0.05), 0 18px 30px rgba(3, 10, 30, 0.45); padding: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; } body.ty-home-experience-active .ty-hx-feature-scroll::-webkit-scrollbar { height: 8px; } body.ty-home-experience-active .ty-hx-feature-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(90deg, #2e8df2, #3dd8d0); } body.ty-home-experience-active .ty-hx-feature-track { display: flex; gap: 12px; width: max-content; padding: 6px 4px 12px; } body.ty-home-experience-active .ty-hx-feature-track + .ty-hx-feature-track { margin-top: 8px; } body.ty-home-experience-active .ty-hx-feature-track-a { animation: tyFeatureMarqueeA 60s linear infinite; } body.ty-home-experience-active .ty-hx-feature-track-b { animation: tyFeatureMarqueeB 74s linear infinite; } body.ty-home-experience-active .ty-hx-feature-scroll:hover .ty-hx-feature-track { animation-play-state: paused; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 290px; max-width: 290px; border-radius: 14px; border: 1px solid rgba(116, 184, 255, 0.42); background: linear-gradient(145deg, rgba(15, 28, 62, 0.94), rgba(16, 22, 54, 0.88)); box-shadow: 0 14px 26px rgba(3, 9, 28, 0.5), inset 0 0 0 1px rgba(188, 226, 255, 0.05); padding: 12px 13px; scroll-snap-align: start; transform: rotate(-0.6deg); transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; } body.ty-home-experience-active .ty-hx-point-pill:nth-child(2n) { transform: rotate(0.8deg) translateY(6px); } body.ty-home-experience-active .ty-hx-point-pill:nth-child(3n) { transform: rotate(-1.1deg) translateY(-4px); } body.ty-home-experience-active .ty-hx-point-pill:hover { transform: translateY(-6px) scale(1.02) !important; border-color: rgba(58, 180, 255, 0.88); box-shadow: 0 22px 34px rgba(8, 19, 50, 0.58), inset 0 0 0 1px rgba(188, 226, 255, 0.09); } body.ty-home-experience-active .ty-hx-point-index { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(129, 199, 255, 0.52); background: linear-gradient(130deg, rgba(37, 96, 190, 0.38), rgba(44, 190, 157, 0.3)); color: #cbebff; font-size: 11px; font-weight: 800; } body.ty-home-experience-active .ty-hx-point-pill h3 { margin: 10px 0 8px; font-size: 17px; line-height: 1.25; } body.ty-home-experience-active .ty-hx-point-pill p { margin: 0; font-size: 12px; line-height: 1.45; } body.ty-home-experience-active .ty-hx-app-download { padding: clamp(18px, 2.7vw, 30px); } body.ty-home-experience-active .ty-hx-app-grid { gap: 16px; } body.ty-home-experience-active .ty-hx-app-card { background: linear-gradient(150deg, rgba(12, 27, 58, 0.92), rgba(15, 31, 70, 0.86)); border: 1px solid rgba(113, 184, 255, 0.36); box-shadow: 0 18px 30px rgba(5, 13, 35, 0.48), inset 0 0 0 1px rgba(187, 226, 255, 0.05); } body.ty-home-experience-active .ty-hx-app-card h3 { color: #e8f7ff; } body.ty-home-experience-active .ty-hx-qr { width: clamp(130px, 12vw, 170px); height: clamp(130px, 12vw, 170px); margin-bottom: 12px; } body.ty-home-experience-active .ty-hx-qr span { color: #d5ecff; } body.ty-home-experience-active .ty-click-pop { animation: tyClickPop 460ms cubic-bezier(.18,.89,.32,1.28); } @media (max-width: 1060px) { body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(310px, 58vw, 460px) !important; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 260px; max-width: 260px; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 260px; max-width: 260px; } body.ty-home-experience-active .ty-hx-ai-satellite { font-size: 10px; padding: 7px 10px; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-root { padding-top: 10px !important; padding-bottom: 56px !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: 500px !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(250px, 76vw, 350px) !important; top: 50%; } body.ty-home-experience-active .ty-hx-float-card { min-width: 150px; max-width: 170px; padding: 8px 9px; } body.ty-home-experience-active .ty-float-a { left: 2%; top: 23%; } body.ty-home-experience-active .ty-float-b { right: 2%; top: 19%; } body.ty-home-experience-active .ty-float-c { right: 2%; bottom: 22%; } body.ty-home-experience-active .ty-float-d { left: 2%; bottom: 22%; } body.ty-home-experience-active .ty-float-e { left: 50%; top: 8%; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 220px; max-width: 220px; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 220px; max-width: 220px; } body.ty-home-experience-active .ty-hx-app-grid { grid-template-columns: 1fr !important; } body.ty-home-experience-active .ty-ai-s1 { left: 4%; top: 18%; } body.ty-home-experience-active .ty-ai-s2 { right: 4%; top: 20%; } body.ty-home-experience-active .ty-ai-s3 { left: 4%; top: 48%; } body.ty-home-experience-active .ty-ai-s4 { right: 4%; bottom: 28%; } body.ty-home-experience-active .ty-ai-s5 { left: 50%; transform: translateX(-50%); bottom: 14%; } } @media (max-width: 480px) { body.ty-home-experience-active .ty-hx-feature-scroll { padding: 8px; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 200px; max-width: 200px; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 200px; max-width: 200px; } body.ty-home-experience-active .ty-hx-ai-satellite { font-size: 9px; padding: 6px 8px; } } /* ===== Final layout fix: topbar on, header off, single centered ecosystem ===== */ body.ty-home-experience-active #topbar { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative; z-index: 1200; } body.ty-home-experience-active header#header, body.ty-home-experience-active #header, body.ty-home-experience-active .st-header-2 header#header { display: block !important; visibility: visible !important; } body.ty-home-experience-active header#header .header, body.ty-home-experience-active #header .header, body.ty-home-experience-active .st-header-2 header#header .header { display: none !important; } body.ty-home-experience-active .st-header { display: block !important; } body.ty-home-experience-active .ty-hx-root { padding-top: 16px !important; padding-bottom: 36px !important; color: #102746 !important; overflow: hidden !important; } body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 18% 16%, rgba(126, 181, 255, 0.3) 0%, rgba(126, 181, 255, 0) 42%), radial-gradient(circle at 78% 66%, rgba(100, 245, 231, 0.24) 0%, rgba(100, 245, 231, 0) 44%), linear-gradient(176deg, #fefefe 0%, #eef8ff 56%, #e5f2ff 100%) !important; } body.ty-home-experience-active .ty-hx-wrap { width: 100% !important; max-width: 100% !important; padding-inline: clamp(8px, 1.4vw, 24px) !important; gap: 14px !important; } body.ty-home-experience-active .ty-hx-hero { margin: 0 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; max-width: 100% !important; } body.ty-home-experience-active .ty-hx-hero-shell { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-hero-copy-col { width: 100% !important; max-width: 980px !important; margin: 0 auto !important; text-align: center !important; } body.ty-home-experience-active .ty-hx-section-head p, body.ty-home-experience-active .ty-hx-copy, body.ty-home-experience-active .ty-hx-app-card p { color: #a8cce8 !important; } body.ty-home-experience-active .ty-hx-mini-tags { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; } body.ty-home-experience-active .ty-hx-mini-tags span { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(112, 178, 228, 0.42) !important; box-shadow: 0 4px 10px rgba(126, 167, 201, 0.18) !important; } body.ty-home-experience-active .ty-hx-feature-cloud, body.ty-home-experience-active .ty-hx-cinema { display: none !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(670px, 72vw, 980px) !important; width: 100% !important; max-width: min(100%, 1600px) !important; margin: 0 auto !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; } body.ty-home-experience-active .ty-hx-visual-scene::before, body.ty-home-experience-active .ty-hx-visual-scene::after { display: none !important; } body.ty-home-experience-active .ty-hx-bg-word { opacity: 0.16 !important; } body.ty-home-experience-active .ty-hx-tripyai-label { display: none !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(360px, 40vw, 620px) !important; top: 54% !important; } body.ty-home-experience-active .ty-hx-center-logo-shell { width: 64% !important; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(205, 235, 255, 0.82) 46%, rgba(100, 144, 255, 0.38) 72%, rgba(100, 144, 255, 0.08) 100%) !important; box-shadow: 0 0 0 10px rgba(153, 208, 255, 0.25), 0 0 86px rgba(81, 143, 255, 0.46), 0 34px 62px rgba(68, 131, 245, 0.30), inset 0 0 48px rgba(79, 139, 248, 0.25) !important; transform: translateZ(16px) !important; } body.ty-home-experience-active .ty-hx-center-logo { width: 86% !important; height: 86% !important; object-fit: contain !important; filter: drop-shadow(0 14px 22px rgba(16, 54, 108, 0.28)) !important; } body.ty-home-experience-active .ty-hx-lottie-shell, body.ty-home-experience-active .ty-hx-lottie, body.ty-home-experience-active .ty-hx-lottie-static, body.ty-home-experience-active .ty-hx-lottie-fallback { display: none !important; } body.ty-home-experience-active .ty-hx-ai-satellite { border: 0 !important; background: transparent !important; color: #1d588f !important; box-shadow: none !important; text-shadow: 0 8px 16px rgba(111, 162, 204, 0.36); font-weight: 700 !important; font-size: clamp(11px, 0.95vw, 14px) !important; letter-spacing: 0.02em !important; padding: 0 !important; } body.ty-home-experience-active .ty-ai-s1 { left: 13%; top: 8%; } body.ty-home-experience-active .ty-ai-s2 { right: 13%; top: 10%; } body.ty-home-experience-active .ty-ai-s3 { left: 8%; top: 46%; } body.ty-home-experience-active .ty-ai-s4 { right: 10%; bottom: 24%; } body.ty-home-experience-active .ty-ai-s5 { left: 50%; bottom: 8%; transform: translateX(-50%); } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(220px, 27vw, 350px); position: absolute; inset: 0; z-index: 7; pointer-events: none; animation: tySpin 72s linear infinite reverse; } body.ty-home-experience-active .ty-hx-orbit-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--label-angle)) translateY(calc(var(--label-radius) * -1)) rotate(calc(-1 * var(--label-angle))); font-size: clamp(11px, 0.92vw, 14px); font-weight: 700; color: #205f95; white-space: nowrap; text-shadow: 0 6px 14px rgba(93, 148, 193, 0.34); } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(265px, 31vw, 430px); position: absolute; inset: 0; z-index: 8; pointer-events: none; animation: tySpin 112s linear infinite; } body.ty-home-experience-active .ty-hx-signal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--sig-angle)) translateY(calc(var(--sig-radius) * -1)) rotate(calc(-1 * var(--sig-angle))); max-width: clamp(130px, 13vw, 220px); text-align: center; font-size: clamp(11px, 0.9vw, 13px); line-height: 1.2; font-weight: 700; color: rgba(27, 82, 130, 0.95); text-shadow: 0 8px 14px rgba(111, 162, 204, 0.32); animation: tySignalPulse 6s ease-in-out infinite var(--sig-delay); } body.ty-home-experience-active .ty-hx-image-orbit { inset: 10% !important; z-index: 9 !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: clamp(130px, 12vw, 196px) !important; height: clamp(90px, 8.8vw, 136px) !important; border-radius: 16px !important; border: 1px solid rgba(113, 178, 227, 0.52) !important; box-shadow: 0 14px 26px rgba(74, 120, 168, 0.25) !important; } body.ty-home-experience-active .ty-hx-live-ribbon { margin: 4px auto 0 !important; width: 100% !important; max-width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: hidden !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee { border-radius: 20px !important; border: 1px solid rgba(118, 184, 231, 0.46) !important; background: linear-gradient(145deg, rgba(246, 253, 255, 0.94), rgba(236, 247, 255, 0.92)) !important; padding: 10px !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee-card { min-width: 174px !important; max-width: 174px !important; height: 104px !important; } body.ty-home-experience-active .ty-hx-bottom-cta { margin-top: 6px !important; justify-content: center !important; } body.ty-home-experience-active .ty-hx-app-download { margin-top: 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } body.ty-home-experience-active .ty-hx-app-download .ty-hx-section-head { max-width: 980px; margin: 0 auto; text-align: center; } body.ty-home-experience-active .ty-hx-app-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; width: 100% !important; max-width: 980px !important; margin: 0 auto !important; } body.ty-home-experience-active .ty-hx-app-card { min-height: 0 !important; padding: 18px !important; border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(114, 185, 230, 0.50) !important; background: linear-gradient(150deg, rgba(249, 254, 255, 0.95), rgba(236, 247, 255, 0.9)) !important; box-shadow: 0 14px 28px rgba(103, 153, 190, 0.2) !important; } body.ty-home-experience-active .ty-hx-app-card h3 { color: #1c4f80 !important; } body.ty-home-experience-active .ty-hx-qr { width: clamp(140px, 13vw, 176px) !important; height: clamp(140px, 13vw, 176px) !important; margin: 0 auto 10px !important; background: linear-gradient(145deg, rgba(233, 248, 255, 0.94), rgba(255, 255, 255, 0.95)) !important; border: 1px solid rgba(110, 184, 229, 0.5) !important; box-shadow: 0 12px 24px rgba(102, 152, 188, 0.22) !important; } body.ty-home-experience-active .ty-hx-qr::before, body.ty-home-experience-active .ty-hx-qr::after { display: none !important; } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(560px, 84vw, 760px) !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(300px, 62vw, 470px) !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(210px, 33vw, 300px); } body.ty-home-experience-active .ty-hx-signal { max-width: 120px !important; font-size: 10px !important; } body.ty-home-experience-active .ty-hx-app-grid { grid-template-columns: 1fr !important; max-width: 560px !important; } } @media (max-width: 767px) { body.ty-home-experience-active #topbar { padding-left: 12px !important; padding-right: 12px !important; } body.ty-home-experience-active .ty-hx-wrap { padding-inline: 8px !important; } body.ty-home-experience-active .ty-hx-hero-copy-col { padding-inline: 4px !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: 500px !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(250px, 76vw, 350px) !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(150px, 40vw, 210px); } body.ty-home-experience-active .ty-hx-orbit-label { font-size: 9px !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(160px, 43vw, 240px); } body.ty-home-experience-active .ty-hx-signal { max-width: 90px !important; font-size: 8px !important; line-height: 1.15 !important; } body.ty-home-experience-active .ty-ai-s1 { left: 8%; top: 14%; } body.ty-home-experience-active .ty-ai-s2 { right: 8%; top: 16%; } body.ty-home-experience-active .ty-ai-s3 { left: 4%; top: 48%; } body.ty-home-experience-active .ty-ai-s4 { right: 4%; bottom: 26%; } body.ty-home-experience-active .ty-ai-s5 { bottom: 12%; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee-card { min-width: 148px !important; max-width: 148px !important; height: 92px !important; } } /* ===== Orbit Refresh (Light Galaxy + Added Story Sections) ===== */ body.ty-home-experience-active .ty-hx-root { color: #163a62 !important; padding-top: 12px !important; padding-bottom: clamp(58px, 7vw, 96px) !important; } body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 17% 16%, rgba(136, 186, 255, 0.36) 0%, rgba(136, 186, 255, 0) 36%), radial-gradient(circle at 82% 62%, rgba(121, 248, 231, 0.3) 0%, rgba(121, 248, 231, 0) 38%), radial-gradient(circle at 48% 42%, rgba(166, 164, 255, 0.24) 0%, rgba(166, 164, 255, 0) 44%), linear-gradient(175deg, #fbfeff 0%, #ebf6ff 52%, #e2f0ff 100%) !important; radial-gradient(circle at 18% 18%, rgba(0, 212, 255, 0.18) 0%, rgba(0, 212, 255, 0) 40%), radial-gradient(circle at 82% 62%, rgba(255, 78, 205, 0.14) 0%, rgba(255, 78, 205, 0) 46%), radial-gradient(circle at 46% 40%, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0) 48%), radial-gradient(ellipse at bottom, #0b1a33 0%, #020617 62%, #00030e 100%) !important; } body.ty-home-experience-active .ty-hx-grid { opacity: 0.06 !important; } body.ty-home-experience-active .ty-hx-noise { opacity: 0.14 !important; } body.ty-home-experience-active .ty-hx-stars { position: absolute; inset: -10% -8%; z-index: 1; pointer-events: none; opacity: 0.58; background-image: radial-gradient(circle at 30px 42px, rgba(255, 255, 255, 0.85) 1.1px, transparent 2px), radial-gradient(circle at 110px 90px, rgba(255, 255, 255, 0.65) 1px, transparent 2px), radial-gradient(circle at 220px 150px, rgba(255, 255, 255, 0.42) 1px, transparent 2px), radial-gradient(circle at 80px 220px, rgba(0, 212, 255, 0.22) 1px, transparent 2px), radial-gradient(circle at 260px 60px, rgba(255, 78, 205, 0.18) 1px, transparent 2px); background-size: 260px 260px, 360px 360px, 520px 520px, 680px 680px, 820px 820px; animation: tyStarDriftA 78s linear infinite; } body.ty-home-experience-active .ty-hx-stars-b { opacity: 0.36; filter: blur(0.35px); transform: scale(1.08); animation: tyStarDriftB 86s linear infinite; } body.ty-home-experience-active .ty-hx-wrap { max-width: min(1400px, 100%) !important; margin: 0 auto !important; padding-inline: 0 !important; gap: clamp(16px, 2.3vw, 30px) !important; } body.ty-home-experience-active .ty-hx-hero-copy-col { max-width: 960px !important; } body.ty-home-experience-active .ty-hx-orbit-hint { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(112, 182, 231, 0.52); background: rgba(250, 254, 255, 0.88); color: #1c5f99; font-size: clamp(11px, 0.9vw, 14px); line-height: 1.2; font-weight: 700; letter-spacing: 0.01em; z-index: 20; box-shadow: 0 10px 22px rgba(109, 162, 201, 0.22); } body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(560px, 62vw, 760px) !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(290px, 33vw, 460px) !important; top: 52% !important; } body.ty-home-experience-active .ty-hx-center-logo-shell { position: relative; width: 54% !important; border-radius: 50%; background: radial-gradient(circle at 44% 40%, #ffffff 0%, #ffffff 55%, #f1f8ff 76%, rgba(176, 209, 242, 0.62) 100%) !important; box-shadow: 0 0 0 8px rgba(193, 224, 249, 0.62), 0 0 44px rgba(117, 166, 217, 0.4), 0 20px 34px rgba(113, 156, 201, 0.24), inset 0 0 34px rgba(174, 214, 247, 0.65) !important; } body.ty-home-experience-active .ty-hx-center-logo-shell::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; border: 1px solid rgba(130, 181, 227, 0.5); box-shadow: 0 0 38px rgba(131, 178, 222, 0.2); } body.ty-home-experience-active .ty-hx-center-logo { width: 70% !important; height: 70% !important; filter: drop-shadow(0 8px 14px rgba(80, 130, 180, 0.2)) !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(188px, 21vw, 278px) !important; } body.ty-home-experience-active .ty-hx-orbit-label { font-size: clamp(10px, 0.8vw, 12px) !important; color: #2f6699 !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(232px, 26vw, 350px) !important; } body.ty-home-experience-active .ty-hx-signal { max-width: clamp(110px, 11vw, 180px) !important; font-size: clamp(10px, 0.84vw, 12px) !important; color: rgba(35, 88, 136, 0.82) !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(150px, 17vw, 228px) !important; inset: 14% !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: clamp(102px, 9.2vw, 142px) !important; height: clamp(74px, 7vw, 108px) !important; border-radius: 12px !important; } body.ty-home-experience-active .ty-hx-section, body.ty-home-experience-active .ty-hx-app-download { border-radius: 22px !important; border: 1px solid rgba(108, 177, 225, 0.42) !important; background: linear-gradient(160deg, rgba(247, 253, 255, 0.92), rgba(239, 248, 255, 0.9)) !important; box-shadow: 0 16px 30px rgba(111, 160, 196, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.84) !important; padding: clamp(18px, 2.4vw, 28px) !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee { border-color: rgba(105, 177, 226, 0.46) !important; background: linear-gradient(150deg, rgba(244, 252, 255, 0.96), rgba(236, 247, 255, 0.94)) !important; } body.ty-home-experience-active .ty-hx-section-head h2, body.ty-home-experience-active .ty-hx-app-card h3, body.ty-home-experience-active .ty-hx-card h3, body.ty-home-experience-active .ty-hx-service-tile h3, body.ty-home-experience-active .ty-hx-ai-chip h3, body.ty-home-experience-active .ty-hx-point-pill h3 { color: #143b66 !important; } body.ty-home-experience-active .ty-hx-section-head p, body.ty-home-experience-active .ty-hx-copy, body.ty-home-experience-active .ty-hx-app-card p, body.ty-home-experience-active .ty-hx-card p, body.ty-home-experience-active .ty-hx-service-tile p, body.ty-home-experience-active .ty-hx-ai-chip p, body.ty-home-experience-active .ty-hx-point-pill p { color: #4e6f90 !important; } body.ty-home-experience-active .ty-hx-grid-cards { gap: 14px !important; } body.ty-home-experience-active .ty-hx-card { min-height: 188px; background: linear-gradient(150deg, rgba(249, 254, 255, 0.96), rgba(241, 248, 255, 0.94)) !important; border: 1px solid rgba(109, 178, 225, 0.46) !important; box-shadow: 0 14px 28px rgba(109, 156, 192, 0.18) !important; } body.ty-home-experience-active .ty-hx-feature-scroll, body.ty-home-experience-active .ty-hx-ai-strip { cursor: grab; } body.ty-home-experience-active .ty-hx-feature-scroll.is-dragging, body.ty-home-experience-active .ty-hx-ai-strip.is-dragging { cursor: grabbing; } body.ty-home-experience-active .ty-hx-feature-scroll { margin-top: 14px !important; border: 1px solid rgba(112, 181, 228, 0.44) !important; background: linear-gradient(155deg, rgba(241, 249, 255, 0.95), rgba(233, 245, 255, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.84), 0 12px 20px rgba(120, 169, 203, 0.16) !important; } body.ty-home-experience-active .ty-hx-feature-track { gap: 14px !important; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 250px !important; max-width: 250px !important; transform: none !important; background: linear-gradient(152deg, rgba(250, 254, 255, 0.96), rgba(241, 248, 255, 0.95)) !important; border: 1px solid rgba(115, 181, 226, 0.44) !important; box-shadow: 0 12px 24px rgba(120, 165, 198, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.78) !important; } body.ty-home-experience-active .ty-hx-point-index { color: #1d5a90 !important; border-color: rgba(107, 178, 226, 0.52) !important; background: linear-gradient(120deg, rgba(210, 242, 255, 0.94), rgba(231, 251, 243, 0.92)) !important; } body.ty-home-experience-active .ty-hx-service-grid { margin-top: 16px !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; } body.ty-home-experience-active .ty-hx-service-tile { min-height: 194px; text-align: left; border: 1px solid rgba(111, 180, 227, 0.44) !important; background: linear-gradient(150deg, rgba(250, 254, 255, 0.96), rgba(240, 248, 255, 0.94)) !important; box-shadow: 0 14px 24px rgba(114, 163, 199, 0.14) !important; } body.ty-home-experience-active .ty-hx-service-media { width: 76px !important; height: 76px !important; margin: 0 0 12px !important; } body.ty-home-experience-active .ty-hx-service-kicker { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; border-radius: 999px; border: 1px solid rgba(107, 177, 224, 0.5); background: linear-gradient(120deg, rgba(210, 241, 255, 0.94), rgba(238, 251, 246, 0.92)); color: #1d5e95; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; } body.ty-home-experience-active .ty-hx-ai-stack { padding: clamp(18px, 2.4vw, 28px) !important; } body.ty-home-experience-active .ty-hx-ai-strip { margin-top: 12px !important; gap: 12px !important; padding: 8px 0 10px !important; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 264px !important; max-width: 264px !important; border: 1px solid rgba(114, 184, 229, 0.44) !important; background: linear-gradient(150deg, rgba(250, 254, 255, 0.96), rgba(240, 248, 255, 0.94)) !important; box-shadow: 0 12px 24px rgba(114, 162, 198, 0.15) !important; } body.ty-home-experience-active .ty-hx-ai-dot { background: radial-gradient(circle, #4cd4ff 0%, #3b7fe0 70%) !important; } body.ty-home-experience-active .ty-hx-app-grid { max-width: 980px !important; } body.ty-home-experience-active .ty-hx-app-card { background: linear-gradient(150deg, rgba(250, 254, 255, 0.95), rgba(240, 248, 255, 0.92)) !important; border: 1px solid rgba(110, 182, 227, 0.44) !important; box-shadow: 0 14px 24px rgba(111, 158, 194, 0.18) !important; } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(250px, 50vw, 360px) !important; } body.ty-home-experience-active .ty-hx-orbit-hint { top: 11%; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(118px, 24vw, 166px) !important; inset: 16% !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(150px, 31vw, 208px) !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(172px, 34vw, 248px) !important; } body.ty-home-experience-active .ty-hx-signal { display: none !important; } body.ty-home-experience-active .ty-hx-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-root { padding-top: 8px !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: 430px !important; } body.ty-home-experience-active .ty-hx-orbit-hint { top: 5%; font-size: 10px; padding: 6px 10px; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(200px, 66vw, 280px) !important; top: 56% !important; } body.ty-home-experience-active .ty-hx-center-logo-shell { width: 58% !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(92px, 33vw, 132px) !important; inset: 20% !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: 84px !important; height: 62px !important; } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(n + 7) { display: none !important; } body.ty-home-experience-active .ty-hx-orbit-label { font-size: 8px !important; } body.ty-home-experience-active .ty-hx-point-pill, body.ty-home-experience-active .ty-hx-ai-chip { min-width: 214px !important; max-width: 214px !important; } body.ty-home-experience-active .ty-hx-service-grid { grid-template-columns: 1fr !important; } } /* ===== Galaxy Rebuild V3 (hard override) ===== */ body.ty-home-experience-active .ty-hx-root { color: #d9ecff !important; padding-top: 0 !important; padding-bottom: clamp(70px, 8.2vw, 112px) !important; } body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 18% 20%, rgba(10, 78, 151, 0.46) 0%, rgba(10, 78, 151, 0) 36%), radial-gradient(circle at 82% 64%, rgba(12, 172, 196, 0.26) 0%, rgba(12, 172, 196, 0) 42%), radial-gradient(circle at 52% 50%, rgba(107, 63, 189, 0.26) 0%, rgba(107, 63, 189, 0) 40%), linear-gradient(170deg, #040916 0%, #081631 44%, #060d23 100%) !important; } body.ty-home-experience-active .ty-hx-map-layer { opacity: 0.08 !important; mix-blend-mode: soft-light !important; } body.ty-home-experience-active .ty-hx-grid { opacity: 0.32 !important; } body.ty-home-experience-active .ty-hx-noise { opacity: 0.22 !important; } body.ty-home-experience-active .ty-hx-stars, body.ty-home-experience-active .ty-hx-stars-b { opacity: 0.62 !important; } body.ty-home-experience-active .ty-hx-wrap { max-width: min(1450px, 100%) !important; margin: 0 auto !important; padding-inline: clamp(10px, 1.5vw, 22px) !important; gap: clamp(20px, 3vw, 34px) !important; } body.ty-home-experience-active .ty-hx-hero-copy-col { max-width: 1120px !important; } body.ty-home-experience-active .ty-hx-title { font-size: clamp(42px, 6.3vw, 88px) !important; line-height: 1.01 !important; } body.ty-home-experience-active .ty-hx-copy { max-width: 860px !important; color: #9db9d5 !important; } body.ty-home-experience-active .ty-hx-mini-tags span { background: rgba(13, 28, 62, 0.78) !important; border-color: rgba(103, 181, 240, 0.44) !important; box-shadow: 0 10px 20px rgba(4, 11, 29, 0.46) !important; color: #d4eeff !important; } body.ty-home-experience-active .ty-hx-orbit-hint { background: rgba(6, 32, 67, 0.74) !important; border-color: rgba(53, 199, 240, 0.56) !important; color: #35d6ff !important; box-shadow: 0 12px 20px rgba(2, 13, 38, 0.52) !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(680px, 74vw, 980px) !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(360px, 40vw, 620px) !important; top: 52% !important; } body.ty-home-experience-active .ty-hx-center-logo-shell { width: 58% !important; background: radial-gradient(circle at 47% 38%, rgba(255, 255, 255, 1) 0%, rgba(248, 252, 255, 0.97) 58%, rgba(194, 224, 255, 0.78) 82%, rgba(125, 169, 230, 0.42) 100%) !important; box-shadow: 0 0 0 9px rgba(206, 230, 251, 0.74), 0 0 62px rgba(114, 168, 234, 0.52), 0 22px 38px rgba(87, 134, 195, 0.32), inset 0 0 42px rgba(173, 214, 248, 0.86) !important; } body.ty-home-experience-active .ty-hx-center-logo { width: 72% !important; height: 72% !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(218px, 25vw, 336px) !important; } body.ty-home-experience-active .ty-hx-orbit-label { color: #8cb7de !important; font-size: clamp(11px, 0.95vw, 14px) !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(250px, 29vw, 420px) !important; } body.ty-home-experience-active .ty-hx-signal { color: rgba(148, 191, 229, 0.9) !important; font-size: clamp(10px, 0.86vw, 12px) !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(175px, 19vw, 266px) !important; inset: 11% !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: clamp(122px, 11vw, 172px) !important; height: clamp(86px, 7.8vw, 126px) !important; border: 1px solid rgba(116, 180, 233, 0.52) !important; box-shadow: 0 14px 30px rgba(4, 15, 40, 0.6), 0 0 24px rgba(54, 149, 221, 0.28) !important; background: rgba(10, 24, 50, 0.88) !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee { background: linear-gradient(145deg, rgba(8, 21, 48, 0.84), rgba(10, 17, 39, 0.84)) !important; border-color: rgba(101, 173, 228, 0.4) !important; } body.ty-home-experience-active .ty-hx-marquee-card { border-color: rgba(109, 182, 231, 0.42) !important; box-shadow: 0 12px 24px rgba(3, 11, 29, 0.58), 0 0 18px rgba(53, 160, 236, 0.2) !important; } body.ty-home-experience-active .ty-hx-section, body.ty-home-experience-active .ty-hx-app-download { border: 1px solid rgba(96, 167, 223, 0.36) !important; background: linear-gradient(160deg, rgba(7, 19, 43, 0.9), rgba(8, 13, 30, 0.92)) !important; box-shadow: 0 24px 42px rgba(3, 10, 29, 0.62), inset 0 0 0 1px rgba(148, 207, 255, 0.05) !important; } body.ty-home-experience-active .ty-hx-section-head h2 { font-size: clamp(40px, 6vw, 98px); line-height: 0.95; letter-spacing: -0.03em; background: linear-gradient(90deg, #7fe9ff 0%, #7ebfff 34%, #b18cff 70%, #73f7d2 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.ty-home-experience-active .ty-hx-section-head p { color: #a8cce8 !important; font-size: clamp(16px, 1.3vw, 24px); } body.ty-home-experience-active .ty-hx-section-head p:hover { color: #dff2ff !important; opacity: 1 !important; } body.ty-home-experience-active .ty-hx-feature-scroll { border: 1px solid rgba(98, 169, 226, 0.42) !important; background: linear-gradient(160deg, rgba(6, 19, 44, 0.86), rgba(8, 15, 35, 0.88)) !important; box-shadow: inset 0 0 0 1px rgba(151, 209, 255, 0.05), 0 16px 30px rgba(2, 10, 30, 0.46) !important; } body.ty-home-experience-active .ty-hx-feature-track { gap: 14px !important; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 292px !important; max-width: 292px !important; background: linear-gradient(152deg, rgba(10, 26, 58, 0.92), rgba(8, 16, 38, 0.94)) !important; border: 1px solid rgba(102, 176, 232, 0.44) !important; box-shadow: 0 14px 24px rgba(2, 8, 25, 0.56), inset 0 0 0 1px rgba(148, 207, 255, 0.05) !important; } body.ty-home-experience-active .ty-hx-point-pill h3 { color: #d8ecff !important; font-size: 18px !important; } body.ty-home-experience-active .ty-hx-point-pill p { color: #9cb8d5 !important; } body.ty-home-experience-active .ty-hx-point-index { color: #9de7ff !important; border-color: rgba(76, 203, 243, 0.54) !important; background: linear-gradient(120deg, rgba(17, 88, 151, 0.5), rgba(17, 142, 133, 0.38)) !important; } body.ty-home-experience-active .ty-hx-partner-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card { min-height: 252px; border-radius: 20px; background: linear-gradient(150deg, rgba(7, 22, 52, 0.92), rgba(8, 14, 32, 0.94)) !important; border: 1px solid rgba(94, 169, 228, 0.36) !important; box-shadow: 0 16px 34px rgba(2, 10, 30, 0.58), inset 0 0 0 1px rgba(134, 198, 246, 0.05) !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card:nth-child(1) { border-color: rgba(33, 210, 255, 0.52) !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card:nth-child(2) { border-color: rgba(206, 68, 255, 0.42) !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card:nth-child(3) { border-color: rgba(53, 255, 180, 0.48) !important; } body.ty-home-experience-active .ty-hx-card-icon { width: 76px; height: 76px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid rgba(92, 170, 228, 0.42); background: linear-gradient(145deg, rgba(10, 33, 72, 0.84), rgba(10, 21, 49, 0.86)); box-shadow: 0 12px 22px rgba(3, 11, 29, 0.58); } body.ty-home-experience-active .ty-hx-card-icon::before { font-size: 34px; line-height: 1; } body.ty-home-experience-active .ty-hx-card-icon-briefcase::before { content: "AD"; font-weight: 700; color: #41ddff; } body.ty-home-experience-active .ty-hx-card-icon-percent::before { content: "%"; font-weight: 800; color: #e666ff; } body.ty-home-experience-active .ty-hx-card-icon-puzzle::before { content: "PL"; font-weight: 700; color: #4dffbf; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card h3 { color: #e8f6ff !important; font-size: clamp(28px, 2.4vw, 42px); line-height: 1.05; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card p { color: #9ab6d3 !important; font-size: 21px; line-height: 1.5; } body.ty-home-experience-active .ty-hx-service-scroll { margin-top: 16px; border-radius: 24px; border: 1px solid rgba(96, 169, 226, 0.4); background: linear-gradient(155deg, rgba(7, 20, 46, 0.88), rgba(8, 14, 32, 0.9)); box-shadow: inset 0 0 0 1px rgba(149, 209, 255, 0.05), 0 20px 34px rgba(2, 10, 29, 0.54); overflow-x: auto; overflow-y: hidden; padding: 16px; cursor: grab; } body.ty-home-experience-active .ty-hx-service-scroll.is-dragging { cursor: grabbing; } body.ty-home-experience-active .ty-hx-service-track { display: flex; gap: 16px; width: max-content; animation: tyServiceMarquee 72s linear infinite; } body.ty-home-experience-active .ty-hx-service-scroll:hover .ty-hx-service-track { animation-play-state: paused; } body.ty-home-experience-active .ty-hx-service-showcase { width: clamp(254px, 19vw, 320px); min-height: 360px; border-radius: 22px; border: 1px solid rgba(104, 178, 231, 0.38); background: linear-gradient(150deg, rgba(9, 25, 58, 0.92), rgba(10, 15, 34, 0.94)); box-shadow: 0 16px 34px rgba(2, 10, 28, 0.62), inset 0 0 0 1px rgba(146, 207, 255, 0.05); padding: 20px; position: relative; } body.ty-home-experience-active .ty-hx-service-corner { position: absolute; right: 0; top: 0; width: 0; height: 0; border-top: 48px solid rgba(132, 176, 255, 0.24); border-left: 48px solid transparent; } body.ty-home-experience-active .ty-hx-service-emoji { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 18px; border: 1px solid rgba(103, 176, 228, 0.44); background: linear-gradient(145deg, rgba(10, 34, 72, 0.86), rgba(9, 22, 48, 0.9)); box-shadow: 0 10px 22px rgba(2, 10, 28, 0.62); margin-bottom: 14px; } body.ty-home-experience-active .ty-hx-service-emoji::before { font-size: 34px; line-height: 1; font-weight: 700; color: #dff4ff; } body.ty-home-experience-active .ty-hx-service-emoji-hotel::before { content: "H"; } body.ty-home-experience-active .ty-hx-service-emoji-tour::before { content: "T"; } body.ty-home-experience-active .ty-hx-service-emoji-activity::before { content: "A"; } body.ty-home-experience-active .ty-hx-service-emoji-rental::before { content: "R"; } body.ty-home-experience-active .ty-hx-service-emoji-car::before { content: "C"; } body.ty-home-experience-active .ty-hx-service-emoji-hotel::before { content: "🏨"; } body.ty-home-experience-active .ty-hx-service-emoji-tour::before { content: "🗺️"; } body.ty-home-experience-active .ty-hx-service-emoji-activity::before { content: "🎯"; } body.ty-home-experience-active .ty-hx-service-emoji-rental::before { content: "🏡"; } body.ty-home-experience-active .ty-hx-service-emoji-car::before { content: "🚗"; } body.ty-home-experience-active .ty-hx-service-showcase h3 { margin: 0; font-size: clamp(40px, 3vw, 56px); line-height: 1; color: #c9f0ff; } body.ty-home-experience-active .ty-hx-service-showcase p { margin: 16px 0 0; color: #a7c2dd; font-size: 25px; line-height: 1.35; min-height: 98px; } body.ty-home-experience-active .ty-hx-service-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(105, 177, 230, 0.3); display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.ty-home-experience-active .ty-hx-service-foot span { color: #8fb0ce; font-size: 22px; font-weight: 600; } body.ty-home-experience-active .ty-hx-service-foot strong { color: #e8f6ff; font-size: 34px; font-weight: 700; white-space: nowrap; } body.ty-home-experience-active .ty-hx-service-tone-hotel h3 { color: #22d3ff; } body.ty-home-experience-active .ty-hx-service-tone-tour h3 { color: #9a67ff; } body.ty-home-experience-active .ty-hx-service-tone-activity h3 { color: #ff4db1; } body.ty-home-experience-active .ty-hx-service-tone-rental h3 { color: #ffaa17; } body.ty-home-experience-active .ty-hx-service-tone-car h3 { color: #00d0a1; } body.ty-home-experience-active .ty-hx-activity-cloud { margin-top: 20px; border-radius: 16px; border: 1px solid rgba(96, 168, 223, 0.34); background: linear-gradient(145deg, rgba(9, 23, 52, 0.84), rgba(8, 15, 34, 0.9)); padding: 14px; } body.ty-home-experience-active .ty-hx-activity-cloud h3 { margin: 0 0 10px; color: #0f2b69; font-size: 16px; letter-spacing: 0.03em; text-transform: uppercase; } body.ty-home-experience-active .ty-hx-activity-pills { display: flex; flex-wrap: wrap; gap: 8px; } body.ty-home-experience-active .ty-hx-activity-pills span { border-radius: 999px; padding: 8px 12px; border: 1px solid rgba(107, 178, 227, 0.44); background: rgba(10, 30, 65, 0.72); color: #cfe7ff; font-size: 12px; font-weight: 700; } body.ty-home-experience-active .ty-hx-ai-layout { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; } body.ty-home-experience-active .ty-hx-ai-visual { position: relative; min-height: 420px; border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 64% 42%, rgba(46, 183, 237, 0.36) 0%, rgba(46, 183, 237, 0) 46%), linear-gradient(160deg, rgba(5, 18, 42, 0.9), rgba(8, 12, 30, 0.92)); } body.ty-home-experience-active .ty-hx-ai-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(98, 173, 226, 0.26); } body.ty-home-experience-active .ty-hx-ai-orbit-a { inset: 10%; } body.ty-home-experience-active .ty-hx-ai-orbit-b { inset: 20%; } body.ty-home-experience-active .ty-hx-ai-orbit-c { inset: 30%; } body.ty-home-experience-active .ty-hx-ai-core { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; background: radial-gradient(circle at 40% 32%, rgba(73, 206, 255, 0.9), rgba(61, 117, 245, 0.82)); box-shadow: 0 0 54px rgba(71, 177, 243, 0.48), inset 0 0 26px rgba(233, 247, 255, 0.2); } body.ty-home-experience-active .ty-hx-ai-core-inner { font-size: 58px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; color: #e7f8ff; text-shadow: 0 6px 18px rgba(9, 36, 78, 0.38); } body.ty-home-experience-active .ty-hx-ai-dot-node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #36ddff; box-shadow: 0 0 14px rgba(67, 224, 255, 0.8); animation: tyAiNodePulse 2.2s ease-in-out infinite; } body.ty-home-experience-active .ty-ai-node-a { left: 20%; top: 26%; } body.ty-home-experience-active .ty-ai-node-b { right: 18%; top: 34%; animation-delay: -0.6s; } body.ty-home-experience-active .ty-ai-node-c { left: 34%; bottom: 22%; animation-delay: -1.1s; } body.ty-home-experience-active .ty-ai-node-d { right: 26%; bottom: 20%; animation-delay: -1.7s; } body.ty-home-experience-active .ty-hx-ai-content h3 { margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: 0.95; background: linear-gradient(90deg, #7ce7ff 0%, #8eb2ff 44%, #b18eff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.ty-home-experience-active .ty-hx-ai-sub { margin: 10px 0 0; color: #a8bfd8 !important; font-size: clamp(19px, 1.8vw, 30px); } body.ty-home-experience-active .ty-hx-ai-typebox { margin-top: 16px; border-radius: 18px; border: 1px solid rgba(108, 177, 227, 0.4); background: linear-gradient(145deg, rgba(8, 24, 54, 0.92), rgba(8, 14, 32, 0.94)); box-shadow: 0 12px 24px rgba(2, 10, 28, 0.52), inset 0 0 0 1px rgba(148, 209, 255, 0.06); padding: 22px; color: #d6ebff; font-size: clamp(18px, 1.7vw, 32px); line-height: 1.4; } body.ty-home-experience-active .ty-hx-ai-badges { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.ty-home-experience-active .ty-hx-ai-badges span { border-radius: 999px; border: 1px solid rgba(106, 176, 227, 0.4); background: linear-gradient(145deg, rgba(7, 26, 58, 0.9), rgba(8, 14, 33, 0.92)); padding: 11px 14px; color: #d5eaff; font-size: clamp(14px, 1.2vw, 20px); font-weight: 700; } body.ty-home-experience-active .ty-hx-ai-strip { margin-top: 14px !important; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 300px !important; max-width: 300px !important; border-color: rgba(104, 176, 228, 0.42) !important; background: linear-gradient(152deg, rgba(9, 25, 57, 0.92), rgba(8, 14, 33, 0.94)) !important; } body.ty-home-experience-active .ty-hx-ai-chip h3 { color: #d8ecff !important; font-size: 16px !important; } body.ty-home-experience-active .ty-hx-ai-chip p { color: #9ab6d4 !important; } body.ty-home-experience-active .ty-hx-app-download .ty-hx-section-head h2 { font-size: clamp(34px, 5.4vw, 76px); } body.ty-home-experience-active .ty-hx-app-card { background: linear-gradient(150deg, rgba(8, 24, 52, 0.9), rgba(8, 14, 32, 0.92)) !important; border-color: rgba(103, 177, 229, 0.4) !important; } body.ty-home-experience-active .ty-hx-app-card h3 { color: #e4f5ff !important; } body.ty-home-experience-active .ty-hx-qr { background: linear-gradient(145deg, rgba(10, 34, 73, 0.82), rgba(9, 22, 48, 0.84)) !important; } @media (max-width: 1299px) { body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card h3 { font-size: clamp(24px, 2.7vw, 34px); } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card p { font-size: 16px; } body.ty-home-experience-active .ty-hx-service-showcase h3 { font-size: clamp(28px, 2.6vw, 40px); } body.ty-home-experience-active .ty-hx-service-showcase p { font-size: 16px; min-height: 76px; } body.ty-home-experience-active .ty-hx-service-foot span { font-size: 15px; } body.ty-home-experience-active .ty-hx-service-foot strong { font-size: 24px; } body.ty-home-experience-active .ty-hx-ai-layout { grid-template-columns: 1fr; } } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(560px, 88vw, 760px) !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(280px, 58vw, 430px) !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(130px, 26vw, 182px) !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(160px, 32vw, 226px) !important; } body.ty-home-experience-active .ty-hx-signal { display: none !important; } body.ty-home-experience-active .ty-hx-partner-cards { grid-template-columns: 1fr !important; } body.ty-home-experience-active .ty-hx-service-showcase { width: 250px; min-height: 312px; } body.ty-home-experience-active .ty-hx-ai-badges { grid-template-columns: 1fr; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-title { font-size: clamp(36px, 11vw, 56px) !important; } body.ty-home-experience-active .ty-hx-copy { font-size: 14px; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: 500px !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(220px, 68vw, 300px) !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: 94px !important; height: 66px !important; } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(n + 7) { display: none !important; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 240px !important; max-width: 240px !important; } body.ty-home-experience-active .ty-hx-service-showcase { width: 236px; min-height: 288px; padding: 16px; } body.ty-home-experience-active .ty-hx-service-emoji { font-size: 42px; } body.ty-home-experience-active .ty-hx-service-showcase h3 { font-size: 30px !important; } body.ty-home-experience-active .ty-hx-service-showcase p { font-size: 14px !important; min-height: 64px; } body.ty-home-experience-active .ty-hx-service-foot span { font-size: 13px !important; } body.ty-home-experience-active .ty-hx-service-foot strong { font-size: 20px !important; } body.ty-home-experience-active .ty-hx-ai-visual { min-height: 320px; } body.ty-home-experience-active .ty-hx-ai-core { width: 150px; height: 150px; } body.ty-home-experience-active .ty-hx-ai-core-inner { font-size: 48px; } body.ty-home-experience-active .ty-hx-ai-typebox { font-size: 16px; padding: 16px; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 230px !important; max-width: 230px !important; } } /* ===== Final Arrangement V4 (single source of truth) ===== */ body.ty-home-experience-active .ty-hx-root, body.ty-home-experience-active .ty-hx-root * { box-sizing: border-box; } body.ty-home-experience-active .ty-hx-root { color: #d6ebff !important; overflow: hidden !important; } body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 20% 18%, rgba(13, 87, 170, 0.45) 0%, rgba(13, 87, 170, 0) 34%), radial-gradient(circle at 82% 64%, rgba(16, 181, 216, 0.26) 0%, rgba(16, 181, 216, 0) 38%), radial-gradient(circle at 50% 48%, rgba(132, 80, 222, 0.24) 0%, rgba(132, 80, 222, 0) 42%), linear-gradient(175deg, #040916 0%, #07142e 46%, #060c20 100%) !important; } body.ty-home-experience-active .ty-hx-map-layer { display: none !important; } body.ty-home-experience-active .ty-hx-grid { opacity: 0.26 !important; } body.ty-home-experience-active .ty-hx-noise { opacity: 0.24 !important; } body.ty-home-experience-active .ty-hx-stars, body.ty-home-experience-active .ty-hx-stars-b { opacity: 0.7 !important; filter: none !important; } body.ty-home-experience-active .ty-hx-wrap { max-width: 1400px !important; margin: 0 auto !important; padding-inline: clamp(10px, 1.4vw, 22px) !important; gap: clamp(18px, 2.6vw, 34px) !important; } body.ty-home-experience-active .ty-hx-wrap > * { width: min(1280px, 100%) !important; margin-left: auto !important; margin-right: auto !important; } body.ty-home-experience-active .ty-hx-title { font-size: clamp(38px, 5.5vw, 72px) !important; line-height: 1.02 !important; text-transform: uppercase; letter-spacing: 0.02em; } body.ty-home-experience-active .ty-hx-copy { max-width: 860px !important; color: #9fbad6 !important; } body.ty-home-experience-active .ty-hx-orbit-hint { background: rgba(7, 36, 73, 0.8) !important; border: 1px solid rgba(51, 199, 241, 0.56) !important; color: #34d8ff !important; box-shadow: 0 10px 22px rgba(3, 12, 33, 0.55) !important; } body.ty-home-experience-active .ty-hx-visual-scene { position: relative !important; min-height: clamp(640px, 72vw, 900px) !important; display: flex !important; align-items: stretch !important; overflow-x: auto !important; overflow-y: hidden !important; cursor: grab !important; border-radius: 26px !important; border: 1px solid rgba(101, 172, 228, 0.34) !important; background: radial-gradient(circle at 50% 50%, rgba(68, 146, 232, 0.16) 0%, rgba(68, 146, 232, 0) 52%), linear-gradient(160deg, rgba(7, 19, 43, 0.82), rgba(8, 13, 31, 0.9)) !important; box-shadow: 0 24px 42px rgba(2, 9, 28, 0.62), inset 0 0 0 1px rgba(137, 198, 245, 0.05) !important; scrollbar-width: none; } body.ty-home-experience-active .ty-hx-visual-scene.is-dragging { cursor: grabbing !important; } body.ty-home-experience-active .ty-hx-visual-scene::-webkit-scrollbar { display: none; } body.ty-home-experience-active .ty-hx-orbit-canvas { position: relative; flex: 0 0 clamp(1380px, 122vw, 1860px); min-height: inherit; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(330px, 36vw, 560px) !important; top: 54% !important; } body.ty-home-experience-active .ty-hx-center-logo-shell { width: 56% !important; background: radial-gradient(circle at 46% 40%, #ffffff 0%, #f9fcff 58%, rgba(214, 235, 255, 0.9) 82%, rgba(137, 184, 235, 0.48) 100%) !important; box-shadow: 0 0 0 8px rgba(212, 233, 251, 0.7), 0 0 52px rgba(110, 163, 228, 0.5), 0 20px 34px rgba(75, 124, 188, 0.32), inset 0 0 40px rgba(176, 216, 248, 0.8) !important; } body.ty-home-experience-active .ty-hx-center-logo { width: 70% !important; height: 70% !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(208px, 23vw, 314px) !important; } body.ty-home-experience-active .ty-hx-orbit-label { color: #90b8df !important; font-size: clamp(11px, 0.92vw, 13px) !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(245px, 27vw, 390px) !important; } body.ty-home-experience-active .ty-hx-signal { color: rgba(149, 191, 229, 0.88) !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(170px, 19vw, 248px) !important; inset: 13% !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: clamp(116px, 10.2vw, 162px) !important; height: clamp(80px, 7.2vw, 118px) !important; border-radius: 14px !important; border: 1px solid rgba(111, 179, 232, 0.5) !important; box-shadow: 0 14px 28px rgba(2, 10, 30, 0.6), 0 0 22px rgba(53, 157, 235, 0.25) !important; background: rgba(9, 23, 50, 0.88) !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee { background: linear-gradient(145deg, rgba(7, 20, 46, 0.82), rgba(8, 14, 33, 0.88)) !important; border-color: rgba(98, 171, 228, 0.4) !important; } body.ty-home-experience-active .ty-hx-section, body.ty-home-experience-active .ty-hx-app-download { border-radius: 22px !important; border: 1px solid rgba(98, 170, 226, 0.34) !important; background: linear-gradient(160deg, rgba(7, 19, 43, 0.88), rgba(8, 13, 31, 0.92)) !important; box-shadow: 0 20px 36px rgba(2, 9, 28, 0.58), inset 0 0 0 1px rgba(147, 208, 255, 0.05) !important; padding: clamp(18px, 2.4vw, 28px) !important; } body.ty-home-experience-active .ty-hx-section-head h2 { font-size: clamp(32px, 3.8vw, 58px) !important; line-height: 1.04 !important; letter-spacing: 0.01em !important; text-transform: uppercase; } body.ty-home-experience-active .ty-hx-section-head p { color: #96b2cf !important; font-size: clamp(15px, 1.08vw, 18px) !important; } body.ty-home-experience-active .ty-hx-feature-scroll { border: 1px solid rgba(101, 172, 228, 0.4) !important; background: linear-gradient(160deg, rgba(6, 19, 44, 0.86), rgba(8, 14, 33, 0.9)) !important; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 276px !important; max-width: 276px !important; background: linear-gradient(152deg, rgba(9, 24, 55, 0.92), rgba(8, 14, 34, 0.94)) !important; border: 1px solid rgba(102, 175, 232, 0.44) !important; } body.ty-home-experience-active .ty-hx-point-pill h3 { font-size: 16px !important; color: #d9ecff !important; } body.ty-home-experience-active .ty-hx-point-pill p { color: #9ab7d4 !important; } body.ty-home-experience-active .ty-hx-partner-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card { min-height: 220px !important; border-radius: 20px !important; background: linear-gradient(150deg, rgba(8, 23, 52, 0.92), rgba(8, 14, 33, 0.94)) !important; border: 1px solid rgba(100, 173, 230, 0.4) !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card h3 { font-size: clamp(26px, 2.4vw, 36px) !important; line-height: 1.05 !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card p { font-size: 15px !important; line-height: 1.52 !important; } body.ty-home-experience-active .ty-hx-service-scroll { border: 1px solid rgba(100, 173, 229, 0.42) !important; background: linear-gradient(155deg, rgba(7, 20, 46, 0.88), rgba(8, 13, 30, 0.92)) !important; box-shadow: inset 0 0 0 1px rgba(145, 208, 255, 0.05), 0 18px 32px rgba(2, 9, 27, 0.55) !important; overflow: hidden !important; cursor: default !important; } body.ty-home-experience-active .ty-hx-service-track { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; animation: none !important; } body.ty-home-experience-active .ty-hx-service-track .ty-hx-service-showcase:nth-child(n + 6) { display: none !important; } body.ty-home-experience-active .ty-hx-service-showcase { width: auto !important; min-height: 320px !important; } body.ty-home-experience-active .ty-hx-service-showcase h3 { font-size: clamp(34px, 2.8vw, 46px) !important; } body.ty-home-experience-active .ty-hx-service-showcase p { font-size: clamp(14px, 1vw, 17px) !important; min-height: 72px !important; } body.ty-home-experience-active .ty-hx-service-foot span { font-size: 13px !important; } body.ty-home-experience-active .ty-hx-service-foot strong { font-size: 26px !important; } body.ty-home-experience-active .ty-hx-activity-cloud h3 { color: #0f2b69 !important; } body.ty-home-experience-active .ty-hx-activity-pills span { background: rgba(10, 27, 60, 0.74) !important; color: #cfe7ff !important; } body.ty-home-experience-active .ty-hx-ai-layout { grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr) !important; gap: 22px !important; align-items: start !important; } body.ty-home-experience-active .ty-hx-ai-content { order: 1; } body.ty-home-experience-active .ty-hx-ai-visual { order: 2; } body.ty-home-experience-active .ty-hx-ai-content > h3 { font-size: clamp(40px, 4.4vw, 64px) !important; letter-spacing: 0.02em; } body.ty-home-experience-active .ty-hx-ai-sub { font-size: clamp(18px, 1.5vw, 24px) !important; } body.ty-home-experience-active .ty-hx-ai-typebox { margin-top: 14px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: clamp(17px, 1.35vw, 24px) !important; line-height: 1.45 !important; color: #9eb8d6 !important; max-width: 660px; } body.ty-home-experience-active .ty-hx-ai-badges { margin-top: 14px !important; gap: 8px !important; } body.ty-home-experience-active .ty-hx-ai-badges span { font-size: clamp(13px, 1.05vw, 16px) !important; border: 0 !important; background: transparent !important; padding: 6px 0 6px 16px !important; position: relative; } body.ty-home-experience-active .ty-hx-ai-badges span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #25dcff; box-shadow: 0 0 10px rgba(37, 220, 255, 0.72); } body.ty-home-experience-active .ty-hx-ai-strip { margin-top: 16px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 0 !important; max-width: none !important; width: 100% !important; padding: 14px !important; } body.ty-home-experience-active .ty-hx-ai-chip h3 { font-size: clamp(18px, 1.45vw, 24px) !important; line-height: 1.15 !important; text-transform: none !important; letter-spacing: normal !important; background: linear-gradient(90deg, #7be7ff 0%, #83c0ff 48%, #ad8fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.ty-home-experience-active .ty-hx-ai-chip p { font-size: 13px !important; line-height: 1.5 !important; } body.ty-home-experience-active .ty-hx-app-card h3 { font-size: clamp(20px, 1.6vw, 28px) !important; } body.ty-home-experience-active .ty-hx-app-card p { font-size: 14px !important; } body.ty-home-experience-active .ty-hx-section-head h2, body.ty-home-experience-active .ty-hx-card h3, body.ty-home-experience-active .ty-hx-service-showcase h3, body.ty-home-experience-active .ty-hx-ai-content > h3 { background: linear-gradient(90deg, #78e8ff 0%, #83c0ff 36%, #b18bff 70%, #73f7d2 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; transition: filter 200ms ease, background-position 260ms ease; } body.ty-home-experience-active .ty-hx-section-head h2:hover, body.ty-home-experience-active .ty-hx-card h3:hover, body.ty-home-experience-active .ty-hx-service-showcase h3:hover, body.ty-home-experience-active .ty-hx-ai-content > h3:hover { background-position: 100% 0; filter: brightness(1.16) saturate(1.3); } body.ty-home-experience-active .ty-hx-root p { transition: color 220ms ease; } body.ty-home-experience-active .ty-hx-root p:hover { color: #e8f6ff !important; opacity: 1 !important; } @media (max-width: 1100px) { body.ty-home-experience-active .ty-hx-partner-cards { grid-template-columns: 1fr !important; } body.ty-home-experience-active .ty-hx-ai-layout { grid-template-columns: 1fr !important; } body.ty-home-experience-active .ty-hx-service-track { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.ty-home-experience-active .ty-hx-service-track .ty-hx-service-showcase:nth-child(n + 6) { display: none !important; } } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-visual-scene { min-height: clamp(560px, 90vw, 760px) !important; } body.ty-home-experience-active .ty-hx-orbit-canvas { flex-basis: clamp(1160px, 170vw, 1560px); } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(270px, 56vw, 410px) !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(134px, 28vw, 188px) !important; } body.ty-home-experience-active .ty-hx-signal { display: none !important; } body.ty-home-experience-active .ty-hx-service-scroll { overflow-x: auto !important; cursor: grab !important; } body.ty-home-experience-active .ty-hx-service-track { display: flex !important; width: max-content !important; } body.ty-home-experience-active .ty-hx-service-track .ty-hx-service-showcase:nth-child(n + 6) { display: block !important; } body.ty-home-experience-active .ty-hx-service-showcase { width: 252px !important; } body.ty-home-experience-active .ty-hx-ai-strip { grid-template-columns: 1fr !important; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-title { font-size: clamp(34px, 10.5vw, 50px) !important; } body.ty-home-experience-active .ty-hx-visual-scene { min-height: 500px !important; } body.ty-home-experience-active .ty-hx-orbit-canvas { flex-basis: 1240px; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(210px, 66vw, 290px) !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: 92px !important; height: 64px !important; } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(n + 7) { display: none !important; } body.ty-home-experience-active .ty-hx-point-pill { min-width: 224px !important; max-width: 224px !important; } body.ty-home-experience-active .ty-hx-ai-strip { grid-template-columns: 1fr !important; } body.ty-home-experience-active .ty-hx-ai-chip { min-width: 0 !important; max-width: none !important; width: 100% !important; } body.ty-home-experience-active .ty-hx-service-showcase { width: 228px !important; min-height: 282px !important; } body.ty-home-experience-active .ty-hx-service-showcase h3 { font-size: 30px !important; } body.ty-home-experience-active .ty-hx-service-showcase p { min-height: 58px !important; } } /* ========================================================== V5: Full galaxy background + no section boxes (screenshots 3–5) Keep cards glassy; remove wrapper panels ========================================================== */ /* Ensure the page behind the injected sections is galaxy too */ body.ty-home-experience-active { background: radial-gradient(ellipse at bottom, #0b1a33 0%, #020617 60%, #00030e 100%) !important; color: #dff2ff; } /* Neutralise common Traveler wrapper backgrounds (home only) */ body.ty-home-experience-active #st-content-wrapper, body.ty-home-experience-active #main-content, body.ty-home-experience-active .st-main-content, body.ty-home-experience-active .st-main-content .st-main-content-inner, body.ty-home-experience-active #content, body.ty-home-experience-active #primary, body.ty-home-experience-active .content-area, body.ty-home-experience-active .site-main { background: transparent !important; } /* Allow glows to “breathe” (no clipping) */ body.ty-home-experience-active .ty-hx-root { overflow: visible !important; } /* Dark galaxy + stars: brighten and make motion more “space-like” */ body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 18% 18%, rgba(0, 212, 255, 0.16) 0%, rgba(0, 212, 255, 0) 42%), radial-gradient(circle at 80% 62%, rgba(255, 78, 205, 0.12) 0%, rgba(255, 78, 205, 0) 48%), radial-gradient(circle at 46% 42%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0) 48%), radial-gradient(ellipse at bottom, #0b1a33 0%, #020617 62%, #00030e 100%) !important; } body.ty-home-experience-active .ty-hx-grid { opacity: 0.05 !important; } body.ty-home-experience-active .ty-hx-noise { opacity: 0.18 !important; } body.ty-home-experience-active .ty-hx-stars { opacity: 0.55 !important; background-image: radial-gradient(circle at 30px 42px, rgba(255,255,255,0.85) 1.1px, transparent 2px), radial-gradient(circle at 110px 90px, rgba(255,255,255,0.65) 1px, transparent 2px), radial-gradient(circle at 220px 150px, rgba(255,255,255,0.45) 1px, transparent 2px), radial-gradient(circle at 80px 220px, rgba(0,212,255,0.20) 1px, transparent 2px), radial-gradient(circle at 260px 60px, rgba(255,78,205,0.14) 1px, transparent 2px); background-size: 260px 260px, 360px 360px, 520px 520px, 680px 680px, 820px 820px; } body.ty-home-experience-active .ty-hx-stars-b { opacity: 0.34 !important; filter: blur(0.35px) !important; } /* ========================================================== Remove “boxed sections”: wrappers transparent, no border/shadow ========================================================== */ body.ty-home-experience-active .ty-hx-section, body.ty-home-experience-active .ty-hx-app-download { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: clamp(14px, 2.2vw, 22px) 0 !important; } /* ========================================================== Gradient heading system (consistent style everywhere) ========================================================== */ body.ty-home-experience-active .ty-hx-heading { font-family: "Roboto", sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.05 !important; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; background-size: 180% 100%; animation: tyGradientMove 7.6s linear infinite; } body.ty-home-experience-active .ty-hx-heading-rainbow { background-image: linear-gradient(90deg, #7c3aed 0%, #ff4ecd 38%, #ffb347 72%, #00d4ff 100%); } body.ty-home-experience-active .ty-hx-heading-cyan { background-image: linear-gradient(90deg, #7ce7ff 20%, #a5c6ff 65%, #e1f7ff 100%); } /* ========================================================== ORBIT: no big panel, fix centring, slightly smaller centre logo ========================================================== */ /* Kill the panel look */ body.ty-home-experience-active .ty-hx-orbit-stage { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; cursor: grab; } /* Keep orbit centred and square-ish */ body.ty-home-experience-active .ty-hx-orbit-stage .ty-hx-orbit-canvas { width: min(1120px, 100%) !important; margin: 0 auto !important; aspect-ratio: 1 / 1; } /* True centre */ body.ty-home-experience-active .ty-hx-tripyai-core { top: 50% !important; width: clamp(280px, 32vw, 480px) !important; } /* Slightly smaller centre button */ body.ty-home-experience-active .ty-hx-center-logo-shell { width: 50% !important; } /* Add subtle “sphere grid” without creating a box */ body.ty-home-experience-active .ty-hx-center-logo-shell::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%), repeating-linear-gradient(0deg, rgba(11, 26, 51, 0.10) 0 2px, rgba(11, 26, 51, 0) 10px 18px); opacity: 0.20; pointer-events: none; } /* Orbit ring rotation with interactive offset */ body.ty-home-experience-active .ty-hx-image-orbit { --ty-orbit-rot: 0deg; animation: tyOrbitSpin 38s linear infinite !important; pointer-events: none; /* ring itself */ transform-style: preserve-3d; } @keyframes tyOrbitSpin { from { transform: rotate(var(--ty-orbit-rot)); } to { transform: rotate(calc(var(--ty-orbit-rot) + 360deg)); } } /* Allow hover on items */ body.ty-home-experience-active .ty-hx-orbit-item { pointer-events: auto !important; --orbit-z: 0px; /* more 3D */ transform-style: preserve-3d; background: rgba(7, 18, 46, 0.92) !important; border-color: rgba(255,255,255,0.16) !important; } /* Use the new angle variables */ body.ty-home-experience-active .ty-hx-orbit-item { transform: translate(-50%, -50%) rotate(var(--theta)) translateY(calc(var(--orbit-radius) * -1)) rotate(var(--theta-inv)) translateZ(var(--orbit-z)) !important; transition: box-shadow 220ms ease, filter 220ms ease; } /* Per-card glow palette (cycles like screenshot feel) */ body.ty-home-experience-active .ty-hx-orbit-item:nth-child(1) { --orbit-glow: rgba(0,212,255,0.28); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(2) { --orbit-glow: rgba(124,58,237,0.24); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(3) { --orbit-glow: rgba(255,78,205,0.22); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(4) { --orbit-glow: rgba(255,179,71,0.22); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(5) { --orbit-glow: rgba(0,208,161,0.20); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(6) { --orbit-glow: rgba(0,212,255,0.22); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(7) { --orbit-glow: rgba(124,58,237,0.20); } body.ty-home-experience-active .ty-hx-orbit-item:nth-child(8) { --orbit-glow: rgba(255,78,205,0.18); } body.ty-home-experience-active .ty-hx-orbit-item:hover { --orbit-z: 34px; box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 28px var(--orbit-glow) !important; filter: saturate(1.1) contrast(1.05); } body.ty-home-experience-active .ty-hx-orbit-item figcaption { background: rgba(6, 14, 32, 0.72) !important; color: #dff2ff !important; border: 1px solid rgba(255,255,255,0.14); } /* ========================================================== SERVICES: remove outer scroll box, make cards 3D neon, correct emoji ========================================================== */ body.ty-home-experience-active .ty-hx-service-scroll { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; overflow-x: auto; overflow-y: visible; } /* Pause the marquee on hover remains OK; increase spacing a bit */ body.ty-home-experience-active .ty-hx-service-track { gap: 22px !important; } /* Tone variables = different glow colours */ body.ty-home-experience-active .ty-hx-service-tone-hotel { --svc-glow: rgba(0,212,255,0.30); --svc-a: #22d3ff; } body.ty-home-experience-active .ty-hx-service-tone-tour { --svc-glow: rgba(124,58,237,0.26); --svc-a: #9a67ff; } body.ty-home-experience-active .ty-hx-service-tone-activity { --svc-glow: rgba(255,78,205,0.22); --svc-a: #ff4db1; } body.ty-home-experience-active .ty-hx-service-tone-rental { --svc-glow: rgba(255,179,71,0.22); --svc-a: #ffaa17; } body.ty-home-experience-active .ty-hx-service-tone-car { --svc-glow: rgba(0,208,161,0.20); --svc-a: #00d0a1; } body.ty-home-experience-active .ty-hx-service-showcase { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,0.14) !important; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } /* “Backside glow” */ body.ty-home-experience-active .ty-hx-service-showcase::before { content: ""; position: absolute; inset: -10px; border-radius: 26px; background: radial-gradient(circle at 35% 30%, var(--svc-glow), rgba(0,0,0,0) 55%); filter: blur(18px); opacity: 0; transition: opacity 220ms ease; z-index: -1; } body.ty-home-experience-active .ty-hx-service-showcase:hover { transform: translateY(-12px) perspective(1100px) rotateX(3deg) !important; box-shadow: 0 20px 46px rgba(0,0,0,0.62), 0 0 26px var(--svc-glow) !important; } body.ty-home-experience-active .ty-hx-service-showcase:hover::before { opacity: 1; } /* Fix “awkward large” body text sizes inside cards */ body.ty-home-experience-active .ty-hx-service-showcase h3 { font-size: clamp(22px, 2.2vw, 32px) !important; color: var(--svc-a) !important; } body.ty-home-experience-active .ty-hx-service-showcase p { font-size: clamp(14px, 1.1vw, 16px) !important; line-height: 1.45 !important; min-height: 0 !important; } body.ty-home-experience-active .ty-hx-service-foot span { font-size: 13px !important; } body.ty-home-experience-active .ty-hx-service-foot { align-items: flex-end; } body.ty-home-experience-active .ty-hx-explore-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 14px; color: #e9fbff; border: 1px solid rgba(255,255,255,0.16); background: rgba(6, 14, 32, 0.40); box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.08) inset; } body.ty-home-experience-active .ty-hx-explore-btn:hover { box-shadow: 0 0 18px var(--svc-glow), 0 14px 28px rgba(0,0,0,0.48); } /* Correct emojis (match screenshot 3 intent) */ body.ty-home-experience-active .ty-hx-service-emoji-hotel::before { content: "🏨"; } body.ty-home-experience-active .ty-hx-service-emoji-tour::before { content: "🗺️"; } body.ty-home-experience-active .ty-hx-service-emoji-activity::before { content: "🎯"; } body.ty-home-experience-active .ty-hx-service-emoji-rental::before { content: "🏡"; } body.ty-home-experience-active .ty-hx-service-emoji-car::before { content: "🚗"; } /* ========================================================== AI section: remove boxes, match open layout + bullets (screenshot 4) ========================================================== */ body.ty-home-experience-active .ty-hx-ai-layout-v5 { grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important; align-items: center; } body.ty-home-experience-active .ty-hx-ai-visual { background: transparent !important; border-radius: 0 !important; overflow: visible !important; } body.ty-home-experience-active .ty-hx-ai-title { font-size: clamp(42px, 6.2vw, 82px) !important; line-height: 0.98 !important; margin: 10px 0 12px !important; } body.ty-home-experience-active .ty-hx-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(6, 14, 32, 0.35); color: #9fe9ff; font-weight: 700; font-size: 14px; } body.ty-home-experience-active .ty-hx-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #00d4ff; box-shadow: 0 0 16px rgba(0,212,255,0.65); } body.ty-home-experience-active .ty-hx-ai-lede { color: #b8d4ec !important; font-size: 16px !important; line-height: 1.7 !important; max-width: 640px; } /* Bullet list like screenshot 4 */ body.ty-home-experience-active .ty-hx-ai-bullets { margin: 16px 0 14px; color: #b8d4ec !important; padding: 0; list-style: none; } body.ty-home-experience-active .ty-hx-ai-bullets li { position: relative; padding-left: 18px; margin: 10px 0; color: #c8e2f8 !important; font-weight: 600; } body.ty-home-experience-active .ty-hx-ai-bullets li:hover { color: #e8f6ff !important; } body.ty-home-experience-active .ty-hx-ai-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #00d4ff; box-shadow: 0 0 14px rgba(0,212,255,0.7); } /* CTA like screenshot 4 */ body.ty-home-experience-active .ty-hx-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 900; color: #9fe9ff; border: 1px solid rgba(0,212,255,0.35); background: rgba(6, 14, 32, 0.38); box-shadow: 0 0 18px rgba(0,212,255,0.12); } body.ty-home-experience-active .ty-hx-cta-btn:hover { box-shadow: 0 0 26px rgba(0,212,255,0.18); } /* Turn your existing “dot nodes” into small orbiting icon tiles */ body.ty-home-experience-active .ty-hx-ai-dot-node { width: 58px !important; height: 58px !important; border-radius: 14px !important; background: rgba(6, 14, 32, 0.55) !important; border: 1px solid rgba(0,212,255,0.28) !important; box-shadow: 0 0 18px rgba(0,212,255,0.12) !important; } body.ty-home-experience-active .ty-hx-ai-dot-node::before { content: "🤖"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; } body.ty-home-experience-active .ty-ai-node-b::before, body.ty-home-experience-active .ty-ai-node-d::before { content: "✨"; } /* Screen-reader only helper */ .ty-hx-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Keyboard focus visibility (important on dark UI) */ body.ty-home-experience-active .ty-hx-explore-btn:focus-visible, body.ty-home-experience-active .ty-hx-cta-btn:focus-visible { outline: 3px solid rgba(0, 212, 255, 0.65); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .ty-hx-root *, .ty-hx-root *::before, .ty-hx-root *::after { animation: none !important; transition: none !important; } } @keyframes tySpin { to { transform: rotate(360deg); } } @keyframes tyFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -18px, 0) scale(1.04); } } @keyframes tyGradientMove { to { background-position: 180% 0; } } @keyframes tyGridPulse { 0%, 100% { opacity: 0.26; } 50% { opacity: 0.44; } } @keyframes tyCaret { 50% { opacity: 0; } } @keyframes tyOrbit { to { transform: rotate(360deg); } } @keyframes tyPulseBeat { 0%, 100% { transform: scale(1); opacity: 0.96; } 50% { transform: scale(1.08); opacity: 0.72; } } @keyframes tyCardFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } } @keyframes tyWordFloat { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .09; } 50% { transform: translate3d(0, -14px, 0); opacity: .16; } } @keyframes tyTunnel { 0% { transform: scale(1) rotate(0deg); opacity: 0.62; } 50% { transform: scale(1.1) rotate(180deg); opacity: 0.38; } 100% { transform: scale(1) rotate(360deg); opacity: 0.62; } } @keyframes tyOrbitPulse { 0%, 100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.12) brightness(1.08); } } @keyframes tyMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes tyMapDrift { 0%, 100% { transform: scale(1) translate3d(0, 0, 0); } 50% { transform: scale(1.04) translate3d(-0.8%, -1.2%, 0); } } @keyframes tyRouteDot { 0% { transform: translate3d(0, 0, 0); opacity: 0.9; } 25% { transform: translate3d(12px, 22px, 0); } 50% { transform: translate3d(26px, 44px, 0); opacity: 0.7; } 75% { transform: translate3d(40px, 62px, 0); } 100% { transform: translate3d(54px, 82px, 0); opacity: 0.3; } } @keyframes tyDriveLane { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(18px, -2px, 0); } } @keyframes tyStripFlow { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-12px, -3px, 0); } 100% { transform: translate3d(-24px, 0, 0); } } @keyframes tyFeatureMarqueeA { 0% { transform: translateX(0); } 100% { transform: translateX(-22%); } } @keyframes tyFeatureMarqueeB { 0% { transform: translateX(-16%); } 100% { transform: translateX(0); } } @keyframes tyClickPop { 0% { transform: scale(1); } 45% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes tyAiSatelliteFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } } @keyframes tyAiDotPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.25); opacity: 1; } } @keyframes tySignalPulse { 0%, 100% { opacity: 0.62; filter: saturate(0.92); } 50% { opacity: 1; filter: saturate(1.1); } } @keyframes tyServiceMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes tyAiNodePulse { 0%, 100% { transform: scale(1); opacity: 0.82; } 50% { transform: scale(1.32); opacity: 1; } } @keyframes tyStarDriftA { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2.5%, -2%, 0) scale(1.03); } 100% { transform: translate3d(-5%, -4%, 0) scale(1.06); } } @keyframes tyStarDriftB { 0% { transform: translate3d(0, 0, 0) scale(1.08); } 50% { transform: translate3d(2.2%, 1.8%, 0) scale(1.02); } 100% { transform: translate3d(4.4%, 3.6%, 0) scale(0.98); } } /* ========================================================== Galaxy + neon overrides for Services + AI Scoped with .ty-hx-galaxy ========================================================== */ body.ty-home-experience-active .ty-hx-root.ty-hx-galaxy { color: #dff2ff; } /* Animated gradient headings */ body.ty-home-experience-active .ty-hx-heading-gradient { font-family: "Syne", "Space Grotesk", sans-serif; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(90deg, #00d4ff 0%, #7c3aed 32%, #ff4ecd 64%, #ffb347 100%); background-size: 180% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tyGradientMove 7.8s linear infinite; } /* Meet Tripy title */ body.ty-home-experience-active .ty-hx-meet-title { font-size: clamp(44px, 6vw, 74px); line-height: 1.02; margin: 0 0 10px; } /* Service tone accents */ body.ty-home-experience-active .ty-hx-service-tone-hotel { --ty-accent-a:#00d4ff; --ty-accent-b:#22d3ff; --ty-glow:rgba(0,212,255,0.28); } body.ty-home-experience-active .ty-hx-service-tone-tour { --ty-accent-a:#7c3aed; --ty-accent-b:#9a67ff; --ty-glow:rgba(124,58,237,0.26); } body.ty-home-experience-active .ty-hx-service-tone-activity { --ty-accent-a:#ff4ecd; --ty-accent-b:#ff4db1; --ty-glow:rgba(255,78,205,0.22); } body.ty-home-experience-active .ty-hx-service-tone-rental { --ty-accent-a:#ffb347; --ty-accent-b:#ffaa17; --ty-glow:rgba(255,179,71,0.24); } body.ty-home-experience-active .ty-hx-service-tone-car { --ty-accent-a:#00d0a1; --ty-accent-b:#22ffcf; --ty-glow:rgba(0,208,161,0.22); } /* Glass cards */ body.ty-home-experience-active .ty-hx-service-showcase { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } body.ty-home-experience-active .ty-hx-service-showcase::after { content:""; position:absolute; top:0; right:0; width:118px; height:118px; background:conic-gradient(from 180deg at 100% 0%, var(--ty-accent-a), var(--ty-accent-b), rgba(255,255,255,0)); clip-path:polygon(100% 0, 0 0, 100% 100%); opacity:0.32; pointer-events:none; } body.ty-home-experience-active .ty-hx-service-corner { display:none; } body.ty-home-experience-active .ty-hx-service-showcase:hover { transform:translateY(-10px); border-color:rgba(220,245,255,0.28); box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 26px var(--ty-glow); } /* Gradient service titles */ body.ty-home-experience-active .ty-hx-service-showcase h3 { background:linear-gradient(90deg,var(--ty-accent-a),var(--ty-accent-b)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Emoji tiles */ body.ty-home-experience-active .ty-hx-service-emoji { border-color:rgba(255,255,255,0.16); box-shadow: 0 10px 22px rgba(2,10,28,0.62), 0 0 22px var(--ty-glow); } /* Explore button */ body.ty-home-experience-active .ty-hx-explore-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:800; font-size:14px; color:#e9fbff; border:1px solid rgba(255,255,255,0.18); background:rgba(6,14,32,0.42); box-shadow:inset 0 0 0 1px rgba(0,212,255,0.10); } body.ty-home-experience-active .ty-hx-explore-btn:hover { transform:translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0,212,255,0.14), 0 0 18px var(--ty-glow), 0 12px 26px rgba(0,0,0,0.45); } /* CTA button */ body.ty-home-experience-active .ty-hx-cta-btn { display:inline-flex; margin-top:14px; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:900; color:#061329; background:linear-gradient(90deg,#00d4ff 0%,#76ffc8 45%,#ffb347 100%); box-shadow: 0 18px 40px rgba(0,212,255,0.18), 0 0 0 1px rgba(255,255,255,0.08) inset; } body.ty-home-experience-active .ty-hx-cta-btn:hover { transform:translateY(-1px); box-shadow: 0 22px 52px rgba(0,212,255,0.22), 0 0 18px rgba(255,78,205,0.14); } /* Responsive tweaks */ @media (max-width:920px){ body.ty-home-experience-active .ty-hx-service-track{ animation:none; } body.ty-home-experience-active .ty-hx-service-showcase{ width:clamp(240px,70vw,320px); min-height:340px; } } /* Reduced transparency support */ @media (prefers-reduced-transparency:reduce){ body.ty-home-experience-active .ty-hx-service-showcase{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(7,20,46,0.92) !important; } } /* ========================================================== FINAL pass: orbit fit + service glow + AI/App redesign ========================================================== */ /* Hero/orbit alignment */ body.ty-home-experience-active .ty-hx-hero-shell { gap: clamp(24px, 4vw, 48px) !important; } body.ty-home-experience-active .ty-hx-hero-copy-col { max-width: 1040px !important; } body.ty-home-experience-active .ty-hx-visual-scene.ty-hx-orbit-stage { min-height: clamp(560px, 62vw, 760px) !important; overflow: hidden !important; } body.ty-home-experience-active .ty-hx-orbit-stage .ty-hx-orbit-canvas { flex: 0 0 auto !important; width: min(980px, 92vw) !important; min-height: inherit !important; margin: 0 auto !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(240px, 27vw, 390px) !important; top: 50% !important; } body.ty-home-experience-active .ty-hx-center-logo-shell { width: 48% !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(132px, 14.8vw, 198px) !important; inset: 17% !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(236px, 24vw, 326px) !important; } body.ty-home-experience-active .ty-hx-signal-cloud { --sig-radius: clamp(280px, 29vw, 390px) !important; } /* Services: remove outer box and add stronger glow atmosphere */ body.ty-home-experience-active .ty-hx-service-universe { position: relative; overflow: visible !important; } body.ty-home-experience-active .ty-hx-service-universe::before, body.ty-home-experience-active .ty-hx-service-universe::after { content: ""; position: absolute; pointer-events: none; z-index: 0; filter: blur(46px); opacity: 0.9; } body.ty-home-experience-active .ty-hx-service-universe::before { inset: -12% 4% auto 4%; height: 210px; background: radial-gradient(circle at 28% 40%, rgba(0, 212, 255, 0.34), rgba(0, 212, 255, 0) 60%); } body.ty-home-experience-active .ty-hx-service-universe::after { inset: auto 0 -12% 10%; height: 190px; background: radial-gradient(circle at 72% 50%, rgba(124, 58, 237, 0.28), rgba(255, 78, 205, 0.08) 45%, rgba(255, 78, 205, 0) 74%); } body.ty-home-experience-active .ty-hx-service-universe > * { position: relative; z-index: 1; } body.ty-home-experience-active .ty-hx-service-scroll { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 0 !important; overflow-x: auto !important; overflow-y: visible !important; } body.ty-home-experience-active .ty-hx-service-track { gap: 24px !important; } body.ty-home-experience-active .ty-hx-service-showcase { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.56), 0 0 24px rgba(0, 212, 255, 0.14) !important; } body.ty-home-experience-active .ty-hx-service-showcase:hover { box-shadow: 0 24px 54px rgba(0, 0, 0, 0.62), 0 0 34px var(--svc-glow) !important; } body.ty-home-experience-active .ty-hx-activity-cloud { margin-top: 14px !important; padding: 8px 0 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* AI: full creative redesign with neural pulse visual */ body.ty-home-experience-active .ty-hx-ai-layout-v5 { grid-template-columns: minmax(320px, 1.04fr) minmax(320px, 0.96fr) !important; gap: clamp(26px, 3.4vw, 48px) !important; align-items: center !important; } body.ty-home-experience-active .ty-hx-ai-content { max-width: 640px; } body.ty-home-experience-active .ty-hx-ai-neural { position: relative; min-height: clamp(360px, 36vw, 520px) !important; border-radius: 30px !important; border: 1px solid rgba(113, 190, 244, 0.3) !important; overflow: hidden !important; background: radial-gradient(circle at 30% 24%, rgba(0, 212, 255, 0.22), rgba(0, 212, 255, 0) 56%), radial-gradient(circle at 70% 72%, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0) 58%), linear-gradient(160deg, rgba(7, 21, 50, 0.9), rgba(4, 14, 34, 0.94)) !important; box-shadow: 0 26px 62px rgba(2, 10, 28, 0.62), inset 0 0 0 1px rgba(173, 231, 255, 0.07) !important; } body.ty-home-experience-active .ty-hx-ai-aurora, body.ty-home-experience-active .ty-hx-ai-grid-pulse, body.ty-home-experience-active .ty-hx-ai-halo { position: absolute; pointer-events: none; } body.ty-home-experience-active .ty-hx-ai-aurora { inset: -28%; background: conic-gradient(from 180deg, rgba(0, 212, 255, 0.18), rgba(118, 85, 255, 0.08), rgba(255, 179, 71, 0.16), rgba(0, 212, 255, 0.16)); filter: blur(40px); animation: tyAiAurora 11s linear infinite; } body.ty-home-experience-active .ty-hx-ai-grid-pulse { inset: 0; background-image: linear-gradient(rgba(127, 214, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 214, 255, 0.07) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at center, black 22%, transparent 78%); opacity: 0.42; } body.ty-home-experience-active .ty-hx-ai-halo { left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(127, 212, 255, 0.28); } body.ty-home-experience-active .ty-hx-ai-halo-a { width: clamp(208px, 22vw, 300px); height: clamp(208px, 22vw, 300px); animation: tyAiHaloSpin 12s linear infinite; } body.ty-home-experience-active .ty-hx-ai-halo-b { width: clamp(286px, 30vw, 406px); height: clamp(286px, 30vw, 406px); border-style: dashed; border-color: rgba(255, 255, 255, 0.14); animation: tyAiHaloSpinReverse 16s linear infinite; } body.ty-home-experience-active .ty-hx-ai-neural-core { position: absolute; left: 50%; top: 50%; width: clamp(130px, 14vw, 188px); height: clamp(130px, 14vw, 188px); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 30%, rgba(123, 236, 255, 0.95), rgba(89, 130, 255, 0.88)); box-shadow: 0 0 68px rgba(66, 172, 245, 0.5), inset 0 0 28px rgba(232, 246, 255, 0.24); } body.ty-home-experience-active .ty-hx-ai-core-badge { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); border-radius: 999px; padding: 6px 10px; background: rgba(7, 30, 62, 0.84); border: 1px solid rgba(147, 221, 255, 0.56); color: #b6eeff; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; } body.ty-home-experience-active .ty-hx-ai-core-icon { font-size: clamp(34px, 3.6vw, 46px); color: #f4fbff; text-shadow: 0 8px 22px rgba(7, 31, 71, 0.42); } body.ty-home-experience-active .ty-hx-ai-node { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 36px; border-radius: 999px; padding: 0 14px; background: rgba(7, 27, 60, 0.72); border: 1px solid rgba(139, 219, 255, 0.45); color: #dff6ff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 10px 22px rgba(2, 10, 28, 0.58), 0 0 16px rgba(0, 212, 255, 0.2); animation: tyAiNodeFloat 4.8s ease-in-out infinite; } body.ty-home-experience-active .ty-hx-ai-node-a { left: 12%; top: 20%; } body.ty-home-experience-active .ty-hx-ai-node-b { right: 10%; top: 28%; animation-delay: -1.3s; } body.ty-home-experience-active .ty-hx-ai-node-c { left: 16%; bottom: 20%; animation-delay: -2.2s; } body.ty-home-experience-active .ty-hx-ai-node-d { right: 14%; bottom: 16%; animation-delay: -3.1s; } body.ty-home-experience-active .ty-hx-ai-node::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #7eeaff; box-shadow: 0 0 14px rgba(126, 234, 255, 0.8); transform: translate(-50%, -50%); opacity: 0.78; } /* App section redesign */ body.ty-home-experience-active .ty-hx-app-download { margin-top: clamp(26px, 4vw, 52px) !important; } body.ty-home-experience-active .ty-hx-app-download .ty-hx-section-head { max-width: 920px !important; margin: 0 auto !important; text-align: center !important; } body.ty-home-experience-active .ty-hx-app-download .ty-hx-section-head h2 { font-size: clamp(38px, 5.2vw, 72px) !important; line-height: 1.02 !important; margin-bottom: 10px !important; } body.ty-home-experience-active .ty-hx-app-shell { position: relative; margin-top: 20px; padding-top: 6px; } body.ty-home-experience-active .ty-hx-app-shell::before { content: ""; position: absolute; left: 50%; top: 36%; width: min(84%, 920px); height: 180px; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, rgba(118, 85, 255, 0.12) 34%, rgba(118, 85, 255, 0) 72%); filter: blur(30px); pointer-events: none; } body.ty-home-experience-active .ty-hx-app-grid { max-width: 960px !important; gap: 22px !important; } body.ty-home-experience-active .ty-hx-app-card { position: relative; border-radius: 24px !important; border: 1px solid rgba(109, 183, 236, 0.46) !important; background: linear-gradient(158deg, rgba(6, 24, 56, 0.9), rgba(8, 14, 33, 0.94)) !important; box-shadow: 0 20px 42px rgba(2, 10, 28, 0.58), inset 0 0 0 1px rgba(156, 223, 255, 0.08) !important; padding: 22px !important; text-align: left !important; } body.ty-home-experience-active .ty-hx-app-card-android { box-shadow: 0 20px 42px rgba(2, 10, 28, 0.58), 0 0 26px rgba(0, 212, 255, 0.16), inset 0 0 0 1px rgba(156, 223, 255, 0.08) !important; } body.ty-home-experience-active .ty-hx-app-card-ios { box-shadow: 0 20px 42px rgba(2, 10, 28, 0.58), 0 0 26px rgba(124, 58, 237, 0.16), inset 0 0 0 1px rgba(196, 203, 255, 0.08) !important; } body.ty-home-experience-active .ty-hx-app-platform { display: inline-flex; align-items: center; justify-content: center; height: 30px; border-radius: 999px; padding: 0 12px; border: 1px solid rgba(154, 223, 255, 0.44); color: #c7f2ff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; background: rgba(8, 30, 64, 0.74); } body.ty-home-experience-active .ty-hx-app-card .ty-hx-qr { margin: 16px 0 12px !important; width: clamp(146px, 13vw, 182px) !important; height: clamp(146px, 13vw, 182px) !important; } body.ty-home-experience-active .ty-hx-app-card h3 { margin: 4px 0 6px !important; font-size: clamp(26px, 2.5vw, 34px) !important; color: #e8f8ff !important; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-qr-scan { color: #9fc0dd !important; margin: 0 0 16px !important; font-size: 15px !important; line-height: 1.5 !important; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-btn { min-width: 168px !important; } @keyframes tyAiAurora { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } @keyframes tyAiHaloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes tyAiHaloSpinReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes tyAiNodeFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-orbit-stage .ty-hx-orbit-canvas { width: min(760px, 95vw) !important; } body.ty-home-experience-active .ty-hx-tripyai-core { width: clamp(220px, 44vw, 320px) !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(116px, 22vw, 168px) !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(184px, 33vw, 250px) !important; } body.ty-home-experience-active .ty-hx-ai-layout-v5 { grid-template-columns: 1fr !important; } body.ty-home-experience-active .ty-hx-ai-content { max-width: 100%; } body.ty-home-experience-active .ty-hx-ai-neural { min-height: 360px !important; } body.ty-home-experience-active .ty-hx-app-grid { grid-template-columns: 1fr !important; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-visual-scene.ty-hx-orbit-stage { min-height: 500px !important; } body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: clamp(100px, 28vw, 142px) !important; } body.ty-home-experience-active .ty-hx-orbit-labels { --label-radius: clamp(158px, 44vw, 220px) !important; } body.ty-home-experience-active .ty-hx-orbit-label { font-size: 10px !important; } body.ty-home-experience-active .ty-hx-app-card { text-align: center !important; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-qr { margin: 14px auto 12px !important; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-btn { width: 100% !important; } } /* ========================================================== FINAL tuning v2: AI 3D, heading scale, service/app alignment ========================================================== */ /* Keep heading sizes consistent like "Travel Services" */ body.ty-home-experience-active .ty-hx-section-head h2, body.ty-home-experience-active .ty-hx-ai-title, body.ty-home-experience-active .ty-hx-app-download .ty-hx-section-head h2 { font-size: clamp(36px, 4.4vw, 42px) !important; line-height: 1.04 !important; letter-spacing: -0.015em !important; text-transform: none !important; } body.ty-home-experience-active .ty-hx-service-universe .ty-hx-section-head h2 { font-size: clamp(40px, 4.8vw, 40px) !important; } /* Remove any service container panel */ body.ty-home-experience-active .ty-hx-service-universe { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-service-universe .ty-hx-section-head { margin-bottom: 14px !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-service-scroll { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-service-track { background: transparent !important; } body.ty-home-experience-active .ty-hx-activity-cloud { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 0 0 !important; } /* Futuristic 3D AI visual */ body.ty-home-experience-active .ty-hx-ai-future3d { position: relative; min-height: clamp(380px, 40vw, 560px) !important; overflow: visible !important; perspective: 1400px; display: flex; align-items: center; justify-content: center; } body.ty-home-experience-active .ty-hx-ai-space-glow { position: absolute; inset: -20%; background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.18) 0%, rgba(124, 58, 237, 0.14) 38%, rgba(255, 78, 205, 0.08) 62%, transparent 80%); filter: blur(32px); animation: tyAiAmbientPulse 6s ease-in-out infinite; pointer-events: none; } body.ty-home-experience-active .ty-hx-ai-stage3d { position: absolute; inset: 0; transform-style: preserve-3d; animation: none; display: flex; align-items: center; justify-content: center; } body.ty-home-experience-active .ty-hx-ai-grid-floor { position: absolute; left: 50%; top: 65%; width: 90%; height: 52%; transform: translate(-50%, -50%) rotateX(76deg); background-image: linear-gradient(rgba(0, 212, 255, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.22) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 80%); opacity: 0.45; animation: tyGridPulse 3s ease-in-out infinite; } body.ty-home-experience-active .ty-hx-ai-ring3d { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; } body.ty-home-experience-active .ty-hx-ai-ring3d-a { width: clamp(240px, 24vw, 350px); height: clamp(240px, 24vw, 350px); border: 1.5px solid rgba(0, 212, 255, 0.55); box-shadow: 0 0 18px rgba(0,212,255,0.18) inset; animation: tyOrbitRingA 9s linear infinite; } body.ty-home-experience-active .ty-hx-ai-ring3d-b { width: clamp(320px, 32vw, 460px); height: clamp(320px, 32vw, 460px); border: 1px dashed rgba(255, 255, 255, 0.14); animation: tyOrbitRingB 16s linear infinite; } body.ty-home-experience-active .ty-hx-ai-ring3d-c { width: clamp(276px, 28vw, 400px); height: clamp(276px, 28vw, 400px); border: 1.5px solid rgba(255, 78, 205, 0.45); box-shadow: 0 0 14px rgba(255,78,205,0.14) inset; animation: tyOrbitRingC 12s linear infinite; } @keyframes tyOrbitRingA { 0% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); } } @keyframes tyOrbitRingB { 0% { transform: translate(-50%, -50%) rotateX(64deg) rotateZ(360deg); } 100% { transform: translate(-50%, -50%) rotateX(64deg) rotateZ(0deg); } } @keyframes tyOrbitRingC { 0% { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(360deg); } } body.ty-home-experience-active .ty-hx-ai-prism-core { position: absolute; left: 50%; top: 50%; width: clamp(140px, 14vw, 200px); height: clamp(140px, 14vw, 200px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 52%), radial-gradient(circle at 65% 68%, rgba(124,58,237,0.42) 0%, transparent 60%), radial-gradient(ellipse at center, rgba(0,160,255,0.88) 0%, rgba(60,0,180,0.72) 52%, rgba(0,212,200,0.62) 100%); box-shadow: 0 0 60px rgba(0,180,255,0.52), 0 0 120px rgba(100,40,220,0.30), 0 0 200px rgba(0,212,255,0.14), inset 0 0 40px rgba(255,255,255,0.22); animation: tyHoloSphere 7s ease-in-out infinite; } @keyframes tyHoloSphere { 0%, 100% { box-shadow: 0 0 60px rgba(0,180,255,0.52), 0 0 120px rgba(100,40,220,0.30), 0 0 200px rgba(0,212,255,0.14), inset 0 0 40px rgba(255,255,255,0.22); transform: translate(-50%, -50%) scale(1); } 33% { box-shadow: 0 0 80px rgba(124,58,237,0.56), 0 0 140px rgba(255,78,205,0.24), 0 0 220px rgba(124,58,237,0.16), inset 0 0 50px rgba(255,255,255,0.28); transform: translate(-50%, -50%) scale(1.04); } 66% { box-shadow: 0 0 70px rgba(0,212,200,0.48), 0 0 130px rgba(0,160,255,0.28), 0 0 200px rgba(0,212,200,0.14), inset 0 0 44px rgba(255,255,255,0.24); transform: translate(-50%, -50%) scale(0.97); } } body.ty-home-experience-active .ty-hx-ai-prism-core-shine { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255,255,255,0.72), rgba(255,255,255,0) 56%); pointer-events: none; } body.ty-home-experience-active .ty-hx-ai-prism-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: clamp(11px, 1vw, 14px); font-weight: 900; letter-spacing: 0.18em; white-space: nowrap; text-shadow: 0 0 20px rgba(0,212,255,0.9), 0 2px 8px rgba(4,16,48,0.6); } body.ty-home-experience-active .ty-hx-ai-tag3d { position: absolute; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 38px; border-radius: 999px; padding: 0 16px; border: 1px solid rgba(0, 212, 255, 0.52); background: rgba(4, 14, 38, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #a8f0ff; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(0,212,255,0.8); box-shadow: 0 0 20px rgba(0,212,255,0.22), 0 8px 24px rgba(0,10,32,0.6), inset 0 0 0 1px rgba(255,255,255,0.08); animation: tyAiTagFloat 4.8s ease-in-out infinite; } body.ty-home-experience-active .ty-hx-ai-tag3d-a { left: 8%; top: 16%; animation-delay: 0s; } body.ty-home-experience-active .ty-hx-ai-tag3d-b { right: 6%; top: 22%; animation-delay: -1.2s; border-color: rgba(124,58,237,0.52); color: #c8b0ff; text-shadow: 0 0 10px rgba(124,58,237,0.8); box-shadow: 0 0 20px rgba(124,58,237,0.22), 0 8px 24px rgba(0,10,32,0.6), inset 0 0 0 1px rgba(255,255,255,0.08); } body.ty-home-experience-active .ty-hx-ai-tag3d-c { left: 10%; bottom: 16%; animation-delay: -2.1s; border-color: rgba(255,78,205,0.52); color: #ffb8f0; text-shadow: 0 0 10px rgba(255,78,205,0.8); box-shadow: 0 0 20px rgba(255,78,205,0.22), 0 8px 24px rgba(0,10,32,0.6), inset 0 0 0 1px rgba(255,255,255,0.08); } body.ty-home-experience-active .ty-hx-ai-tag3d-d { right: 8%; bottom: 12%; animation-delay: -3s; border-color: rgba(255,179,71,0.52); color: #ffd8a0; text-shadow: 0 0 10px rgba(255,179,71,0.8); box-shadow: 0 0 20px rgba(255,179,71,0.22), 0 8px 24px rgba(0,10,32,0.6), inset 0 0 0 1px rgba(255,255,255,0.08); } body.ty-home-experience-active .ty-hx-ai-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.9), 0 0 24px rgba(0,212,255,0.5); animation: tyAiSparkFloat 3.4s ease-in-out infinite; } body.ty-home-experience-active .ty-hx-ai-spark-a { left: 30%; top: 20%; animation-delay: 0s; } body.ty-home-experience-active .ty-hx-ai-spark-b { right: 22%; top: 36%; animation-delay: -0.9s; background: #b060ff; box-shadow: 0 0 12px rgba(176,96,255,0.9); } body.ty-home-experience-active .ty-hx-ai-spark-c { left: 36%; bottom: 26%; animation-delay: -1.6s; background: #ff4ecd; box-shadow: 0 0 12px rgba(255,78,205,0.9); } body.ty-home-experience-active .ty-hx-ai-spark-d { right: 30%; bottom: 22%; animation-delay: -2.4s; background: #ffb347; box-shadow: 0 0 12px rgba(255,179,71,0.9); } @keyframes tyAiSparkFloat { 0%, 100% { transform: translate(0, 0) scale(0.7); opacity: 0.4; } 30% { transform: translate(-8px, -12px) scale(1.3); opacity: 1; } 60% { transform: translate(6px, -6px) scale(0.9); opacity: 0.7; } } @keyframes tyAiAmbientPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* Galaxy canvas element */ body.ty-home-experience-active .ty-hx-galaxy-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.82; } /* Full-page dark background */ body.ty-home-experience-active .ty-hx-root { background: #020617 !important; color: #d9ecff !important; } body.ty-home-experience-active .ty-hx-root::before { background: radial-gradient(circle at 15% 15%, rgba(0, 140, 255, 0.20) 0%, transparent 44%), radial-gradient(circle at 85% 65%, rgba(124, 58, 237, 0.18) 0%, transparent 44%), radial-gradient(circle at 50% 48%, rgba(0, 212, 200, 0.10) 0%, transparent 42%), linear-gradient(170deg, #020a1e 0%, #030d28 48%, #01050f 100%) !important; } /* All content above canvas */ body.ty-home-experience-active .ty-hx-root > * { position: relative; z-index: 1; } /* Consistent rainbow gradient on ALL section headings */ body.ty-home-experience-active .ty-hx-heading, body.ty-home-experience-active .ty-hx-section-head h2, body.ty-home-experience-active .ty-hx-app-download .ty-hx-section-head h2 { background: linear-gradient(80deg, #2d35ca 0%, #21aa42 30%, #3fff1b 62%, #f2ea06 100%) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; animation: tyGradientMove 7.6s linear infinite !important; } /* Sub-headlines visible on dark bg, bright on hover */ body.ty-home-experience-active .ty-hx-section-head p, body.ty-home-experience-active .ty-hx-copy, body.ty-home-experience-active .ty-hx-ai-lede, body.ty-home-experience-active .ty-hx-root p { color: #b8d0ea !important; opacity: 1 !important; } body.ty-home-experience-active .ty-hx-section-head p:hover, body.ty-home-experience-active .ty-hx-copy:hover, body.ty-home-experience-active .ty-hx-ai-lede:hover, body.ty-home-experience-active .ty-hx-root p:hover { color: #e6f4ff !important; opacity: 1 !important; } /* QR app cards centered */ body.ty-home-experience-active .ty-hx-app-card { text-align: center !important; } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-ai-future3d { min-height: 360px !important; } body.ty-home-experience-active .ty-hx-ai-tag3d { min-width: 82px; height: 34px; font-size: 11px; padding: 0 12px; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-ai-future3d { min-height: 300px !important; } body.ty-home-experience-active .ty-hx-ai-tag3d-a, body.ty-home-experience-active .ty-hx-ai-tag3d-b { top: 14%; } body.ty-home-experience-active .ty-hx-ai-tag3d-c, body.ty-home-experience-active .ty-hx-ai-tag3d-d { bottom: 12%; } } body.ty-home-experience-active .ty-hx-app-platform { display: flex !important; width: max-content; margin: 0 auto !important; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-qr { margin: 16px auto 12px !important; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-qr-scan { margin-left: auto !important; margin-right: auto !important; max-width: 460px; } body.ty-home-experience-active .ty-hx-app-card .ty-hx-btn { margin-left: auto !important; margin-right: auto !important; } @keyframes tyAiSpaceSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } } @keyframes tyAiStageTilt { 0%, 100% { transform: rotateX(0deg) rotateY(0deg); } 50% { transform: rotateX(6deg) rotateY(-7deg); } } @keyframes tyAiRingSpinA { from { transform: translate(-50%, -50%) rotateX(71deg) rotateZ(0deg); } to { transform: translate(-50%, -50%) rotateX(71deg) rotateZ(360deg); } } @keyframes tyAiRingSpinB { from { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(360deg); } to { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(0deg); } } @keyframes tyAiRingSpinC { from { transform: translate(-50%, -50%) rotateY(74deg) rotateZ(0deg); } to { transform: translate(-50%, -50%) rotateY(74deg) rotateZ(360deg); } } @keyframes tyAiCorePulse { 0%, 100% { transform: translate(-50%, -50%) rotateX(23deg) rotateY(-23deg) scale(1); } 50% { transform: translate(-50%, -50%) rotateX(20deg) rotateY(-18deg) scale(1.05); } } @keyframes tyAiTagFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -9px, 0); } } @keyframes tyAiSparkBlink { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } @media (max-width: 991px) { body.ty-home-experience-active .ty-hx-ai-future3d { min-height: 360px !important; } body.ty-home-experience-active .ty-hx-ai-tag3d { min-width: 82px; height: 34px; font-size: 11px; padding: 0 12px; } } @media (max-width: 767px) { body.ty-home-experience-active .ty-hx-ai-future3d { min-height: 320px !important; } body.ty-home-experience-active .ty-hx-ai-tag3d-a, body.ty-home-experience-active .ty-hx-ai-tag3d-b { top: 14%; } body.ty-home-experience-active .ty-hx-ai-tag3d-c, body.ty-home-experience-active .ty-hx-ai-tag3d-d { bottom: 12%; } } /* ============================================================ CENTER ALL SECTION HEADINGS + remove horizontal padding ============================================================ */ body.ty-home-experience-active .ty-hx-section-head { text-align: center !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-section-head h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } body.ty-home-experience-active .ty-hx-section-head p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Remove ALL horizontal padding site-wide */ body.ty-home-experience-active .ty-hx-root, body.ty-home-experience-active .ty-hx-wrap, body.ty-home-experience-active .ty-hx-section { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================ TRAVEL SERVICES — match screenshot 3: large centered title, no container box, cards fill full width ============================================================ */ body.ty-home-experience-active .ty-hx-service-universe .ty-hx-section-head { text-align: center !important; margin-bottom: 28px !important; } body.ty-home-experience-active .ty-hx-service-universe .ty-hx-section-head h2 { background: linear-gradient(80deg, #69b414 20%, #ff1313 30%, #3b5236 62%, #f2ea06 100%) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; animation: tyGradientMove 7.6s linear infinite !important; } body.ty-home-experience-active .ty-hx-service-universe .ty-hx-section-head p { font-size: clamp(15px, 1.4vw, 20px) !important; text-align: center !important; color: #a8cce8 !important; } body.ty-home-experience-active .ty-hx-service-scroll { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; cursor: default !important; } body.ty-home-experience-active .ty-hx-service-track { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; animation: none !important; background: transparent !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-service-track .ty-hx-service-showcase:nth-child(n + 6) { display: none !important; } /* Hide Explore button */ body.ty-home-experience-active .ty-hx-explore-btn { display: none !important; } /* Cards smaller */ body.ty-home-experience-active .ty-hx-service-showcase { width: auto !important; min-height: 220px !important; padding: 16px !important; } /* ============================================================ HERO GALAXY — FINAL DEFINITIVE FIX ============================================================ */ /* Kill ALL top spacing everywhere */ body.ty-home-experience-active .ty-hx-root, body.ty-home-experience-active .ty-hx-wrap, body.ty-home-experience-active .ty-hx-hero, body.ty-home-experience-active .ty-hx-hero-shell { padding-top: 0 !important; margin-top: 0 !important; gap: 0 !important; } /* RESTORE hero copy col — it was wrongly hidden */ body.ty-home-experience-active .ty-hx-hero-copy-col { display: block !important; max-width: 980px !important; width: 100% !important; margin: 0 auto !important; text-align: center !important; padding-top: clamp(10px, 1.5vw, 20px) !important; } /* Scene: full-width, compact height so it sits right below copy */ body.ty-home-experience-active .ty-hx-visual-scene, body.ty-home-experience-active .ty-hx-visual-scene.ty-hx-orbit-stage { min-height: clamp(480px, 56vw, 700px) !important; height: clamp(480px, 56vw, 700px) !important; max-height: none !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-top: 0 !important; overflow: hidden !important; position: relative !important; } /* Canvas: fill the scene naturally — NOT absolute/inset:0 */ body.ty-home-experience-active .ty-hx-orbit-stage .ty-hx-orbit-canvas { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; min-height: inherit !important; overflow: hidden !important; } /* Core/logo — hard-center in canvas */ body.ty-home-experience-active .ty-hx-orbit-canvas .ty-hx-tripyai-core, body.ty-home-experience-active .ty-hx-tripyai-core { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; translate: none !important; z-index: 10 !important; width: clamp(240px, 27vw, 380px) !important; } /* Depth tunnel centered */ body.ty-home-experience-active .ty-hx-depth-tunnel { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } /* Image orbit centered */ body.ty-home-experience-active .ty-hx-image-orbit { position: absolute !important; inset: 15% !important; z-index: 9 !important; } /* Hint pill — top center */ body.ty-home-experience-active .ty-hx-orbit-hint { position: absolute !important; left: 50% !important; top: 16px !important; bottom: auto !important; transform: translateX(-50%) !important; z-index: 30 !important; white-space: nowrap !important; } /* Label/signal containers */ body.ty-home-experience-active .ty-hx-orbit-labels, body.ty-home-experience-active .ty-hx-signal-cloud { animation: none !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; } body.ty-home-experience-active .ty-hx-orbit-labels { z-index: 7 !important; } body.ty-home-experience-active .ty-hx-signal-cloud { z-index: 8 !important; } /* Labels */ body.ty-home-experience-active .ty-hx-orbit-label { position: absolute !important; transform: none !important; font-size: clamp(13px, 1.1vw, 17px) !important; font-weight: 700 !important; color: rgba(140, 210, 255, 0.92) !important; text-shadow: 0 0 16px rgba(0, 180, 255, 0.65) !important; white-space: nowrap !important; letter-spacing: 0.04em !important; animation: tyLabelDrift 18s ease-in-out infinite !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(1) { left: 5% !important; top: 20% !important; animation-delay: 0s !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(2) { left: 66% !important; top: 14% !important; animation-delay: -2s !important; color: rgba(200,160,255,0.92) !important; text-shadow: 0 0 16px rgba(160,80,255,0.6) !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(3) { left: 78% !important; top: 34% !important; animation-delay: -4s !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(4) { left: 4% !important; top: 50% !important; animation-delay: -6s !important; color: rgba(255,180,120,0.92) !important; text-shadow: 0 0 16px rgba(255,140,60,0.6) !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(5) { left: 64% !important; top: 76% !important; animation-delay: -8s !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(6) { left: 14% !important; top: 80% !important; animation-delay: -10s !important; color: rgba(120,255,200,0.92) !important; text-shadow: 0 0 16px rgba(0,220,160,0.6) !important; } body.ty-home-experience-active .ty-hx-orbit-label:nth-child(7) { left: 82% !important; top: 60% !important; animation-delay: -12s !important; color: rgba(255,140,200,0.92) !important; text-shadow: 0 0 16px rgba(255,80,180,0.6) !important; } @keyframes tyLabelDrift { 0%, 100% { transform: translate(0, 0); opacity: 0.9; } 25% { transform: translate(6px, -10px); opacity: 1; } 50% { transform: translate(-4px, 8px); opacity: 0.7; } 75% { transform: translate(8px, 4px); opacity: 0.95; } } /* Signals */ body.ty-home-experience-active .ty-hx-signal { position: absolute !important; transform: none !important; font-size: clamp(12px, 1vw, 15px) !important; font-weight: 700 !important; color: rgba(160, 220, 255, 0.88) !important; text-shadow: 0 0 14px rgba(0, 180, 255, 0.55) !important; white-space: nowrap !important; max-width: none !important; animation: tySignalScatterFloat 14s ease-in-out infinite var(--sig-delay) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(1) { left: 8% !important; top: 28% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(2) { left: 74% !important; top: 18% !important; color: rgba(200,155,255,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(3) { left: 6% !important; top: 64% !important; color: rgba(120,255,195,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(4) { left: 84% !important; top: 44% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(5) { left: 52% !important; top: 84% !important; color: rgba(255,180,120,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(6) { left: 22% !important; top: 88% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(7) { left: 88% !important; top: 72% !important; color: rgba(255,140,200,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(8) { left: 36% !important; top: 14% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(9) { left: 4% !important; top: 35% !important; color: rgba(120,240,255,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(10) { left: 68% !important; top: 90% !important; color: rgba(200,155,255,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(11) { left: 54% !important; top: 28% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(12) { left: 16% !important; top: 56% !important; color: rgba(255,200,100,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(13) { left: 86% !important; top: 30% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(14) { left: 30% !important; top: 92% !important; color: rgba(120,255,195,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(15) { left: 60% !important; top: 58% !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(16) { left: 10% !important; top: 76% !important; color: rgba(255,140,200,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(17) { left: 12% !important; top: 45% !important; color: rgba(140,220,255,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(18) { left: 74% !important; top: 10% !important; color: rgba(255,190,120,0.88) !important; } body.ty-home-experience-active .ty-hx-signal:nth-child(19) { left: 44% !important; top: 8% !important; color: rgba(120,255,195,0.88) !important; } @keyframes tySignalScatterFloat { 0%, 100% { transform: translate(0, 0); opacity: 0.88; } 30% { transform: translate(5px, -8px); opacity: 1; } 60% { transform: translate(-6px, 5px); opacity: 0.6; } 80% { transform: translate(4px, -3px); opacity: 0.92; } } /* Stars visible */ body.ty-home-experience-active .ty-hx-stars { z-index: 2 !important; opacity: 0.72 !important; position: fixed !important; } body.ty-home-experience-active .ty-hx-stars-b { z-index: 2 !important; opacity: 0.44 !important; position: fixed !important; } body.ty-home-experience-active .ty-hx-galaxy-canvas { z-index: 0 !important; } /* Grab cursor */ body.ty-home-experience-active .ty-hx-orbit-canvas { cursor: grab !important; } body.ty-home-experience-active .ty-hx-orbit-canvas.is-h-dragging { cursor: grabbing !important; } /* ============================================================ LIVE RIBBON — no container, edge to edge infinite strip ============================================================ */ body.ty-home-experience-active .ty-hx-live-ribbon { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-top: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee-card { min-width: 200px !important; max-width: 200px !important; height: 120px !important; border-radius: 14px !important; overflow: hidden !important; flex-shrink: 0 !important; } /* ============================================================ INFINITE SCROLL STRIPS — no container box, edge to edge Orbit Constellation + Partner Power Matrix ============================================================ */ /* Break out of wrap padding for both sections */ body.ty-home-experience-active .ty-hx-ecosystem-block, body.ty-home-experience-active .ty-hx-partners { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden !important; } /* Section heads stay centered with readable width */ body.ty-home-experience-active .ty-hx-ecosystem-block .ty-hx-section-head, body.ty-home-experience-active .ty-hx-partners .ty-hx-section-head { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 24px !important; } /* Feature scroll — strip all container styling */ body.ty-home-experience-active .ty-hx-feature-scroll { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 24px !important; overflow: hidden !important; width: 100% !important; position: relative !important; } /* Each track row: seamless infinite marquee */ body.ty-home-experience-active .ty-hx-feature-track { display: flex !important; gap: 16px !important; width: max-content !important; padding: 8px 0 !important; } body.ty-home-experience-active .ty-hx-feature-track + .ty-hx-feature-track { margin-top: 16px !important; } /* Row A scrolls left, Row B scrolls right for galaxy feel */ body.ty-home-experience-active .ty-hx-feature-track-a { animation: tyMarqueeLeft 55s linear infinite !important; } body.ty-home-experience-active .ty-hx-feature-track-b { animation: tyMarqueeRight 70s linear infinite !important; } body.ty-home-experience-active .ty-hx-feature-scroll:hover .ty-hx-feature-track { animation-play-state: paused !important; } @keyframes tyMarqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes tyMarqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Cards: no background container, just cards floating */ body.ty-home-experience-active .ty-hx-point-pill { min-width: 280px !important; max-width: 280px !important; flex-shrink: 0 !important; border-radius: 16px !important; background: linear-gradient(145deg, rgba(8,20,48,0.88), rgba(10,16,36,0.92)) !important; border: 1px solid rgba(80,160,240,0.22) !important; box-shadow: 0 8px 24px rgba(2,8,24,0.5) !important; padding: 18px 20px !important; } /* Partner Power Matrix — convert grid to infinite scroll strip */ body.ty-home-experience-active .ty-hx-partner-cards { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; gap: 16px !important; padding: 8px 0 !important; animation: tyMarqueeLeft 48s linear infinite !important; grid-template-columns: none !important; } body.ty-home-experience-active .ty-hx-partners:hover .ty-hx-partner-cards { animation-play-state: paused !important; } body.ty-home-experience-active .ty-hx-partners .ty-hx-grid-cards { overflow: hidden !important; width: 100% !important; margin-top: 24px !important; } body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card { min-width: 300px !important; max-width: 300px !important; flex-shrink: 0 !important; min-height: 220px !important; } /* ============================================================ MOBILE FIXES — max-width: 767px ONLY Desktop is completely untouched. ============================================================ */ @media (max-width: 767px) { /* ── Hero section: compact ── */ body.ty-home-experience-active .ty-hx-hero-copy-col { padding-top: 8px !important; padding-bottom: 0 !important; text-align: center !important; } body.ty-home-experience-active .ty-hx-visual-scene, body.ty-home-experience-active .ty-hx-visual-scene.ty-hx-orbit-stage { min-height: 135vw !important; height: 135vw !important; max-height: 135vw !important; } /* ── Orbit: show ALL 8 cards in a full circle, larger radius ── */ body.ty-home-experience-active .ty-hx-image-orbit { --orbit-radius: 42vw !important; inset: 4% !important; } /* Show all 8, undo any previous hide */ body.ty-home-experience-active .ty-hx-orbit-item:nth-child(n + 6) { display: block !important; } body.ty-home-experience-active .ty-hx-orbit-item { width: 62px !important; height: 62px !important; border-radius: 12px !important; } body.ty-home-experience-active .ty-hx-orbit-item img { width: 62px !important; height: 62px !important; object-fit: cover !important; } /* ── Hide figcaption titles on orbit cards ── */ body.ty-home-experience-active .ty-hx-orbit-item figcaption { display: none !important; } /* ── Logo core smaller ── */ body.ty-home-experience-active .ty-hx-tripyai-core { width: 26vw !important; } /* ── Hide ALL floating text labels/signals ── */ body.ty-home-experience-active .ty-hx-orbit-labels, body.ty-home-experience-active .ty-hx-signal-cloud, body.ty-home-experience-active .ty-hx-orbit-label, body.ty-home-experience-active .ty-hx-signal { display: none !important; } /* ── Hint pill: compact ── */ body.ty-home-experience-active .ty-hx-orbit-hint { font-size: 11px !important; padding: 6px 12px !important; top: 8px !important; white-space: normal !important; text-align: center !important; max-width: 58vw !important; } /* ── Depth tunnel rings ── */ body.ty-home-experience-active .ty-hx-depth-tunnel { width: 78vw !important; height: 78vw !important; } /* ── Section headings ── */ body.ty-home-experience-active .ty-hx-section-head h2 { font-size: clamp(28px, 9vw, 44px) !important; } /* ── IMAGE 2 FIX: Meet Tripy — center title and content on mobile ── */ body.ty-home-experience-active .ty-hx-ai-layout, body.ty-home-experience-active .ty-hx-ai-layout-v5 { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; } body.ty-home-experience-active .ty-hx-ai-content { text-align: center !important; max-width: 100% !important; } body.ty-home-experience-active .ty-hx-ai-content h3, body.ty-home-experience-active .ty-hx-ai-title { text-align: center !important; } body.ty-home-experience-active .ty-hx-ai-bullets { text-align: left !important; display: inline-block !important; } body.ty-home-experience-active .ty-hx-ai-chip-row { justify-content: center !important; } /* ── IMAGE 1 FIX: Service cards → horizontal scroll strip on mobile ── */ body.ty-home-experience-active .ty-hx-service-universe { overflow: hidden !important; } body.ty-home-experience-active .ty-hx-service-scroll { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; padding-bottom: 12px !important; } body.ty-home-experience-active .ty-hx-service-track { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 12px !important; width: max-content !important; padding: 4px 16px 4px 16px !important; } /* undo the nth-child(n+6) hide from service track */ body.ty-home-experience-active .ty-hx-service-track .ty-hx-service-showcase:nth-child(n + 6) { display: block !important; } body.ty-home-experience-active .ty-hx-service-showcase { min-width: 200px !important; max-width: 200px !important; min-height: 220px !important; flex-shrink: 0 !important; padding: 14px !important; scroll-snap-align: start !important; } /* ── IMAGE 4 FIX: Orbit Constellation cards smaller on mobile ── */ body.ty-home-experience-active .ty-hx-point-pill { min-width: 200px !important; max-width: 200px !important; padding: 12px 14px !important; } body.ty-home-experience-active .ty-hx-point-pill h3 { font-size: 14px !important; } body.ty-home-experience-active .ty-hx-point-pill p { font-size: 12px !important; } /* Partner cards smaller */ body.ty-home-experience-active .ty-hx-partner-cards .ty-hx-card { min-width: 220px !important; max-width: 220px !important; min-height: 170px !important; } /* Live ribbon images smaller */ body.ty-home-experience-active .ty-hx-live-ribbon .ty-hx-marquee-card { min-width: 130px !important; max-width: 130px !important; height: 85px !important; } /* Feature track speeds on mobile */ body.ty-home-experience-active .ty-hx-feature-track-a { animation-duration: 35s !important; } body.ty-home-experience-active .ty-hx-feature-track-b { animation-duration: 45s !important; } }