{"id":30323,"date":"2026-05-19T09:31:47","date_gmt":"2026-05-19T09:31:47","guid":{"rendered":"https:\/\/onionlabs.link\/travelart\/?page_id=30323"},"modified":"2026-06-15T11:54:39","modified_gmt":"2026-06-15T11:54:39","slug":"leisure-tour","status":"publish","type":"page","link":"https:\/\/onionlabs.link\/travelart\/leisure-tour\/","title":{"rendered":"Leisure Tour"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \n TravelArt Africa | Leisure Tours<\/title>\n <script>\n document.documentElement.classList.add(\"js\");\n if (new URLSearchParams(window.location.search).get(\"embed\") === \"1\") {\n document.documentElement.classList.add(\"embed-mode\");\n }\n <\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;700;900&family=Outfit:wght@500;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --green: #00fad3;\n --black: #020202;\n --white: #ffffff;\n --ink: #111111;\n --muted: #686868;\n --line: rgba(0, 0, 0, .13);\n --soft: #f4f4f2;\n --radius: 10px;\n }\n\n * { box-sizing: border-box; }\n\n html {\n scroll-behavior: smooth;\n background: var(--white);\n }\n\n body {\n margin: 0;\n overflow-x: hidden;\n color: var(--ink);\n background:\n linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px) 0 0 \/ 72px 72px,\n linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px) 0 0 \/ 72px 72px,\n var(--white);\n font-family: \"DM Sans\", Arial, sans-serif;\n }\n\n ::selection {\n color: var(--black);\n background: var(--green);\n }\n\n a { color: inherit; text-decoration: none; }\n button, a { -webkit-tap-highlight-color: transparent; }\n\n .progress {\n position: fixed;\n z-index: 100;\n top: 0;\n left: 0;\n width: 0;\n height: 4px;\n background: var(--green);\n }\n\n \/* ---------- HERO ---------- *\/\n .hero {\n --hero-gutter: clamp(20px, 5vw, 72px);\n position: relative;\n min-height: 100svh;\n display: grid;\n align-items: end;\n overflow: hidden;\n padding: 130px var(--hero-gutter) 46px;\n color: var(--white);\n background: var(--black);\n }\n\n .hero-media {\n position: absolute;\n inset: 0;\n z-index: 0;\n overflow: hidden;\n }\n\n .hero-media video,\n .hero-media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(.35) contrast(1.1);\n transform: scale(1.06);\n }\n\n .hero-media::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background:\n linear-gradient(90deg, rgba(2, 2, 2, .9), rgba(2, 2, 2, .45) 52%, rgba(2, 2, 2, .82)),\n radial-gradient(circle at 78% 26%, rgba(0, 250, 211, .35), transparent 30%);\n }\n\n .hero::before {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 1;\n opacity: .22;\n background:\n linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 \/ 72px 72px,\n linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 \/ 72px 72px;\n mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);\n }\n\n .hero-inner {\n position: relative;\n z-index: 3;\n width: min(1240px, 100%);\n margin: 0 auto;\n }\n\n .eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 23px;\n color: var(--green);\n font-size: 13px;\n font-weight: 900;\n letter-spacing: .1em;\n text-transform: uppercase;\n }\n\n .eyebrow::before {\n content: \"\";\n width: 42px;\n height: 2px;\n background: currentColor;\n }\n\n h1, h2, h3, p { margin-top: 0; }\n\n h1, h2, h3 {\n margin-bottom: 0;\n font-family: \"Outfit\", \"DM Sans\", Arial, sans-serif;\n letter-spacing: -.045em;\n }\n\n h1 {\n max-width: 1060px;\n font-size: clamp(58px, 12vw, 168px);\n line-height: .8;\n text-transform: uppercase;\n }\n\n .hero h1 { color: var(--white); }\n\n .stroke {\n display: block;\n color: transparent;\n -webkit-text-stroke: 1px var(--green);\n text-stroke: 1px var(--green);\n }\n\n .hero-bottom {\n display: grid;\n grid-template-columns: minmax(0, 660px) 1fr;\n gap: 36px;\n align-items: end;\n margin-top: 36px;\n }\n\n .hero-copy {\n margin: 0;\n color: rgba(255, 255, 255, .78);\n font-size: clamp(17px, 2vw, 21px);\n line-height: 1.55;\n }\n\n .hero-note {\n justify-self: end;\n max-width: 260px;\n padding-left: 18px;\n border-left: 2px solid var(--green);\n color: rgba(255, 255, 255, .68);\n font-size: 12px;\n font-weight: 700;\n line-height: 1.6;\n text-transform: uppercase;\n }\n\n .scroll-cue {\n position: absolute;\n z-index: 3;\n bottom: 96px;\n right: var(--hero-gutter);\n display: grid;\n gap: 10px;\n justify-items: center;\n color: rgba(255, 255, 255, .6);\n font-size: 10px;\n font-weight: 900;\n letter-spacing: .25em;\n text-transform: uppercase;\n writing-mode: vertical-rl;\n }\n\n .scroll-cue i {\n width: 1px;\n height: 54px;\n background: linear-gradient(var(--green), transparent);\n animation: drip 1.8s ease-in-out infinite;\n }\n\n .marquee {\n position: relative;\n z-index: 4;\n width: calc(100% + var(--hero-gutter) + var(--hero-gutter));\n margin: 48px calc(0px - var(--hero-gutter)) -46px;\n overflow: hidden;\n color: var(--black);\n background: var(--green);\n font-size: 13px;\n font-weight: 900;\n letter-spacing: .06em;\n text-transform: uppercase;\n }\n\n .marquee-track {\n display: flex;\n min-width: max-content;\n animation: marquee 26s linear infinite;\n }\n\n .marquee span { padding: 18px 25px; white-space: nowrap; }\n .marquee span::after { content: \"\u2726\"; margin-left: 50px; color: rgba(0,0,0,.5); }\n\n \/* ---------- SECTIONS ---------- *\/\n .section {\n padding: clamp(78px, 10vw, 136px) clamp(20px, 5vw, 72px);\n }\n\n .section-inner {\n width: min(1180px, 100%);\n margin: 0 auto;\n }\n\n .manifesto {\n display: grid;\n grid-template-columns: minmax(180px, 290px) minmax(0, 1fr);\n gap: clamp(34px, 8vw, 118px);\n align-items: start;\n }\n\n .section-label {\n display: flex;\n align-items: center;\n gap: 12px;\n color: var(--muted);\n font-size: 12px;\n font-weight: 900;\n letter-spacing: .12em;\n text-transform: uppercase;\n }\n\n .section-label::before {\n content: \"\";\n width: 13px;\n height: 13px;\n border: 3px solid var(--black);\n border-radius: 50%;\n background: var(--green);\n }\n\n .manifesto-copy {\n margin: 0;\n font-family: \"Outfit\", sans-serif;\n font-size: clamp(31px, 5vw, 64px);\n font-weight: 900;\n letter-spacing: -.045em;\n line-height: 1;\n }\n\n .manifesto-copy em {\n color: var(--black);\n background: var(--green);\n font-style: normal;\n box-shadow: .18em 0 0 var(--green), -.02em 0 0 var(--green);\n }\n\n \/* ---------- EXPERIENCES (video cards) ---------- *\/\n .experiences { padding-top: 0; }\n\n .exp-head {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);\n gap: 40px;\n align-items: end;\n margin-bottom: clamp(36px, 5vw, 60px);\n }\n\n .exp-head h2 {\n font-size: clamp(44px, 8vw, 104px);\n line-height: .84;\n text-transform: uppercase;\n }\n\n .exp-head p {\n margin: 0;\n color: var(--muted);\n font-size: 16px;\n line-height: 1.65;\n }\n\n .exp-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n }\n\n .exp-card {\n position: relative;\n min-height: clamp(320px, 42vw, 460px);\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n border-radius: var(--radius);\n color: var(--white);\n background: var(--black);\n isolation: isolate;\n }\n\n .exp-card video,\n .exp-card img {\n position: absolute;\n inset: 0;\n z-index: -2;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.05);\n transition: transform 1s cubic-bezier(.2, .8, .2, 1);\n }\n\n .exp-card::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: -1;\n background: linear-gradient(to top, rgba(2, 2, 2, .88) 4%, rgba(2, 2, 2, .25) 55%, rgba(2, 2, 2, .35));\n transition: background .4s ease;\n }\n\n .exp-card:hover video,\n .exp-card:hover img { transform: scale(1.12); }\n\n .exp-card:hover::after {\n background: linear-gradient(to top, rgba(2, 2, 2, .9) 6%, rgba(0, 250, 211, .14) 60%, rgba(2, 2, 2, .3));\n }\n\n .exp-body {\n position: relative;\n padding: clamp(22px, 3vw, 34px);\n }\n\n .exp-index {\n display: inline-block;\n margin-bottom: 14px;\n padding: 5px 12px;\n border: 1px solid rgba(255, 255, 255, .35);\n border-radius: 999px;\n color: var(--green);\n font-size: 11px;\n font-weight: 900;\n letter-spacing: .14em;\n text-transform: uppercase;\n }\n\n .exp-card h3 {\n color: var(--white);\n font-size: clamp(28px, 3.4vw, 46px);\n line-height: .95;\n text-transform: uppercase;\n }\n\n .exp-card p {\n max-width: 360px;\n margin: 14px 0 0;\n color: rgba(255, 255, 255, .76);\n font-size: 15px;\n line-height: 1.6;\n }\n\n \/* ---------- PROCESS ---------- *\/\n .journey {\n overflow: hidden;\n color: var(--white);\n background: var(--black);\n }\n\n .journey-head {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);\n gap: 40px;\n align-items: end;\n padding-bottom: clamp(46px, 7vw, 82px);\n border-bottom: 1px solid rgba(255, 255, 255, .16);\n }\n\n .journey h2 {\n max-width: 820px;\n color: var(--white);\n font-size: clamp(48px, 9vw, 112px);\n line-height: .82;\n text-transform: uppercase;\n }\n\n .journey-head p {\n margin: 0;\n color: rgba(255, 255, 255, .67);\n font-size: 17px;\n line-height: 1.65;\n }\n\n .steps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n }\n\n .step {\n position: relative;\n min-height: 260px;\n padding: 34px 22px 0 0;\n border-right: 1px solid rgba(255, 255, 255, .16);\n }\n\n .step:not(:first-child) { padding-left: 24px; }\n .step:last-child { border-right: 0; }\n\n .step-index {\n display: grid;\n place-items: center;\n width: 48px;\n height: 48px;\n margin-bottom: 42px;\n border: 1px solid rgba(255, 255, 255, .22);\n border-radius: 50%;\n color: var(--green);\n font-family: \"Outfit\", sans-serif;\n font-weight: 900;\n }\n\n .step h3 {\n color: var(--white);\n font-size: 23px;\n text-transform: uppercase;\n }\n\n .step p {\n margin: 12px 0 0;\n color: rgba(255, 255, 255, .55);\n font-size: 14px;\n line-height: 1.55;\n }\n\n \/* ---------- STYLES (luxury \/ midrange \/ value) ---------- *\/\n .tiers { padding-bottom: 0; }\n\n .tier-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n border: 1px solid var(--line);\n background: var(--line);\n }\n\n .tier {\n position: relative;\n min-height: 340px;\n display: grid;\n align-content: space-between;\n overflow: hidden;\n padding: clamp(24px, 3vw, 38px);\n background: var(--white);\n transition: color .35s ease, background .35s ease;\n }\n\n .tier:hover { color: var(--white); background: var(--black); }\n .tier:hover h3 { color: var(--white); }\n .tier:hover p { color: rgba(255, 255, 255, .7); }\n .tier:hover .tier-tag { border-color: var(--green); color: var(--green); }\n\n .tier-tag {\n justify-self: start;\n padding: 6px 13px;\n border: 1px solid var(--line);\n border-radius: 999px;\n color: var(--muted);\n font-size: 11px;\n font-weight: 900;\n letter-spacing: .14em;\n text-transform: uppercase;\n transition: color .35s ease, border-color .35s ease;\n }\n\n .tier h3 {\n margin-top: 28px;\n font-size: clamp(30px, 3.4vw, 46px);\n line-height: .95;\n text-transform: uppercase;\n }\n\n .tier h3 b { color: var(--green); font-weight: inherit; }\n\n .tier p {\n max-width: 300px;\n margin: 16px 0 0;\n color: var(--muted);\n font-size: 15px;\n line-height: 1.65;\n transition: color .35s ease;\n }\n\n \/* ---------- VIDEO BAND ---------- *\/\n .band {\n position: relative;\n display: grid;\n place-items: center;\n min-height: 78svh;\n overflow: hidden;\n padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 72px);\n color: var(--white);\n text-align: center;\n background: var(--black);\n }\n\n .band video,\n .band img {\n position: absolute;\n inset: 0;\n z-index: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: grayscale(.4) contrast(1.08);\n }\n\n .band::after {\n content: \"\";\n position: absolute;\n inset: 0;\n z-index: 1;\n background:\n radial-gradient(circle at center, rgba(2, 2, 2, .45), rgba(2, 2, 2, .82)),\n linear-gradient(rgba(0, 250, 211, .06), transparent);\n }\n\n .band-inner { position: relative; z-index: 2; }\n\n .band h2 {\n max-width: 980px;\n font-size: clamp(50px, 10vw, 150px);\n line-height: .8;\n text-transform: uppercase;\n }\n\n .band h2 span {\n display: block;\n color: transparent;\n -webkit-text-stroke: 1px var(--green);\n text-stroke: 1px var(--green);\n }\n\n .band p {\n max-width: 540px;\n margin: 26px auto 0;\n color: rgba(255, 255, 255, .72);\n font-size: 17px;\n line-height: 1.6;\n }\n\n \/* ---------- METRICS ---------- *\/\n .impact {\n background: var(--white);\n border-top: 1px solid var(--line);\n }\n\n .impact-grid {\n width: min(1180px, 100%);\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1px;\n border: 1px solid var(--line);\n background: var(--line);\n }\n\n .metric {\n min-height: 190px;\n display: grid;\n align-content: space-between;\n padding: 24px;\n background: var(--white);\n }\n\n .metric strong {\n font-family: \"Outfit\", sans-serif;\n font-size: clamp(40px, 6vw, 78px);\n line-height: .9;\n }\n\n .metric strong i { font-style: normal; color: var(--green); }\n\n .metric span {\n max-width: 170px;\n color: var(--muted);\n font-size: 13px;\n font-weight: 900;\n line-height: 1.35;\n text-transform: uppercase;\n }\n\n \/* ---------- CTA ---------- *\/\n .cta {\n padding-top: clamp(78px, 9vw, 112px);\n padding-bottom: clamp(78px, 9vw, 112px);\n color: var(--white);\n background: var(--black);\n }\n\n .cta-inner {\n position: relative;\n display: grid;\n justify-items: center;\n overflow: hidden;\n padding: clamp(60px, 9vw, 110px) 20px;\n border: 1px solid rgba(255, 255, 255, .15);\n border-radius: var(--radius);\n text-align: center;\n background:\n radial-gradient(circle at center, rgba(0, 250, 211, .16), transparent 40%),\n rgba(255, 255, 255, .025);\n }\n\n .cta h2 {\n max-width: 900px;\n color: var(--white);\n font-size: clamp(46px, 9vw, 116px);\n line-height: .83;\n text-transform: uppercase;\n }\n\n .cta h2 span { color: var(--green); }\n\n .cta p {\n max-width: 620px;\n margin: 28px auto 0;\n color: rgba(255, 255, 255, .65);\n font-size: 17px;\n line-height: 1.6;\n }\n\n .cta-actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 12px;\n margin-top: 35px;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 52px;\n padding: 13px 21px;\n border: 1px solid rgba(255, 255, 255, .2);\n border-radius: 999px;\n font-size: 12px;\n font-weight: 900;\n letter-spacing: .06em;\n text-transform: uppercase;\n transition: transform .25s ease, background .25s ease, color .25s ease;\n }\n\n .button-primary {\n border-color: var(--green);\n color: var(--black);\n background: var(--green);\n }\n\n .button:hover { transform: translateY(-3px); }\n .button-secondary:hover { color: var(--black); background: var(--white); }\n\n \/* ---------- REVEAL ---------- *\/\n .js .reveal {\n opacity: 0;\n transform: translateY(36px);\n transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);\n }\n\n .js .reveal.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n \/* Embedded (iframe) mode: the iframe has no real viewport height \u2014 it is\n auto-resized to content \u2014 so svh\/vh collapse or balloon. Size the tall\n sections by viewport WIDTH (reliable, since the iframe is full-width)\n and clamp so they stay sensible on phones and ultrawide screens alike. *\/\n .embed-mode .progress { display: none; }\n .embed-mode .hero { min-height: clamp(600px, 58vw, 880px); padding-top: 84px; }\n .embed-mode .band { min-height: clamp(440px, 40vw, 640px); }\n\n @keyframes marquee { to { transform: translateX(-50%); } }\n @keyframes drip {\n 0%, 100% { opacity: .2; transform: scaleY(.4); transform-origin: top; }\n 50% { opacity: 1; transform: scaleY(1); transform-origin: top; }\n }\n\n @media (max-width: 900px) {\n .hero-bottom,\n .manifesto,\n .exp-head,\n .journey-head { grid-template-columns: 1fr; }\n .hero-note { justify-self: start; }\n .scroll-cue { display: none; }\n .exp-grid { grid-template-columns: 1fr; }\n .tier-grid { grid-template-columns: 1fr; }\n .steps { grid-template-columns: repeat(2, 1fr); }\n .step:nth-child(2) { border-right: 0; }\n .step:nth-child(3),\n .step:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .16); }\n .impact-grid { grid-template-columns: repeat(2, 1fr); }\n }\n\n @media (max-width: 560px) {\n .hero { min-height: 94svh; padding-top: 108px; padding-bottom: 40px; }\n h1 { font-size: clamp(50px, 17vw, 78px); line-height: .82; }\n .hero-bottom { margin-top: 28px; }\n .hero-note { display: none; }\n .marquee { margin-bottom: -40px; }\n .manifesto-copy { font-size: clamp(30px, 10vw, 44px); }\n .steps { grid-template-columns: 1fr; }\n .step,\n .step:not(:first-child) {\n min-height: auto;\n padding: 28px 0;\n border-top: 1px solid rgba(255, 255, 255, .16);\n border-right: 0;\n }\n .step-index { margin-bottom: 22px; }\n .impact-grid { grid-template-columns: 1fr; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n scroll-behavior: auto !important;\n animation-duration: .001ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: .001ms !important;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"progress\" aria-hidden=\"true\"><\/div>\n\n <main>\n <!-- ========== HERO ========== -->\n <section class=\"hero\" id=\"top\">\n <div class=\"hero-media\" aria-hidden=\"true\">\n <video autoplay muted loop playsinline poster=\"Final.webp\">\n <source src=\"https:\/\/videos.pexels.com\/video-files\/2169880\/2169880-hd_1920_1080_30fps.mp4\" type=\"video\/mp4\">\n <\/video>\n <\/div>\n\n <div class=\"hero-inner\">\n <span class=\"eyebrow reveal\">TravelArt Africa \u00b7 Leisure Tours<\/span>\n <h1 class=\"reveal\">Your next <span class=\"stroke\">adventure<\/span> starts here<\/h1>\n\n <div class=\"hero-bottom\">\n <p class=\"hero-copy reveal\">Customized itineraries and holiday packages crafted around your budget, interests, and travel aspirations. Travel that goes beyond the destination, into meaningful experiences and stories that become part of your life.<\/p>\n <p class=\"hero-note reveal\">Personalized African safaris & immersive journeys. Luxury, midrange & value, all designed with a personal touch.<\/p>\n <\/div>\n\n <div class=\"marquee\" aria-hidden=\"true\">\n <div class=\"marquee-track\">\n <span>Big Five safaris<\/span><span>Tropical beaches<\/span><span>Vibrant cultures<\/span><span>Breathtaking landscapes<\/span><span>Plan less, experience more<\/span>\n <span>Big Five safaris<\/span><span>Tropical beaches<\/span><span>Vibrant cultures<\/span><span>Breathtaking landscapes<\/span><span>Plan less, experience more<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-cue\" aria-hidden=\"true\">Scroll <i><\/i><\/div>\n <\/section>\n\n <!-- ========== MANIFESTO ========== -->\n <section class=\"section\">\n <div class=\"section-inner manifesto\">\n <span class=\"section-label reveal\">The leisure promise<\/span>\n <p class=\"manifesto-copy reveal\">Travel is more than a destination. It is <em>meaningful experiences<\/em>, authentic connections, and stories worth collecting, crafted with integrity and a personal touch you can trust.<\/p>\n <\/div>\n <\/section>\n\n <!-- ========== EXPERIENCES (video cards) ========== -->\n <section class=\"section experiences\" id=\"experiences\">\n <div class=\"section-inner\">\n <div class=\"exp-head\">\n <h2 class=\"reveal\">Choose your<br>kind of wonder<\/h2>\n <p class=\"reveal\">Whether you dream of spotting the Big Five, unwinding on a tropical beach, exploring vibrant cultures, or venturing through breathtaking landscapes, every detail reflects your unique travel style.<\/p>\n <\/div>\n\n <div class=\"exp-grid\">\n <article class=\"exp-card reveal\">\n <video autoplay muted loop playsinline poster=\"Final.webp\">\n <source src=\"https:\/\/videos.pexels.com\/video-files\/4938477\/4938477-hd_1920_1080_25fps.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"exp-body\">\n <span class=\"exp-index\">01 \u00b7 Safari<\/span>\n <h3>Chase the Big Five<\/h3>\n <p>Game drives, expert guides, and front-row seats to the wild. Luxury lodges and boutique camps that blend comfort with authenticity.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"exp-card reveal\">\n <video autoplay muted loop playsinline poster=\"Final.webp\">\n <source src=\"https:\/\/videos.pexels.com\/video-files\/5918578\/5918578-hd_1920_1080_30fps.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"exp-body\">\n <span class=\"exp-index\">02 \u00b7 Coast<\/span>\n <h3>Unwind by the tide<\/h3>\n <p>Tropical beaches, turquoise water, and slow mornings. The kind of stillness that resets you, arranged down to the last detail.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"exp-card reveal\">\n <video autoplay muted loop playsinline poster=\"Final.webp\">\n <source src=\"https:\/\/videos.pexels.com\/video-files\/6195397\/6195397-hd_1920_1080_25fps.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"exp-body\">\n <span class=\"exp-index\">03 \u00b7 Culture<\/span>\n <h3>Meet living heritage<\/h3>\n <p>Vibrant cultures, local encounters, and conservation-focused experiences that respect communities and the places we visit.<\/p>\n <\/div>\n <\/article>\n\n <article class=\"exp-card reveal\">\n <video autoplay muted loop playsinline poster=\"Final.webp\">\n <source src=\"https:\/\/videos.pexels.com\/video-files\/7421701\/7421701-hd_1920_1080_25fps.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"exp-body\">\n <span class=\"exp-index\">04 \u00b7 Landscapes<\/span>\n <h3>Venture the vast<\/h3>\n <p>Breathtaking landscapes and extraordinary terrain, from highland trails to endless plains, paced exactly to your energy.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== PROCESS ========== -->\n <section class=\"section journey\" id=\"journey\">\n <div class=\"section-inner\">\n <div class=\"journey-head\">\n <h2 class=\"reveal\">Warm from the<br>first inquiry<\/h2>\n <p class=\"reveal\">Planning a trip can feel overwhelming in a world of endless choices. Our process is designed to be warm, engaging, and enjoyable from the very first hello. You dream it. We craft it.<\/p>\n <\/div>\n\n <div class=\"steps\">\n <article class=\"step reveal\">\n <span class=\"step-index\">01<\/span>\n <h3>Tell us your dream<\/h3>\n <p>Our consultants take time to understand your preferences, expectations, and budget.<\/p>\n <\/article>\n <article class=\"step reveal\">\n <span class=\"step-index\">02<\/span>\n <h3>We tailor it<\/h3>\n <p>Every detail is curated for luxury, midrange, or value, with transparent pricing throughout.<\/p>\n <\/article>\n <article class=\"step reveal\">\n <span class=\"step-index\">03<\/span>\n <h3>Refine together<\/h3>\n <p>Accommodations, transport, excursions, and special touches managed with precision and clear communication.<\/p>\n <\/article>\n <article class=\"step reveal\">\n <span class=\"step-index\">04<\/span>\n <h3>Just show up<\/h3>\n <p>Travel safely with professional guides while we handle the logistics. You collect the memories.<\/p>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== TRAVEL STYLES ========== -->\n <section class=\"section tiers\" id=\"styles\">\n <div class=\"section-inner\">\n <div class=\"exp-head\">\n <h2 class=\"reveal\">Your style,<br>your value<\/h2>\n <p class=\"reveal\">Each itinerary is thoughtfully curated for the way you like to travel, ensuring exceptional quality and genuine value that often exceeds expectations.<\/p>\n <\/div>\n\n <div class=\"tier-grid\">\n <article class=\"tier reveal\">\n <span class=\"tier-tag\">Tier 01<\/span>\n <div>\n <h3><b>Luxury<\/b> escapes<\/h3>\n <p>Premium lodges, boutique camps, and seamless white-glove service. Comfort and authenticity, beautifully balanced.<\/p>\n <\/div>\n <\/article>\n <article class=\"tier reveal\">\n <span class=\"tier-tag\">Tier 02<\/span>\n <div>\n <h3><b>Midrange<\/b> journeys<\/h3>\n <p>Exceptional experiences and thoughtful comfort at a smart, transparent price. The sweet spot for most travelers.<\/p>\n <\/div>\n <\/article>\n <article class=\"tier reveal\">\n <span class=\"tier-tag\">Tier 03<\/span>\n <div>\n <h3><b>Value<\/b> adventures<\/h3>\n <p>Genuine value without compromise on the moments that matter. Big experiences, considered budgets.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ========== VIDEO BAND ========== -->\n <section class=\"band\" id=\"band\">\n <video autoplay muted loop playsinline poster=\"Final.webp\" aria-hidden=\"true\">\n <source src=\"https:\/\/videos.pexels.com\/video-files\/3842823\/3842823-hd_1920_1080_30fps.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"band-inner\">\n <h2 class=\"reveal\">Plan less.<br><span>Experience more.<\/span><\/h2>\n <p class=\"reveal\">We seamlessly blend comfort with authenticity, so the only thing left for you to do is be present for every moment.<\/p>\n <\/div>\n <\/section>\n\n <!-- ========== METRICS ========== -->\n <section class=\"section impact\" id=\"impact\">\n <div class=\"impact-grid\">\n <div class=\"metric reveal\"><strong data-count=\"100\"><\/strong><span>Custom-built itineraries, no two alike<\/span><\/div>\n <div class=\"metric reveal\"><strong data-count=\"3\"><\/strong><span>Travel styles, luxury, midrange & value<\/span><\/div>\n <div class=\"metric reveal\"><strong data-count=\"24\"><\/strong><span>Hour care and clear communication<\/span><\/div>\n <div class=\"metric reveal\"><strong data-count=\"100\" data-suffix=\"%\"><\/strong><span>Of guests trusted with a personal touch<\/span><\/div>\n <\/div>\n <\/section>\n\n <!-- ========== CTA ========== -->\n <section class=\"section cta\" id=\"leisure-contact\">\n <div class=\"section-inner cta-inner reveal\">\n <span class=\"eyebrow\">TravelArt Africa leisure<\/span>\n <h2>Dreams crafted. <span>Memories made.<\/span><\/h2>\n <p>Tell us how you like to travel and we will shape a journey that transcends your expectations, where passion meets professionalism.<\/p>\n <div class=\"cta-actions\">\n <a class=\"button button-primary\" href=\"mailto:info@travelart.africa?subject=I%20want%20to%20plan%20a%20leisure%20trip\">Plan my trip<\/a>\n <a class=\"button button-secondary\" href=\"mailto:info@travelart.africa?subject=Tell%20me%20about%20your%20leisure%20tours\">Talk to a consultant<\/a>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n <script>\n const hasGSAP = window.gsap && window.ScrollTrigger;\n\n \/* ----- reveal fallback (works with or without GSAP) ----- *\/\n const revealElements = document.querySelectorAll(\".reveal\");\n if (\"IntersectionObserver\" in window) {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12 });\n revealElements.forEach((el, i) => {\n el.style.transitionDelay = `${Math.min(i % 4, 3) * 80}ms`;\n observer.observe(el);\n });\n } else {\n revealElements.forEach((el) => el.classList.add(\"is-visible\"));\n }\n\n \/* ----- progress bar ----- *\/\n const progress = document.querySelector(\".progress\");\n function updateProgress() {\n const distance = document.documentElement.scrollHeight - window.innerHeight;\n progress.style.width = `${distance > 0 ? (window.scrollY \/ distance) * 100 : 0}%`;\n }\n window.addEventListener(\"scroll\", updateProgress, { passive: true });\n updateProgress();\n\n \/* ----- GSAP enhancements ----- *\/\n if (hasGSAP) {\n gsap.registerPlugin(ScrollTrigger);\n\n gsap.timeline()\n .from(\".hero-media video, .hero-media img\", { scale: 1.22, duration: 1.6, ease: \"power3.out\" })\n .from(\".hero .reveal\", { y: 54, duration: .9, stagger: .14, ease: \"power3.out\" }, \"-=1\");\n\n gsap.to(\".hero-media video, .hero-media img\", {\n yPercent: 14,\n ease: \"none\",\n scrollTrigger: { trigger: \".hero\", start: \"top top\", end: \"bottom top\", scrub: true }\n });\n\n gsap.to(\".band video\", {\n yPercent: 12,\n ease: \"none\",\n scrollTrigger: { trigger: \".band\", start: \"top bottom\", end: \"bottom top\", scrub: true }\n });\n\n gsap.utils.toArray(\".metric strong\").forEach((el) => {\n const value = Number(el.dataset.count);\n const suffix = el.dataset.suffix || \"\";\n \/\/ Pre-fill the final value so the number is never blank if the\n \/\/ scroll trigger doesn't fire (e.g. inside an auto-sized iframe\n \/\/ that never scrolls). The tween still animates when triggered.\n el.innerHTML = `<i>${value}${suffix}<\/i>`;\n const obj = { val: 0 };\n gsap.to(obj, {\n val: value,\n duration: 1.6,\n ease: \"power2.out\",\n onUpdate: () => { el.innerHTML = `<i>${Math.round(obj.val)}${suffix}<\/i>`; },\n scrollTrigger: { trigger: el, start: \"top 88%\", once: true }\n });\n });\n } else {\n document.querySelectorAll(\".metric strong\").forEach((el) => {\n el.innerHTML = `<i>${el.dataset.count}${el.dataset.suffix || \"\"}<\/i>`;\n });\n }\n\n \/* ----- autoplay (muted, no controls) + pause offscreen to save resources ----- *\/\n function forcePlay(v) {\n \/\/ Re-assert the attributes autoplay policies require, then play.\n v.muted = true;\n v.defaultMuted = true;\n v.playsInline = true;\n v.controls = false;\n const attempt = () => v.play().catch(() => {});\n attempt();\n \/\/ Retry once the file has buffered enough, in case the first call was too early.\n v.addEventListener(\"canplay\", attempt, { once: true });\n v.addEventListener(\"loadeddata\", attempt, { once: true });\n }\n\n if (\"IntersectionObserver\" in window) {\n const vidObserver = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const v = entry.target;\n if (entry.isIntersecting) { forcePlay(v); }\n else { v.pause(); }\n });\n }, { threshold: 0, rootMargin: \"200px 0px\" });\n document.querySelectorAll(\"video\").forEach((v) => vidObserver.observe(v));\n } else {\n document.querySelectorAll(\"video\").forEach(forcePlay);\n }\n\n \/* ----- iframe height reporting (matches groups.html) ----- *\/\n function reportHeight() {\n if (window.parent !== window) {\n window.parent.postMessage({\n type: \"travelart-leisure-height\",\n height: document.documentElement.scrollHeight\n }, \"*\");\n }\n }\n window.addEventListener(\"load\", reportHeight);\n window.addEventListener(\"resize\", reportHeight);\n if (\"ResizeObserver\" in window) {\n new ResizeObserver(reportHeight).observe(document.body);\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>TravelArt Africa | Leisure Tours TravelArt Africa \u00b7 Leisure Tours Your next adventure starts here Customized itineraries and holiday packages crafted around your budget, interests, and travel aspirations. Travel that…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-30323","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/pages\/30323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/comments?post=30323"}],"version-history":[{"count":72,"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/pages\/30323\/revisions"}],"predecessor-version":[{"id":30752,"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/pages\/30323\/revisions\/30752"}],"wp:attachment":[{"href":"https:\/\/onionlabs.link\/travelart\/wp-json\/wp\/v2\/media?parent=30323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}