{"id":8,"date":"2026-08-03T03:10:38","date_gmt":"2026-08-03T03:10:38","guid":{"rendered":"https:\/\/odongi.fun\/?page_id=8"},"modified":"2026-08-03T09:45:15","modified_gmt":"2026-08-03T09:45:15","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/odongi.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\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 Odongi - The Derp Duck<\/title>\r\n\r\n <!-- Google Fonts: Londrina Solid & Sans-serif for body -->\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=Londrina+Solid:wght@300;400;900&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n \/* BASE & RESET *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n body {\r\n background-color: #F3A218;\r\n font-family: 'Londrina Solid', sans-serif;\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n a { text-decoration: none; color: inherit; }\r\n button { background: none; border: none; cursor: pointer; font-family: inherit; }\r\n\r\n \/* HERO SECTION *\/\r\n .hero-section {\r\n position: relative;\r\n width: 100vw;\r\n height: 100vh;\r\n overflow: hidden;\r\n }\r\n\r\n \/* GRAIN OVERLAY *\/\r\n .grain-overlay {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n z-index: 50;\r\n opacity: 0.4;\r\n mix-blend-mode: overlay;\r\n background-size: 200px 200px;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http:\/\/www.w3.org\/2000\/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%224%22 stitchTiles=%22stitch%22\/%3E%3C\/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.08%22\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n \/* NAVBAR *\/\r\n .navbar {\r\n position: absolute;\r\n top: 24px;\r\n left: 16px;\r\n right: 16px;\r\n z-index: 60;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n .navbar img.logo {\r\n height: 48px;\r\n width: auto;\r\n filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));\r\n user-select: none;\r\n }\r\n \r\n \/* CA BUTTONS *\/\r\n .ca-btn {\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.8);\r\n color: white;\r\n border-radius: 9999px;\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n transition: all 0.3s ease;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n letter-spacing: 0.05em;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .ca-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: scale(1.05);\r\n }\r\n .ca-desktop { display: none; padding: 8px 24px; font-size: 1.25rem; }\r\n .ca-mobile { display: block; padding: 6px 16px; font-size: 1.125rem; }\r\n\r\n \/* MENU BURGER *\/\r\n .menu-wrapper { position: relative; }\r\n .menu-btn {\r\n width: 48px; height: 48px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n color: white;\r\n backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n transition: all 0.3s ease;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n }\r\n .menu-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); }\r\n \r\n \/* DROPDOWN *\/\r\n .dropdown {\r\n position: absolute; right: 0; top: calc(100% + 12px);\r\n width: 160px;\r\n background: rgba(255, 255, 255, 0.95);\r\n border: 2px solid #F3A218; border-radius: 16px; padding: 8px;\r\n display: flex; flex-direction: column; gap: 4px;\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);\r\n transform-origin: top right; transform: scale(0.95); opacity: 0; visibility: hidden;\r\n transition: all 0.2s ease;\r\n }\r\n .dropdown.active { transform: scale(1); opacity: 1; visibility: visible; }\r\n .dropdown a {\r\n display: flex; align-items: center; gap: 12px;\r\n padding: 8px 16px; color: #F3A218; font-size: 1.25rem;\r\n border-radius: 12px; transition: background 0.2s, color 0.2s;\r\n }\r\n .dropdown a:hover { background: #F3A218; color: white; }\r\n\r\n \/* GIANT TEXT *\/\r\n .giant-text {\r\n position: absolute; left: 0; right: 0; top: 18%;\r\n display: flex; align-items: center; justify-content: center;\r\n pointer-events: none; user-select: none; z-index: 2;\r\n }\r\n .giant-text h1 {\r\n font-size: clamp(140px, 78vw, 420px); font-weight: 900; line-height: 1;\r\n text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap;\r\n text-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n }\r\n\r\n \/* CAROUSEL *\/\r\n .carousel { position: absolute; inset: 0; z-index: 3; }\r\n .carousel-item {\r\n position: absolute; aspect-ratio: 0.6 \/ 1;\r\n transition: transform 650ms cubic-bezier(0.4,0,0.2,1), filter 650ms cubic-bezier(0.4,0,0.2,1), opacity 650ms cubic-bezier(0.4,0,0.2,1), left 650ms cubic-bezier(0.4,0,0.2,1), bottom 650ms cubic-bezier(0.4,0,0.2,1), height 650ms cubic-bezier(0.4,0,0.2,1);\r\n will-change: transform, filter, opacity;\r\n }\r\n .carousel-item img {\r\n width: 100%; height: 100%; object-fit: contain; object-position: bottom;\r\n filter: drop-shadow(0 25px 25px rgba(0,0,0,0.25)); user-select: none; -webkit-user-drag: none;\r\n }\r\n\r\n \/* CAROUSEL ROLES *\/\r\n .role-center { transform: translateX(-50%) scale(1.25); filter: blur(0px); opacity: 1; z-index: 20; left: 50%; height: 60%; bottom: 22%; }\r\n .role-left { transform: translateX(-50%) scale(1); filter: blur(2px); opacity: 0.85; z-index: 10; left: 20%; height: 16%; bottom: 32%; }\r\n .role-right { transform: translateX(-50%) scale(1); filter: blur(2px); opacity: 0.85; z-index: 10; left: 80%; height: 16%; bottom: 32%; }\r\n .role-back { transform: translateX(-50%) scale(1); filter: blur(4px); opacity: 1; z-index: 5; left: 50%; height: 13%; bottom: 32%; }\r\n\r\n \/* BOTTOM LEFT CONTROLS *\/\r\n .bottom-left { position: absolute; bottom: 24px; left: 16px; z-index: 60; }\r\n .nav-controls { display: flex; gap: 12px; }\r\n .nav-controls button {\r\n width: 48px; height: 48px; border-radius: 50%; border: 2px solid white; color: white;\r\n display: flex; align-items: center; justify-content: center;\r\n transition: all 0.15s ease; backdrop-filter: blur(4px);\r\n }\r\n .nav-controls button:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.2); }\r\n\r\n \/* BOTTOM RIGHT LINK *\/\r\n .bottom-right { position: absolute; bottom: 24px; right: 16px; z-index: 60; }\r\n .buy-link {\r\n display: flex; align-items: center; opacity: 0.95; font-size: clamp(28px, 4vw, 56px);\r\n line-height: 1; text-transform: uppercase; letter-spacing: -0.02em;\r\n text-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.2s ease;\r\n }\r\n .buy-link:hover { opacity: 1; transform: scale(1.05); }\r\n .buy-link svg { margin-left: 8px; width: 24px; height: 24px; transition: transform 0.2s; }\r\n .buy-link:hover svg { transform: translateX(8px); }\r\n\r\n \/* ==========================================\r\n MARQUEE SECTION \r\n ========================================== *\/\r\n .marquee-wrapper {\r\n background-color: #FFFFFF;\r\n border-top: 6px solid #000000; border-bottom: 6px solid #000000;\r\n display: flex; overflow: hidden; padding: 4px 0;\r\n position: relative; z-index: 10;\r\n }\r\n .marquee-track {\r\n display: flex; white-space: nowrap;\r\n animation: marqueeLoop 12s linear infinite;\r\n }\r\n .marquee-track span {\r\n font-size: clamp(2.5rem, 4vw, 5rem); color: #000000; padding: 0 2rem;\r\n text-transform: uppercase; font-weight: 900; letter-spacing: 0.05em;\r\n }\r\n @keyframes marqueeLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }\r\n\r\n \/* ==========================================\r\n BENTO GRID ABOUT SECTION \r\n ========================================== *\/\r\n .about-section {\r\n padding: 100px 24px 30px 24px; \r\n background-color: #F3A218; \r\n position: relative;\r\n }\r\n\r\n .bento-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n grid-auto-rows: minmax(280px, auto);\r\n gap: 24px;\r\n }\r\n\r\n .bento-card {\r\n background: #FFFFFF;\r\n border-radius: 36px;\r\n padding: 48px;\r\n border: 3px solid rgba(0,0,0,0.05);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.08);\r\n position: relative;\r\n overflow: hidden; \r\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n .bento-card:not(.card-image):hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 30px 50px rgba(0,0,0,0.12);\r\n }\r\n\r\n .card-main { grid-column: span 2; align-items: flex-start; z-index: 2; }\r\n .card-main h2 {\r\n font-size: clamp(3rem, 6vw, 5.5rem); color: #F3A218;\r\n line-height: 0.9; margin-bottom: 24px; text-transform: uppercase;\r\n letter-spacing: 0.02em; text-shadow: 2px 2px 0px rgba(0,0,0,0.05);\r\n }\r\n .card-main p {\r\n font-family: 'Londrina Solid', sans-serif; font-weight: 300; \r\n font-size: 1.6rem; letter-spacing: 0.05em;\r\n line-height: 1.4; color: #4A4A4A; max-width: 90%;\r\n }\r\n\r\n .card-image {\r\n grid-column: span 1; grid-row: span 2;\r\n background: radial-gradient(circle at center, #FFEFD6 0%, #FFE2B0 100%);\r\n padding: 0; display: flex; align-items: center; justify-content: center;\r\n overflow: visible !important; \r\n z-index: 5; \r\n }\r\n .card-image img {\r\n width: 100%; min-width: 320px;\r\n filter: drop-shadow(0 30px 45px rgba(0,0,0,0.35)); \r\n animation: floatBreakout 6s ease-in-out infinite;\r\n pointer-events: none; \r\n }\r\n @keyframes floatBreakout {\r\n 0%, 100% { transform: scale(1.35) translateY(-2%); }\r\n 50% { transform: scale(1.35) translateY(-8%); }\r\n }\r\n\r\n .card-feature { grid-column: span 1; background: #000000; color: #FFFFFF; z-index: 2; }\r\n .card-feature h3 { font-size: 2.5rem; line-height: 1; margin-bottom: 12px; letter-spacing: 0.02em; }\r\n .card-feature p { \r\n font-family: 'Londrina Solid', sans-serif; font-weight: 300; \r\n font-size: 1.4rem; letter-spacing: 0.05em;\r\n color: #A0A0A0; line-height: 1.4; \r\n }\r\n\r\n .card-cta { grid-column: span 1; background: #FFFFFF; cursor: pointer; text-align: center; align-items: center; justify-content: center; text-decoration: none; z-index: 2; }\r\n .card-cta .cta-icon {\r\n width: 80px; height: 80px; background: #F3A218; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center; margin-bottom: 24px;\r\n color: white; transition: transform 0.3s ease;\r\n }\r\n .card-cta:hover .cta-icon { transform: scale(1.1) rotate(-15deg); }\r\n .card-cta h3 { font-size: 2.5rem; color: #F3A218; line-height: 1; }\r\n\r\n \/* ==========================================\r\n GALLERY SECTION (TV MOCKUP)\r\n ========================================== *\/\r\n .gallery-section {\r\n background-color: #F3A218; \r\n padding: 80px 24px;\r\n position: relative;\r\n }\r\n .gallery-container {\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n .gallery-title {\r\n font-size: clamp(3.5rem, 8vw, 6.5rem);\r\n color: #FFFFFF;\r\n line-height: 1;\r\n margin-bottom: 60px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.02em;\r\n text-shadow: 4px 4px 0px #000000;\r\n }\r\n .tv-frame {\r\n background: #FFFFFF; \r\n border: 6px solid #000000;\r\n border-radius: 40px;\r\n padding: 24px 24px 64px 24px; \r\n box-shadow: 16px 16px 0px #000000; \r\n position: relative;\r\n margin: 0 auto;\r\n max-width: 800px;\r\n transform: rotate(-1deg);\r\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .tv-frame:hover {\r\n transform: rotate(0deg) scale(1.02);\r\n }\r\n .tv-screen {\r\n background: #000000;\r\n border: 6px solid #000000;\r\n border-radius: 20px;\r\n position: relative;\r\n width: 100%;\r\n padding-bottom: 75%; \r\n overflow: hidden;\r\n box-shadow: inset 0 0 20px rgba(0,0,0,0.8);\r\n }\r\n .tv-screen video {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n pointer-events: none;\r\n }\r\n .tv-glass {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 40%);\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n .tv-details {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 40px;\r\n right: 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .tv-speaker { display: flex; gap: 8px; }\r\n .tv-speaker span { width: 6px; height: 20px; background: #000000; border-radius: 99px; opacity: 0.8; }\r\n .tv-knobs { display: flex; gap: 16px; }\r\n .tv-knob { width: 24px; height: 24px; background: #000000; border-radius: 50%; box-shadow: inset -3px -3px 0 rgba(255,255,255,0.3); }\r\n\r\n \/* ==========================================\r\n HOW TO BUY SECTION\r\n ========================================== *\/\r\n .htb-section {\r\n background-color: #F3A218;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 24px;\r\n position: relative;\r\n overflow: hidden; \r\n }\r\n .htb-bg-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background-image: url('https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-12.png');\r\n background-size: cover;\r\n background-position: bottom center;\r\n opacity: 1;\r\n z-index: 1;\r\n }\r\n .htb-container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n gap: 40px;\r\n }\r\n .htb-left {\r\n flex: 1;\r\n margin-bottom: 300px\r\n }\r\n .htb-title {\r\n font-size: clamp(3.5rem, 8vw, 6.5rem);\r\n color: #ffffff;\r\n line-height: 1;\r\n margin-bottom: 18px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.02em;\r\n text-shadow: 4px 4px 0px #000000;\r\n }\r\n .htb-step {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n margin-bottom: 14px;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 14px 22px;\r\n border-radius: 32px;\r\n border: 2px solid rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n }\r\n .htb-num {\r\n width: 64px; height: 64px;\r\n background: #FFFFFF; color: #F3A218;\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 2.5rem; font-weight: 900;\r\n flex-shrink: 0;\r\n border: 4px solid #000000;\r\n box-shadow: 4px 4px 0px #000000;\r\n }\r\n .htb-text h3 {\r\n font-size: 1.5rem;\r\n color: #ffffff;\r\n margin: 0;\r\n line-height: 1;\r\n text-shadow: 2px 2px 0px rgba(0,0,0,0.3);\r\n letter-spacing: 0.02em;\r\n }\r\n\r\n .htb-right {\r\n flex: 1;\r\n position: relative;\r\n min-height: 500px;\r\n }\r\n .htb-char-img {\r\n position: absolute;\r\n bottom: -120px;\r\n left: 20px; \r\n width: 85%;\r\n max-width: 500px;\r\n }\r\n .htb-btn {\r\n position: absolute;\r\n top: 15%;\r\n left: -10%; \r\n width: 280px;\r\n z-index: 10;\r\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25));\r\n }\r\n .htb-btn:hover {\r\n transform: scale(1.08);\r\n }\r\n .htb-btn img {\r\n width: 100%;\r\n height: auto;\r\n animation: floatBtn 4s ease-in-out infinite;\r\n }\r\n \r\n @keyframes floatBtn {\r\n 0%, 100% { transform: translateY(0) rotate(-2deg); }\r\n 50% { transform: translateY(-12px) rotate(2deg); }\r\n }\r\n\r\n \/* ==========================================\r\n JOIN COMMUNITY SECTION\r\n ========================================== *\/\r\n .join-section {\r\n background: linear-gradient(180deg, #F9DA9B 0%, #F9C55D 100%);\r\n padding-top: 100px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n position: relative;\r\n z-index: 2;\r\n margin-top: -5px; \/* Margin top overlay adjustment *\/\r\n }\r\n .join-content {\r\n max-width: 800px;\r\n padding: 0 24px;\r\n z-index: 2;\r\n }\r\n .join-title {\r\n font-size: clamp(3.5rem, 8vw, 6.5rem);\r\n color: #FFFFFF;\r\n text-shadow: 4px 4px 0px #000000;\r\n line-height: 1;\r\n margin-bottom: 24px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.02em;\r\n }\r\n .join-desc {\r\n font-family: 'Londrina Solid', sans-serif;\r\n font-weight: 300;\r\n font-size: 1.8rem;\r\n letter-spacing: 0.05em;\r\n line-height: 1.4;\r\n color: #333333;\r\n margin-bottom: 0;\r\n }\r\n .join-btn {\r\n display: inline-block;\r\n background-color: #000000;\r\n color: #FFFFFF;\r\n font-family: 'Londrina Solid', sans-serif;\r\n font-size: 1.8rem;\r\n letter-spacing: 0.05em;\r\n padding: 12px 40px;\r\n border-radius: 999px;\r\n margin-top: 32px;\r\n text-decoration: none;\r\n transition: transform 0.2s ease, background-color 0.2s ease;\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.15);\r\n }\r\n .join-btn:hover {\r\n transform: scale(1.05);\r\n background-color: #333333;\r\n }\r\n .join-img {\r\n width:30%;\r\n max-width: 650px; \r\n margin-top: 40px;\r\n display: block;\r\n margin-bottom: -5px; \r\n z-index: 2;\r\n }\r\n\r\n \/* ==========================================\r\n FOOTER SECTION\r\n ========================================== *\/\r\n .footer {\r\n background-color: #000000;\r\n padding: 60px 24px 40px 24px;\r\n text-align: center;\r\n }\r\n .footer-logo {\r\n height: 64px;\r\n margin-bottom: 32px;\r\n filter: drop-shadow(0 4px 6px rgba(255,255,255,0.1));\r\n }\r\n .footer-links {\r\n display: flex;\r\n justify-content: center;\r\n gap: 40px;\r\n margin-bottom: 40px;\r\n }\r\n .footer-links a {\r\n font-family: 'Londrina Solid', sans-serif;\r\n font-size: 2rem;\r\n color: #F3A218;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n transition: transform 0.2s ease, color 0.2s ease;\r\n }\r\n .footer-links a:hover {\r\n transform: scale(1.1);\r\n color: #FFFFFF;\r\n }\r\n .footer-copy {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 1rem;\r\n color: #666666;\r\n letter-spacing: 0.02em;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* ==========================================\r\n CLOUD PARTICLE SYSTEM\r\n ========================================== *\/\r\n #cloud-particle-system {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n pointer-events: none; \/* VERY IMPORTANT: doesn't block clicks *\/\r\n z-index: 2; \/* Highest z-index *\/\r\n overflow: hidden;\r\n }\r\n .cloud-particle {\r\n position: absolute;\r\n user-select: none;\r\n will-change: transform, left;\r\n animation-name: moveCloudRight, floatCloudVertical;\r\n animation-timing-function: linear, ease-in-out;\r\n animation-iteration-count: infinite, infinite;\r\n animation-direction: normal, alternate;\r\n }\r\n @keyframes moveCloudRight {\r\n 0% { left: -400px; }\r\n 100% { left: 100vw; }\r\n }\r\n @keyframes floatCloudVertical {\r\n 0% { transform: translateY(0); }\r\n 100% { transform: translateY(-30px); }\r\n }\r\n\r\n \/* DESKTOP STYLES (>= 640px) *\/\r\n @media (min-width: 640px) {\r\n .navbar { left: 32px; right: 32px; }\r\n .ca-desktop { display: flex; }\r\n .ca-mobile { display: none; }\r\n .role-center { transform: translateX(-50%) scale(1.68); height: 92%; bottom: 0; }\r\n .role-left { left: 30%; height: 28%; bottom: 12%; }\r\n .role-right { left: 70%; height: 28%; bottom: 12%; }\r\n .role-back { height: 22%; bottom: 12%; }\r\n .bottom-left { bottom: 80px; left: 96px; }\r\n .nav-controls button { width: 64px; height: 64px; }\r\n .bottom-right { bottom: 80px; right: 40px; }\r\n .buy-link svg { margin-left: 16px; width: 40px; height: 40px; }\r\n }\r\n\r\n \/* MOBILE\/TABLET OVERRIDES *\/\r\n @media (max-width: 900px) {\r\n .bento-container { grid-template-columns: 1fr; gap: 20px; }\r\n .bento-card { grid-column: span 1 !important; grid-row: span 1 !important; padding: 32px; }\r\n .card-image { order: 1; min-height: 380px; margin-bottom: 20px; }\r\n .card-main { order: 2; }\r\n .card-feature { order: 3; }\r\n .card-cta { order: 4; }\r\n .card-main h2 { font-size: 3.5rem; }\r\n .card-image img { animation: floatBreakoutMobile 6s ease-in-out infinite; }\r\n \r\n .tv-frame { padding: 16px 16px 50px 16px; border-radius: 28px; box-shadow: 10px 10px 0px #000000; }\r\n .tv-details { left: 24px; right: 24px; bottom: 14px; }\r\n .tv-speaker span { height: 16px; }\r\n .tv-knob { width: 18px; height: 18px; }\r\n\r\n .htb-section { height: auto; min-height: 100vh; padding: 80px 24px; }\r\n .htb-container { flex-direction: column; gap: 40px; }\r\n .htb-step { flex-direction: row; align-items: center; gap: 16px; padding: 20px; }\r\n .htb-text h3 { font-size: 2rem; }\r\n .htb-right { width: 100%; min-height: 480px; }\r\n .htb-char-img { left: 5%; width: 90%; }\r\n .htb-btn { left: 0%; top: -5%; width: 220px; }\r\n\r\n .join-desc { font-size: 1.5rem; }\r\n .footer-links { gap: 24px; }\r\n .footer-links a { font-size: 1.6rem; }\r\n }\r\n \r\n @keyframes floatBreakoutMobile {\r\n 0%, 100% { transform: scale(1.15) translateY(-5%); }\r\n 50% { transform: scale(1.15) translateY(-10%); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- HERO SECTION -->\r\n <div class=\"hero-section\">\r\n <div class=\"grain-overlay\"><\/div>\r\n <nav class=\"navbar\">\r\n <img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-2.png\" alt=\"Odongi Logo\" class=\"logo\" draggable=\"false\" \/>\r\n \r\n <button class=\"ca-btn ca-desktop\" id=\"btn-ca-desktop\">9MfTt3kpK5RDzSfAcRvLeh78RGYQoUu2omzfcHCvpump<\/button>\r\n <button class=\"ca-btn ca-mobile\" id=\"btn-ca-mobile\">COPY CA<\/button>\r\n\r\n <div class=\"menu-wrapper\">\r\n <button class=\"menu-btn\" id=\"btn-menu\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\"\/><line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\"\/><line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\"\/><\/svg>\r\n <\/button>\r\n <div class=\"dropdown\" id=\"dropdown-menu\">\r\n <a href=\"https:\/\/x.com\/helloodongi\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\"\/><\/svg> Twitter<\/a>\r\n <a href=\"https:\/\/t.me\/helloodongi\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line>\r\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon>\r\n <\/svg> \r\n Telegram\r\n <\/a>\r\n <a href=\"https:\/\/dexscreener.com\/solana\/9MfTt3kpK5RDzSfAcRvLeh78RGYQoUu2omzfcHCvpump\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg> Chart<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <div class=\"giant-text\">\r\n <h1>ODONGI<\/h1>\r\n <\/div>\r\n\r\n <div class=\"carousel\" id=\"carousel\">\r\n <div class=\"carousel-item\"><img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-3.png\" draggable=\"false\" \/><\/div>\r\n <div class=\"carousel-item\"><img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-4.png\" draggable=\"false\" \/><\/div>\r\n <div class=\"carousel-item\"><img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-5.png\" draggable=\"false\" \/><\/div>\r\n <div class=\"carousel-item\"><img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-8.png\" draggable=\"false\" \/><\/div>\r\n <\/div>\r\n\r\n <div class=\"bottom-left\">\r\n <div class=\"nav-controls\">\r\n <button id=\"btn-prev\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 19-7-7 7-7\"\/><path d=\"M19 12H5\"\/><\/svg><\/button>\r\n <button id=\"btn-next\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bottom-right\">\r\n <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=9MfTt3kpK5RDzSfAcRvLeh78RGYQoUu2omzfcHCvpump\" class=\"buy-link\">BUY NOW<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MARQUEE SECTION -->\r\n <div class=\"marquee-wrapper\">\r\n <div class=\"marquee-track\">\r\n <span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span>\r\n <\/div>\r\n <div class=\"marquee-track\">\r\n <span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BENTO GRID ABOUT SECTION -->\r\n <div class=\"about-section\" id=\"about\">\r\n <div class=\"bento-container\">\r\n \r\n <div class=\"bento-card card-main\">\r\n <h2>MEET ODONGI<\/h2>\r\n <p>\r\n Say hello to Odongi! The chillest duck with a permanent derp face, always staring blankly into the void. Zero complicated thoughts, zero heavy burdens\u2014just pure goofy energy and immaculate vibes for laying back and doing absolutely nothing.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-image\">\r\n <img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-10.png\" alt=\"Odongi\" draggable=\"false\" \/>\r\n <\/div>\r\n\r\n <div class=\"bento-card card-feature\">\r\n <h3>IF YOU CAN'T DERP. YOU WONT BE DERP.<\/h3>\r\n <p>- Odongi<\/p>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/x.com\/helloodongi\" class=\"bento-card card-cta\">\r\n <div class=\"cta-icon\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/div>\r\n <h3>JOIN COMMUNITY<\/h3>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GALLERY TV SECTION -->\r\n <div class=\"gallery-section\">\r\n <div class=\"gallery-container\">\r\n <h2 class=\"gallery-title\">GALLERY<\/h2>\r\n \r\n <div class=\"tv-frame\">\r\n <div class=\"tv-screen\">\r\n <div class=\"tv-glass\"><\/div>\r\n <video src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/GALLERY1.mp4\" autoplay loop muted playsinline><\/video>\r\n <\/div>\r\n <div class=\"tv-details\">\r\n <div class=\"tv-speaker\">\r\n <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\r\n <\/div>\r\n <div class=\"tv-knobs\">\r\n <div class=\"tv-knob\"><\/div>\r\n <div class=\"tv-knob\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <!-- HOW TO BUY SECTION -->\r\n <div class=\"htb-section\" id=\"how-to-buy\">\r\n <div class=\"htb-bg-overlay\"><\/div>\r\n <div class=\"htb-container\">\r\n \r\n <div class=\"htb-left\">\r\n <h2 class=\"htb-title\">HOW TO BUY<\/h2>\r\n \r\n <div class=\"htb-step\">\r\n <div class=\"htb-num\">1<\/div>\r\n <div class=\"htb-text\">\r\n <h3>GET A WALLET<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"htb-step\">\r\n <div class=\"htb-num\">2<\/div>\r\n <div class=\"htb-text\">\r\n <h3>GET SOME SOL<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"htb-step\">\r\n <div class=\"htb-num\">3<\/div>\r\n <div class=\"htb-text\">\r\n <h3>SWAP FOR ODONGI<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"htb-right\">\r\n <a href=\"#\" class=\"htb-btn\">\r\n <img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-13.png\" alt=\"Buy Button\" draggable=\"false\" \/>\r\n <\/a>\r\n <img decoding=\"async\" class=\"htb-char-img\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-7.png\" alt=\"Odongi Box\" draggable=\"false\" \/>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- JOIN COMMUNITY SECTION -->\r\n <div class=\"join-section\">\r\n <div class=\"join-content\">\r\n <h2 class=\"join-title\">JOIN THE FLOCK<\/h2>\r\n <p class=\"join-desc\">Take it easy! Hang out with the goofiest, most derp community around. We're just here to share some laughs, trade jokes, and vibe out with Odongi.<\/p>\r\n <a href=\"#\" class=\"join-btn\">HOP IN<\/a>\r\n <\/div>\r\n <img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-14.png\" alt=\"Odongi Gang\" class=\"join-img\" draggable=\"false\" \/>\r\n <\/div>\r\n\r\n <!-- MARQUEE SECTION (BOTTOM) -->\r\n <div class=\"marquee-wrapper\">\r\n <div class=\"marquee-track\">\r\n <span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span>\r\n <\/div>\r\n <div class=\"marquee-track\">\r\n <span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span><span>$ODONGI<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FOOTER SECTION -->\r\n <footer class=\"footer\">\r\n <img decoding=\"async\" src=\"https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-2.png\" alt=\"Odongi Logo\" class=\"footer-logo\" draggable=\"false\" \/>\r\n \r\n <div class=\"footer-links\">\r\n <a href=\"https:\/\/x.com\/helloodongi\">TWITTER<\/a>\r\n <a href=\"https:\/\/t.me\/helloodongi\">TELEGRAM<\/a>\r\n <a href=\"https:\/\/dexscreener.com\/solana\/9MfTt3kpK5RDzSfAcRvLeh78RGYQoUu2omzfcHCvpump\">CHART<\/a>\r\n <\/div>\r\n \r\n <p class=\"footer-copy\">\u00a9 2026 ODONGI. IF YOU CAN'T DERP. YOU WONT BE DERP.<\/p>\r\n <\/footer>\r\n\r\n <!-- CLOUD PARTICLE SYSTEM -->\r\n <div id=\"cloud-particle-system\"><\/div>\r\n\r\n <!-- JAVASCRIPT LOGIC -->\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n \/\/ --- CAROUSEL LOGIC ---\r\n const items = document.querySelectorAll('.carousel-item');\r\n let activeIndex = 0;\r\n let isAnimating = false;\r\n\r\n const updateCarousel = () => {\r\n const total = items.length;\r\n const center = activeIndex;\r\n const left = (activeIndex + 3) % total;\r\n const right = (activeIndex + 1) % total;\r\n const back = (activeIndex + 2) % total;\r\n\r\n items.forEach((item, index) => {\r\n item.className = 'carousel-item'; \r\n if (index === center) item.classList.add('role-center');\r\n else if (index === left) item.classList.add('role-left');\r\n else if (index === right) item.classList.add('role-right');\r\n else if (index === back) item.classList.add('role-back');\r\n });\r\n };\r\n\r\n const navigate = (direction) => {\r\n if (isAnimating) return;\r\n isAnimating = true;\r\n if (direction === 'next') activeIndex = (activeIndex + 1) % 4;\r\n else activeIndex = (activeIndex + 3) % 4;\r\n updateCarousel();\r\n setTimeout(() => { isAnimating = false; }, 650); \r\n };\r\n\r\n updateCarousel();\r\n document.getElementById('btn-prev').addEventListener('click', () => navigate('prev'));\r\n document.getElementById('btn-next').addEventListener('click', () => navigate('next'));\r\n\r\n \/\/ --- COPY CA LOGIC ---\r\n const CONTRACT_ADDRESS = \"0xYourOdongiContractAddressHere123456789\";\r\n const btnCaDesktop = document.getElementById('btn-ca-desktop');\r\n const btnCaMobile = document.getElementById('btn-ca-mobile');\r\n\r\n const handleCopy = () => {\r\n navigator.clipboard.writeText(CONTRACT_ADDRESS).then(() => {\r\n const desktopText = btnCaDesktop.innerHTML;\r\n const mobileText = btnCaMobile.innerHTML;\r\n btnCaDesktop.innerHTML = \"COPIED TO CLIPBOARD!\";\r\n btnCaMobile.innerHTML = \"COPIED!\";\r\n setTimeout(() => {\r\n btnCaDesktop.innerHTML = desktopText;\r\n btnCaMobile.innerHTML = mobileText;\r\n }, 2000);\r\n }).catch(err => console.error(\"Copy failed\", err));\r\n };\r\n btnCaDesktop.addEventListener('click', handleCopy);\r\n btnCaMobile.addEventListener('click', handleCopy);\r\n\r\n \/\/ --- DROPDOWN MENU LOGIC ---\r\n const btnMenu = document.getElementById('btn-menu');\r\n const dropdownMenu = document.getElementById('dropdown-menu');\r\n\r\n btnMenu.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n dropdownMenu.classList.toggle('active');\r\n });\r\n\r\n document.addEventListener('click', (e) => {\r\n if (!dropdownMenu.contains(e.target) && !btnMenu.contains(e.target)) {\r\n dropdownMenu.classList.remove('active');\r\n }\r\n });\r\n\r\n \/\/ --- CLOUD PARTICLE LOGIC ---\r\n const cloudContainer = document.getElementById('cloud-particle-system');\r\n const cloudSrc = 'https:\/\/odongi.fun\/wp-content\/uploads\/2026\/08\/Asset-15.png';\r\n const cloudCount = 3; \/\/ Jumlah awan yang muncul (2-4)\r\n\r\n for (let i = 0; i < cloudCount; i++) {\r\n const img = document.createElement('img');\r\n img.src = cloudSrc;\r\n img.className = 'cloud-particle';\r\n \r\n \/\/ Random properties biar natural\r\n const size = Math.random() * 200 + 150; \/\/ Lebar antara 150px sampai 350px\r\n const topPos = Math.random() * 80; \/\/ Posisi vertikal acak (0% - 80% layar)\r\n const opacity = Math.random() * 1 + 1; \/\/ Transparansi acak (0.4 - 0.9)\r\n const moveSpeed = Math.random() * 30 + 20; \/\/ Kecepatan gerak horizontal (20s - 50s)\r\n const moveDelay = Math.random() * -50; \/\/ Mulai dari posisi beda-beda (negatif delay)\r\n const floatSpeed = Math.random() * 3 + 2; \/\/ Kecepatan floating naik-turun (2s - 5s)\r\n const floatDelay = Math.random() * -5;\r\n \r\n img.style.width = `${size}px`;\r\n img.style.top = `${topPos}vh`;\r\n img.style.opacity = opacity;\r\n img.style.animationDuration = `${moveSpeed}s, ${floatSpeed}s`;\r\n img.style.animationDelay = `${moveDelay}s, ${floatDelay}s`;\r\n \r\n cloudContainer.appendChild(img);\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<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Odongi – The Derp Duck 9MfTt3kpK5RDzSfAcRvLeh78RGYQoUu2omzfcHCvpump COPY CA Twitter Telegram Chart ODONGI BUY NOW $ODONGI$ODONGI$ODONGI$ODONGI$ODONGI$ODONGI $ODONGI$ODONGI$ODONGI$ODONGI$ODONGI$ODONGI MEET ODONGI Say hello to Odongi! The chillest duck with a permanent derp face, always staring blankly into the void. Zero complicated thoughts, zero heavy burdens\u2014just pure goofy energy and immaculate vibes for laying back and doing absolutely nothing. […]<\/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:\/\/odongi.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/odongi.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/odongi.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/odongi.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/odongi.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":94,"href":"https:\/\/odongi.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/odongi.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/131"}],"wp:attachment":[{"href":"https:\/\/odongi.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}