{"id":8,"date":"2026-08-12T18:27:42","date_gmt":"2026-08-12T18:27:42","guid":{"rendered":"https:\/\/joeythekangaroo.xyz\/?page_id=8"},"modified":"2026-08-12T19:54:46","modified_gmt":"2026-08-12T19:54:46","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/joeythekangaroo.xyz\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n JOEY \u2014 The Outback Sovereign ($JOEY)<\/title>\r\n \r\n <!-- Google Fonts: Space Grotesk & JetBrains Mono -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* ==========================================================\r\n 1. RESET & BASE STYLES\r\n ========================================================== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n html, body {\r\n width: 100%;\r\n min-height: 100vh;\r\n max-width: 100%;\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n background-color: #000000;\r\n color: #ffffff;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n\r\n \/* Video Background Full Screen Gelap Tipis *\/\r\n .video-bg-container {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n z-index: 0;\r\n }\r\n\r\n .video-bg-container::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(\r\n 180deg, \r\n rgba(0, 0, 0, 0.45) 0%, \r\n rgba(0, 0, 0, 0.15) 40%, \r\n rgba(0, 0, 0, 0.55) 100%\r\n );\r\n z-index: 1;\r\n }\r\n\r\n .video-bg-container video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: brightness(0.85) contrast(1.05);\r\n }\r\n\r\n \/* Main Container Fleksibel Bebas Scroll *\/\r\n .hero-container {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n padding: 2rem 4rem;\r\n gap: 2.5rem;\r\n z-index: 2;\r\n }\r\n\r\n \/* ==========================================================\r\n 2. NAVIGATION BAR & SLIM PILL CARD\r\n ========================================================== *\/\r\n .navbar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n height: 60px;\r\n }\r\n\r\n .navbar-top-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .brand-logo {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 2.3rem;\r\n font-weight: 900;\r\n letter-spacing: 2px;\r\n color: #ffffff;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n text-shadow: 0 4px 15px rgba(0,0,0,0.9);\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .brand-logo:hover { opacity: 0.8; }\r\n\r\n \/* WADAH CARD PILL SLIM NAV MENU *\/\r\n .nav-links-wrapper {\r\n background: rgba(0, 0, 0, 0.45);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n padding: 0.4rem 1.2rem;\r\n border-radius: 40px;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2rem;\r\n list-style: none;\r\n align-items: center;\r\n }\r\n\r\n .nav-links a {\r\n font-family: 'Space Grotesk', sans-serif;\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n letter-spacing: 1.2px;\r\n text-transform: uppercase;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n cursor: pointer;\r\n text-shadow: 0 2px 8px rgba(0,0,0,0.8);\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 50%;\r\n width: 0;\r\n height: 2px;\r\n background: #ffffff;\r\n transition: all 0.3s ease;\r\n transform: translateX(-50%);\r\n }\r\n\r\n .nav-links a:hover { color: #ffffff; }\r\n .nav-links a:hover::after { width: 100%; }\r\n\r\n .nav-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n }\r\n\r\n .btn-buy {\r\n font-family: 'Space Grotesk', sans-serif;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.65rem 1.4rem;\r\n background: #ffffff;\r\n border: none;\r\n border-radius: 30px;\r\n color: #000000;\r\n font-weight: 800;\r\n font-size: 0.88rem;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.6);\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-buy:hover {\r\n background: #f0f0f0;\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 25px rgba(255, 255, 255, 0.4);\r\n }\r\n\r\n .btn-buy svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: currentColor;\r\n }\r\n\r\n \/* ==========================================================\r\n 3. MIDDLE SECTION\r\n ========================================================== *\/\r\n .middle-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n width: 100%;\r\n margin-top: 0.5rem;\r\n gap: 2rem;\r\n }\r\n\r\n .offering-section {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.8rem;\r\n }\r\n\r\n .offering-title {\r\n font-size: 0.95rem;\r\n color: #ffffff;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.9);\r\n }\r\n\r\n .pills-group {\r\n display: flex;\r\n gap: 0.6rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .pill-btn {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background: rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n color: #ffffff;\r\n padding: 0.55rem 1.3rem;\r\n border-radius: 30px;\r\n font-size: 0.82rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.8);\r\n }\r\n\r\n .pill-btn:hover, .pill-btn.active {\r\n background: #ffffff;\r\n border-color: #ffffff;\r\n color: #000000;\r\n font-weight: 700;\r\n text-shadow: none;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 18px rgba(255,255,255,0.3);\r\n }\r\n\r\n \/* Card Aset Kanan Atas *\/\r\n .glass-card-asset {\r\n background: rgba(15, 15, 15, 0.45);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n border-radius: 20px;\r\n padding: 1rem;\r\n width: 300px;\r\n max-width: 100%;\r\n flex-shrink: 0;\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\r\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .glass-card-asset:hover {\r\n box-shadow: 0 25px 55px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .asset-img-container {\r\n width: 100%;\r\n min-height: 170px;\r\n max-height: 220px;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n background: rgba(0, 0, 0, 0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n }\r\n\r\n .asset-img-container img {\r\n width: 100%;\r\n height: 100%;\r\n max-height: 200px;\r\n display: block;\r\n object-fit: contain;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .glass-card-asset:hover .asset-img-container img {\r\n transform: scale(1.03);\r\n }\r\n\r\n .asset-description {\r\n font-size: 0.85rem;\r\n color: rgba(255, 255, 255, 0.9);\r\n margin-top: 0.8rem;\r\n line-height: 1.4;\r\n font-weight: 500;\r\n text-shadow: 0 1px 5px rgba(0,0,0,0.9);\r\n }\r\n\r\n \/* ==========================================================\r\n 4. BOTTOM SECTION\r\n ========================================================== *\/\r\n .bottom-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n width: 100%;\r\n margin-bottom: 0.5rem;\r\n gap: 3rem;\r\n }\r\n\r\n .bottom-left-box {\r\n max-width: 600px;\r\n width: 100%;\r\n }\r\n\r\n .main-headline {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 3.8rem;\r\n font-weight: 800;\r\n line-height: 1.05;\r\n letter-spacing: -1.5px;\r\n color: #ffffff;\r\n text-shadow: 0 4px 25px rgba(0, 0, 0, 0.95);\r\n }\r\n\r\n .ca-section {\r\n margin-top: 1.2rem;\r\n max-width: 460px;\r\n width: 100%;\r\n }\r\n\r\n .ca-title {\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: #ffffff;\r\n font-weight: 700;\r\n margin-bottom: 0.4rem;\r\n text-shadow: 0 2px 6px rgba(0,0,0,0.9);\r\n }\r\n\r\n .ca-box-white {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: #ffffff;\r\n border-radius: 12px;\r\n padding: 0.6rem 0.9rem;\r\n gap: 0.8rem;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);\r\n width: 100%;\r\n }\r\n\r\n .ca-text {\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.82rem;\r\n color: #111111;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n flex-grow: 1;\r\n min-width: 0;\r\n }\r\n\r\n .btn-copy-dark {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background: #111111;\r\n border: none;\r\n color: #ffffff;\r\n padding: 0.45rem 1rem;\r\n border-radius: 8px;\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn-copy-dark:hover {\r\n background: #333333;\r\n transform: scale(1.03);\r\n }\r\n\r\n .action-group {\r\n margin-top: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn-cta {\r\n font-family: 'Space Grotesk', sans-serif;\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0.85rem 1.8rem;\r\n border-radius: 40px;\r\n background: rgba(0, 0, 0, 0.55);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.4);\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n text-shadow: 0 2px 4px rgba(0,0,0,0.8);\r\n }\r\n\r\n .btn-cta:hover {\r\n background: #ffffff;\r\n color: #000000;\r\n text-shadow: none;\r\n box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .btn-cta.secondary {\r\n background: rgba(255, 255, 255, 0.2);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .btn-cta.secondary:hover {\r\n background: #ffffff;\r\n color: #000000;\r\n }\r\n\r\n .right-description {\r\n font-family: 'Space Grotesk', sans-serif;\r\n width: 320px;\r\n max-width: 100%;\r\n flex-shrink: 0;\r\n font-size: 0.9rem;\r\n line-height: 1.55;\r\n color: #ffffff;\r\n font-weight: 400;\r\n text-align: left;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.9);\r\n background: rgba(10, 10, 10, 0.45);\r\n padding: 1.2rem;\r\n border-radius: 16px;\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* ==========================================================\r\n 5. POPUP MODALS\r\n ========================================================== *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n backdrop-filter: blur(18px);\r\n -webkit-backdrop-filter: blur(18px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 100;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n padding: 1rem;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .modal-card {\r\n background: linear-gradient(\r\n 135deg, \r\n rgba(255, 255, 255, 0.12) 0%, \r\n rgba(20, 20, 20, 0.75) 100%\r\n );\r\n backdrop-filter: blur(30px);\r\n -webkit-backdrop-filter: blur(30px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n box-shadow: \r\n 0 30px 70px rgba(0, 0, 0, 0.9),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\r\n border-radius: 24px;\r\n padding: 2.2rem;\r\n max-width: 520px;\r\n width: 100%;\r\n position: relative;\r\n transform: scale(0.9) translateY(20px);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n }\r\n\r\n .modal-overlay.active .modal-card {\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n .modal-close {\r\n position: absolute;\r\n top: 1.2rem;\r\n right: 1.2rem;\r\n background: rgba(255, 255, 255, 0.15);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n color: #fff;\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.1rem;\r\n transition: all 0.2s;\r\n }\r\n\r\n .modal-close:hover {\r\n background: #ffffff;\r\n color: #000;\r\n }\r\n\r\n .modal-title {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.9rem;\r\n font-weight: 800;\r\n margin-bottom: 1rem;\r\n letter-spacing: -0.5px;\r\n color: #ffffff;\r\n }\r\n\r\n .modal-body {\r\n font-size: 0.95rem;\r\n line-height: 1.6;\r\n color: rgba(255, 255, 255, 0.92);\r\n font-weight: 400;\r\n }\r\n\r\n .passport-code {\r\n background: rgba(0, 0, 0, 0.7);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n border-radius: 12px;\r\n padding: 1.2rem;\r\n font-family: 'JetBrains Mono', monospace;\r\n font-size: 0.8rem;\r\n color: #a8ffb2;\r\n white-space: pre-wrap;\r\n margin-top: 1rem;\r\n line-height: 1.4;\r\n box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);\r\n overflow-x: auto;\r\n }\r\n\r\n .tokenomics-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1rem;\r\n margin-top: 1.2rem;\r\n }\r\n\r\n .tokenomics-item {\r\n background: rgba(255, 255, 255, 0.07);\r\n padding: 0.9rem 1.1rem;\r\n border-radius: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .tokenomics-item span {\r\n display: block;\r\n font-size: 0.75rem;\r\n color: rgba(255, 255, 255, 0.65);\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .tokenomics-item strong {\r\n font-size: 0.95rem;\r\n color: #fff;\r\n font-weight: 700;\r\n }\r\n\r\n .social-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 1rem;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .social-card-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.6rem;\r\n padding: 0.9rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n border-radius: 14px;\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .social-card-btn:hover {\r\n background: #ffffff;\r\n color: #000000;\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(255,255,255,0.25);\r\n }\r\n\r\n .social-card-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n\r\n \/* Toast Notification *\/\r\n .toast {\r\n position: fixed;\r\n bottom: 2rem;\r\n right: 2rem;\r\n background: #ffffff;\r\n color: #000000;\r\n padding: 0.75rem 1.6rem;\r\n border-radius: 30px;\r\n font-size: 0.88rem;\r\n font-weight: 700;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.6);\r\n transform: translateY(100px);\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n z-index: 200;\r\n }\r\n\r\n .toast.show {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n \/* ==========================================================\r\n 6. RESPONSIVE DESIGN (PENYESUAIAN KHUSUS LAYAR HP RAPI)\r\n ========================================================== *\/\r\n @media (max-width: 1200px) {\r\n .hero-container { padding: 2rem; }\r\n .main-headline { font-size: 3.2rem; }\r\n .glass-card-asset { width: 280px; }\r\n .right-description { width: 290px; }\r\n }\r\n\r\n @media (max-width: 880px) {\r\n .middle-content {\r\n flex-direction: column;\r\n gap: 1.5rem;\r\n }\r\n\r\n .glass-card-asset {\r\n width: 100%;\r\n }\r\n\r\n .bottom-content {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 2rem;\r\n }\r\n\r\n .right-description {\r\n width: 100%;\r\n }\r\n }\r\n\r\n \/* KHUSUS MOBILE LAYOUT SUPER PRESISI & TIDAK TERPOTONG *\/\r\n @media (max-width: 768px) {\r\n .hero-container {\r\n padding: 1.2rem 1rem;\r\n gap: 1.8rem;\r\n height: auto;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* Navbar Mobile *\/\r\n .navbar {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1rem;\r\n height: auto;\r\n }\r\n\r\n .navbar-top-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n .brand-logo {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .btn-buy {\r\n padding: 0.5rem 1rem;\r\n font-size: 0.8rem;\r\n }\r\n\r\n \/* Scrollable Nav Links Pill *\/\r\n .nav-links-wrapper {\r\n width: 100%;\r\n max-width: 100%;\r\n overflow-x: auto;\r\n padding: 0.4rem 0.8rem;\r\n border-radius: 30px;\r\n box-sizing: border-box;\r\n }\r\n\r\n .nav-links-wrapper::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .nav-links {\r\n gap: 1.2rem;\r\n justify-content: flex-start;\r\n }\r\n\r\n .nav-links a {\r\n font-size: 0.78rem;\r\n letter-spacing: 0.8px;\r\n }\r\n\r\n \/* Middle Content Mobile *\/\r\n .middle-content {\r\n gap: 1.2rem;\r\n margin-top: 0;\r\n }\r\n\r\n .pills-group {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n }\r\n\r\n .pill-btn {\r\n width: 100%;\r\n text-align: center;\r\n font-size: 0.8rem;\r\n padding: 0.6rem 1rem;\r\n }\r\n\r\n .glass-card-asset {\r\n width: 100%;\r\n padding: 0.8rem;\r\n }\r\n\r\n .asset-img-container {\r\n min-height: 150px;\r\n max-height: 180px;\r\n }\r\n\r\n \/* Bottom Content Mobile *\/\r\n .bottom-content {\r\n gap: 1.5rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .bottom-left-box {\r\n width: 100%;\r\n }\r\n\r\n .main-headline {\r\n font-size: 2.1rem;\r\n line-height: 1.1;\r\n letter-spacing: -0.8px;\r\n word-break: break-word;\r\n }\r\n\r\n .ca-section {\r\n max-width: 100%;\r\n margin-top: 1rem;\r\n }\r\n\r\n .ca-box-white {\r\n padding: 0.55rem 0.75rem;\r\n gap: 0.5rem;\r\n }\r\n\r\n .ca-text {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .btn-copy-dark {\r\n padding: 0.4rem 0.8rem;\r\n font-size: 0.75rem;\r\n }\r\n\r\n .action-group {\r\n width: 100%;\r\n flex-direction: column;\r\n gap: 0.8rem;\r\n margin-top: 1.2rem;\r\n }\r\n\r\n .btn-cta {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 0.8rem 1rem;\r\n }\r\n\r\n .right-description {\r\n width: 100%;\r\n box-sizing: border-box;\r\n font-size: 0.85rem;\r\n padding: 1rem;\r\n }\r\n\r\n .modal-card {\r\n padding: 1.5rem 1.2rem;\r\n border-radius: 18px;\r\n }\r\n\r\n .modal-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .social-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Background Video MP4 Fullscreen Gelap Tipis -->\r\n <div class=\"video-bg-container\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/joeythekangaroo.xyz\/wp-content\/uploads\/2026\/08\/HERO-JOEY-THE-KANGAROO.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n\r\n <div class=\"hero-container\">\r\n <!-- 1. NAVIGATION BAR WITH SLIM PILL CARD -->\r\n <nav class=\"navbar\">\r\n <div class=\"navbar-top-row\">\r\n <a href=\"#\" class=\"brand-logo\">JOEY<\/a>\r\n <div class=\"nav-actions\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-buy\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/>\r\n <\/svg>\r\n Buy $JOEY\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card Pill Slim Nav Menu -->\r\n <div class=\"nav-links-wrapper\">\r\n <ul class=\"nav-links\">\r\n <li><a onclick=\"openModal('modal-about')\">About<\/a><\/li>\r\n <li><a onclick=\"openModal('modal-identity')\">Identity<\/a><\/li>\r\n <li><a onclick=\"openModal('modal-tokenomics')\">Tokenomics<\/a><\/li>\r\n <li><a onclick=\"openModal('modal-community')\">Community<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- 2. MIDDLE SECTION -->\r\n <div class=\"middle-content\">\r\n <div class=\"offering-section\">\r\n <span class=\"offering-title\">Decentralized Sovereign<\/span>\r\n <div class=\"pills-group\">\r\n <button class=\"pill-btn active\" onclick=\"openModal('modal-identity')\">Passport: TOAD20240511<\/button>\r\n <button class=\"pill-btn\" onclick=\"openModal('modal-identity')\">Authority: Toad Immigration<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card Aset Gambar Kanan Atas -->\r\n <div class=\"glass-card-asset\" id=\"interactiveCard\">\r\n <div class=\"asset-img-container\">\r\n <img decoding=\"async\" src=\"https:\/\/joeythekangaroo.xyz\/wp-content\/uploads\/2026\/08\/ASET.png\" alt=\"JOEY Asset\">\r\n <\/div>\r\n <p class=\"asset-description\">\r\n An identity born in Toadland, built for the decentralized era.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 3. BOTTOM SECTION -->\r\n <div class=\"bottom-content\">\r\n <div class=\"bottom-left-box\">\r\n <h1 class=\"main-headline\">\r\n The Outback Sovereign.\r\n <\/h1>\r\n\r\n <div class=\"ca-section\">\r\n <div class=\"ca-title\">Contract Address ($JOEY)<\/div>\r\n <div class=\"ca-box-white\">\r\n <span class=\"ca-text\" id=\"caAddress\">NULL<\/span>\r\n <button class=\"btn-copy-dark\" onclick=\"copyCA()\">Copy<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-group\">\r\n <button class=\"btn-cta\" onclick=\"openModal('modal-about')\">Explore Ecosystem<\/button>\r\n <button class=\"btn-cta secondary\" onclick=\"openModal('modal-community')\">Join Community<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"right-description\">\r\n No fluff, no hype. JOEY is a pure community-driven movement grounded in transparency, solid fundamentals, and organic expansion across the crypto landscape.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ==========================================================\r\n 4. POPUP MODALS\r\n ========================================================== -->\r\n\r\n <!-- Modal About -->\r\n <div class=\"modal-overlay\" id=\"modal-about\">\r\n <div class=\"modal-card\">\r\n <button class=\"modal-close\" onclick=\"closeModal('modal-about')\">×<\/button>\r\n <h2 class=\"modal-title\">About $JOEY<\/h2>\r\n <div class=\"modal-body\">\r\n <p><strong>Pure Culture. No Gimmicks.<\/strong><\/p>\r\n <br>\r\n <p>JOEY originates from the iconic Outback of Toadland. Free from empty promises and false narratives. The focus remains strictly on community strength, organic utility, and long-term expansion across the crypto landscape.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modal Identity -->\r\n <div class=\"modal-overlay\" id=\"modal-identity\">\r\n <div class=\"modal-card\">\r\n <button class=\"modal-close\" onclick=\"closeModal('modal-identity')\">×<\/button>\r\n <h2 class=\"modal-title\">Official Passport Record<\/h2>\r\n <div class=\"modal-body\">\r\n <div class=\"passport-code\">\r\n--------------------------------------------------\r\nTYPE : P\r\nCOUNTRY CODE : TO\r\nPASSPORT NO. : TOAD20240511\r\nSURNAME : JOEY\r\nGIVEN NAMES : JOEY KANGAROO\r\nNATIONALITY : TOADLAND\r\nDATE OF BIRTH : 01 MAY 2024\r\nPLACE OF BIRTH : OUTBACK, TOADLAND\r\n--------------------------------------------------<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modal Tokenomics -->\r\n <div class=\"modal-overlay\" id=\"modal-tokenomics\">\r\n <div class=\"modal-card\">\r\n <button class=\"modal-close\" onclick=\"closeModal('modal-tokenomics')\">×<\/button>\r\n <h2 class=\"modal-title\">Tokenomics<\/h2>\r\n <div class=\"modal-body\">\r\n <p>Built For Longevity<\/p>\r\n <div class=\"tokenomics-grid\">\r\n <div class=\"tokenomics-item\">\r\n <span>Token Name<\/span>\r\n <strong>Joey The Kangaroo<\/strong>\r\n <\/div>\r\n <div class=\"tokenomics-item\">\r\n <span>Ticker<\/span>\r\n <strong>$JOEY<\/strong>\r\n <\/div>\r\n <div class=\"tokenomics-item\">\r\n <span>Tax<\/span>\r\n <strong>0% Buy \/ 0% Sell<\/strong>\r\n <\/div>\r\n <div class=\"tokenomics-item\">\r\n <span>Liquidity<\/span>\r\n <strong>Burned Forever<\/strong>\r\n <\/div>\r\n <div class=\"tokenomics-item\" style=\"grid-column: span 2;\">\r\n <span>Contract<\/span>\r\n <strong>Renounced<\/strong>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Modal Community -->\r\n <div class=\"modal-overlay\" id=\"modal-community\">\r\n <div class=\"modal-card\">\r\n <button class=\"modal-close\" onclick=\"closeModal('modal-community')\">×<\/button>\r\n <h2 class=\"modal-title\">Join $JOEY Community<\/h2>\r\n <div class=\"modal-body\">\r\n <p><strong>Decentralized Culture on Chain.<\/strong><\/p>\r\n <p>Be a part of the Outback movement. Connect with us via our official channels below:<\/p>\r\n \r\n <div class=\"social-grid\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-card-btn\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.69-.52.36-1 .53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.37-.49 1.02-.75 3.98-1.73 6.64-2.87 7.97-3.44 3.8-1.58 4.59-1.86 5.1-1.87.11 0 .37.03.54.17.14.12.18.28.2.45-.02.07-.02.13-.03.22z\"\/>\r\n <\/svg>\r\n Telegram\r\n <\/a>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-card-btn\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/>\r\n <\/svg>\r\n X (Twitter)\r\n <\/a>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-card-btn\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 15.66z\"\/>\r\n <\/svg>\r\n Live Chart\r\n <\/a>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"social-card-btn\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/>\r\n <\/svg>\r\n Buy Token\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Toast Copy Notification -->\r\n <div class=\"toast\" id=\"toast\">Contract Address Copied!<\/div>\r\n\r\n <!-- 5. JAVASCRIPT -->\r\n <script>\r\n function copyCA() {\r\n const caText = document.getElementById('caAddress').innerText;\r\n navigator.clipboard.writeText(caText).then(() => {\r\n showToast(\"Contract Address Copied!\");\r\n });\r\n }\r\n\r\n function showToast(message) {\r\n const toast = document.getElementById('toast');\r\n toast.innerText = message;\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 2500);\r\n }\r\n\r\n function openModal(id) {\r\n document.getElementById(id).classList.add('active');\r\n }\r\n\r\n function closeModal(id) {\r\n document.getElementById(id).classList.remove('active');\r\n }\r\n\r\n window.onclick = function(event) {\r\n if (event.target.classList.contains('modal-overlay')) {\r\n event.target.classList.remove('active');\r\n }\r\n }\r\n\r\n const card = document.getElementById('interactiveCard');\r\n\r\n if (window.innerWidth > 768) {\r\n card.addEventListener('mousemove', (e) => {\r\n const rect = card.getBoundingClientRect();\r\n const x = e.clientX - rect.left;\r\n const y = e.clientY - rect.top;\r\n \r\n const centerX = rect.width \/ 2;\r\n const centerY = rect.height \/ 2;\r\n \r\n const rotateX = (y - centerY) \/ 14;\r\n const rotateY = (centerX - x) \/ 14;\r\n\r\n card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px)`;\r\n });\r\n\r\n card.addEventListener('mouseleave', () => {\r\n card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)';\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>JOEY \u2014 The Outback Sovereign ($JOEY) JOEY Buy $JOEY About Identity Tokenomics Community Decentralized Sovereign Passport: TOAD20240511 Authority: Toad Immigration An identity born in Toadland, built for the decentralized era. The Outback Sovereign. Contract Address ($JOEY) NULL Copy Explore Ecosystem Join Community No fluff, no hype. JOEY is a pure community-driven movement grounded in transparency, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":10,"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/joeythekangaroo.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}