Ottermoka Navbar with Video Gallery<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Transparan agar fleksibel di WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* NAVBAR CONTAINER *\/\r\n .navbar-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 16px auto 0;\r\n padding: 0 20px;\r\n position: sticky;\r\n top: 16px;\r\n z-index: 1000;\r\n }\r\n\r\n \/* ANIMATED SILVER OUTLINE BAR CONTAINER *\/\r\n .nav-silver-wrapper {\r\n position: relative;\r\n border-radius: 100px;\r\n padding: 1px; \/* Jarak untuk border animasi *\/\r\n overflow: hidden;\r\n background: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n \/* SMOOTH ROTATING SILVER GRADIENT FOR MAIN BAR *\/\r\n .nav-silver-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: conic-gradient(\r\n from 0deg,\r\n transparent 0%,\r\n transparent 40%,\r\n #ffffff 50%,\r\n #919eab 60%,\r\n transparent 70%,\r\n transparent 100%\r\n );\r\n animation: rotateSilver 6s linear infinite;\r\n }\r\n\r\n @keyframes rotateSilver {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* GLASS NAV CONTENT *\/\r\n .nav-glass-bar {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 20px;\r\n background: rgba(12, 17, 29, 0.85);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-radius: 100px;\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .nav-silver-wrapper:hover {\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* BRAND LOGO AREA *\/\r\n .brand-logo {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: 1.35rem;\r\n color: #ffffff;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* CARD LINGKARAN KHUSUS UNTUK ICON LOGO *\/\r\n .avatar-card-container {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n padding: 2px;\r\n background: rgba(255, 255, 255, 0.15);\r\n border: 1px solid rgba(255, 255, 255, 0.8); \/* Outline Putih Jelas *\/\r\n box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .avatar-card-container:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 0 16px rgba(255, 255, 255, 0.45);\r\n }\r\n\r\n \/* GAMBAR MENGIKUTI LINGKARAN CARD *\/\r\n .brand-avatar {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n \/* MENU LINKS (CONTAINER TOMBOL) DESKTOP *\/\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px; \/* Jarak antar card tombol *\/\r\n list-style: none;\r\n }\r\n\r\n \/* CARD INDIVIDU UNTUK SETIAP TOMBOL STANDAR *\/\r\n .nav-item-card {\r\n display: inline-block;\r\n }\r\n\r\n .nav-item-card a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 8px 18px;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.88rem;\r\n color: #9ca3af;\r\n text-decoration: none;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n\r\n \/* HOVER EFFECT PADA CARD TOMBOL STANDAR *\/\r\n .nav-item-card a:hover {\r\n color: #ffffff;\r\n background: rgba(255, 255, 255, 0.12);\r\n border-color: rgba(255, 255, 255, 0.4);\r\n box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* TOMBOL GALLERY DENGAN WARNA MEMBEDAKAN (#6D5C59) *\/\r\n .btn-gallery-distinct {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 8px 20px;\r\n background: linear-gradient(135deg, #6D5C59 0%, #4a3e3c 100%);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 400;\r\n font-size: 0.88rem;\r\n color: #ffffff;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n box-shadow: 0 2px 10px rgba(109, 92, 89, 0.4);\r\n }\r\n\r\n .btn-gallery-distinct:hover {\r\n background: linear-gradient(135deg, #826e6a 0%, #5c4d4a 100%);\r\n border-color: #ffffff;\r\n box-shadow: 0 4px 18px rgba(109, 92, 89, 0.7);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* --- POP-UP GALLERY MODAL STYLES --- *\/\r\n .gallery-modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: rgba(8, 11, 16, 0.85);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n z-index: 2000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .gallery-modal-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .gallery-modal-card {\r\n background: rgba(18, 24, 38, 0.9);\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n border-radius: 24px;\r\n max-width: 900px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 32px 24px;\r\n position: relative;\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\r\n transform: scale(0.95);\r\n transition: transform 0.35s ease;\r\n }\r\n\r\n .gallery-modal-overlay.active .gallery-modal-card {\r\n transform: scale(1);\r\n }\r\n\r\n \/* MODAL HEADER *\/\r\n .gallery-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n padding-bottom: 12px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .gallery-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800;\r\n font-size: 1.8rem;\r\n color: #ffffff;\r\n }\r\n\r\n .gallery-close-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n font-size: 1.2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n }\r\n\r\n .gallery-close-btn:hover {\r\n background: #ffffff;\r\n color: #000;\r\n }\r\n\r\n \/* GALLERY VIDEO GRID *\/\r\n .video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .video-card-item {\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n position: relative;\r\n }\r\n\r\n .video-card-item:hover {\r\n border-color: rgba(255, 255, 255, 0.4);\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .video-player {\r\n width: 100%;\r\n height: 220px;\r\n object-fit: cover;\r\n display: block;\r\n background: #000;\r\n }\r\n\r\n \/* \ud83d\udcf1 KHUSUS TAMPILAN MOBILE (HP) *\/\r\n @media (max-width: 768px) {\r\n .navbar-section {\r\n margin-top: 8px;\r\n top: 8px;\r\n padding: 0 12px;\r\n }\r\n \r\n .nav-glass-bar {\r\n padding: 8px 16px;\r\n justify-content: center; \/* Logo di-center di tampilan mobile *\/\r\n }\r\n\r\n \/* SEMBUNYIKAN SEMUA TOMBOL DI MOBILE *\/\r\n .nav-links {\r\n display: none !important;\r\n }\r\n\r\n .brand-logo {\r\n font-size: 1.15rem;\r\n gap: 10px;\r\n }\r\n\r\n .avatar-card-container {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n\r\n .gallery-modal-card {\r\n padding: 20px 16px;\r\n }\r\n\r\n .video-player {\r\n height: 180px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"navbar-section\">\r\n <div class=\"nav-silver-wrapper\">\r\n <nav class=\"nav-glass-bar\">\r\n \r\n \r\n <a href=\"#\" class=\"brand-logo\">\r\n <div class=\"avatar-card-container\">\r\n <img decoding=\"async\" src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/ICON-WEB-OTTERMOKA.png\" alt=\"Ottermoka Logo\" class=\"brand-avatar\">\r\n <\/div>\r\n Ottermoka\r\n <\/a>\r\n\r\n \r\n <ul class=\"nav-links\">\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">X \/ Twitter<\/a><\/li>\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">Telegram<\/a><\/li>\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">Chart<\/a><\/li>\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">Swap<\/a><\/li>\r\n \r\n \r\n <li class=\"nav-item-card\">\r\n <button class=\"btn-gallery-distinct\" onclick=\"openGallery()\">Gallery<\/button>\r\n <\/li>\r\n <\/ul>\r\n\r\n <\/nav>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gallery-modal-overlay\" id=\"galleryModal\" onclick=\"closeGalleryOnBackdrop(event)\">\r\n <div class=\"gallery-modal-card\">\r\n \r\n \r\n <div class=\"gallery-header\">\r\n <h3 class=\"gallery-title\">Ottermoka Video Gallery<\/h3>\r\n <button class=\"gallery-close-btn\" onclick=\"closeGallery()\">\u2715<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-grid\">\r\n \r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-1.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-2.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-3.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-4.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-5.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-6.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n function openGallery() {\r\n const modal = document.getElementById('galleryModal');\r\n modal.classList.add('active');\r\n }\r\n\r\n function closeGallery() {\r\n const modal = document.getElementById('galleryModal');\r\n modal.classList.remove('active');\r\n \r\n \/\/ Pause semua video yang sedang berputar saat modal ditutup\r\n const videos = document.querySelectorAll('.video-player');\r\n videos.forEach(video => {\r\n video.pause();\r\n });\r\n }\r\n\r\n function closeGalleryOnBackdrop(event) {\r\n if (event.target.classList.contains('gallery-modal-overlay')) {\r\n closeGallery();\r\n }\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d97c3c5 e-con-full e-flex e-con e-child\" data-id=\"d97c3c5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68aecbe elementor-widget elementor-widget-html\" data-id=\"68aecbe\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ottermoka Hero Section<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Fleksibel untuk WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* HERO WRAPPER *\/\r\n .hero-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 40px 20px;\r\n display: flex;\r\n justify-content: flex-end; \/* Mendorong seluruh konten ke kanan *\/\r\n }\r\n\r\n \/* UNIFIED CONTENT GROUP (TANPA CARD) *\/\r\n .hero-content-group {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end; \/* Semua elemen internal rata kanan *\/\r\n text-align: right; \/* Semua teks rata kanan *\/\r\n width: 100%;\r\n max-width: 650px;\r\n }\r\n\r\n \/* MAIN TITLE *\/\r\n .hero-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n line-height: 1.05;\r\n color: #ffffff;\r\n margin-bottom: 14px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* SUBTITLE *\/\r\n .hero-subtitle {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.98rem;\r\n color: #9ca3af;\r\n line-height: 1.6;\r\n margin-bottom: 24px;\r\n max-width: 560px;\r\n }\r\n\r\n \/* CTA BUTTONS *\/\r\n .hero-cta {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: flex-end; \/* Tombol rata kanan *\/\r\n margin-bottom: 24px;\r\n width: 100%;\r\n }\r\n\r\n .btn-card {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px 24px;\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.88rem;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-primary {\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: rgba(255, 255, 255, 0.18);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* CONTRACT ADDRESS BOX *\/\r\n .ca-card {\r\n background: rgba(12, 17, 29, 0.75);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n border-radius: 100px;\r\n padding: 6px 6px 6px 18px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n max-width: 440px;\r\n width: 100%;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .ca-card:hover {\r\n background: rgba(12, 17, 29, 0.9);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .ca-text {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.82rem;\r\n color: #9ca3af;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex: 1;\r\n text-align: left; \/* Alamat CA tetap dibaca dari kiri *\/\r\n }\r\n\r\n .copy-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: #ffffff;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n padding: 8px 18px;\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.8rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n flex-shrink: 0;\r\n }\r\n\r\n .copy-btn:hover {\r\n background: #ffffff;\r\n color: #080b10;\r\n border-color: #ffffff;\r\n }\r\n\r\n \/* RESPONSIVE DESIGNS FOR MOBILE *\/\r\n @media (max-width: 768px) {\r\n .hero-section {\r\n padding: 20px 12px;\r\n }\r\n\r\n .hero-content-group {\r\n max-width: 100%;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .hero-cta {\r\n flex-direction: column;\r\n }\r\n\r\n .btn-card {\r\n width: 100%;\r\n }\r\n\r\n .ca-card {\r\n padding: 6px 6px 6px 12px;\r\n }\r\n\r\n .ca-text {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .copy-btn {\r\n padding: 6px 14px;\r\n font-size: 0.75rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"hero-section\">\r\n <div class=\"hero-content-group\">\r\n \r\n \r\n <h1 class=\"hero-title\">Ottermoka.<\/h1>\r\n\r\n \r\n <p class=\"hero-subtitle\">\r\n A calm composure amid a noisy market. Ottermoka delivers an organic narrative focused on solid fundamentals and steady momentum.\r\n <\/p>\r\n\r\n \r\n <div class=\"hero-cta\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-card btn-primary\">Swap $Ottermoka<\/a>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-card btn-primary\">Open Chart<\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"ca-card\">\r\n <span class=\"ca-text\" id=\"ca-value\">0x0000000000000000000000000000000000000000<\/span>\r\n <button class=\"copy-btn\" id=\"copy-btn\" onclick=\"copyCA()\">Copy CA<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n function copyCA() {\r\n const caText = document.getElementById('ca-value').innerText;\r\n const btn = document.getElementById('copy-btn');\r\n \r\n navigator.clipboard.writeText(caText).then(() => {\r\n btn.innerText = 'Copied!';\r\n btn.style.background = '#ffffff';\r\n btn.style.color = '#080b10';\r\n \r\n setTimeout(() => {\r\n btn.innerText = 'Copy CA';\r\n btn.style.background = 'rgba(255, 255, 255, 0.1)';\r\n btn.style.color = '#ffffff';\r\n }, 2000);\r\n }).catch(err => {\r\n console.error('Failed to copy: ', err);\r\n });\r\n }\r\n <\/script>\r\n\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e8db1c e-flex e-con-boxed e-con e-parent\" data-id=\"6e8db1c\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f3fefa3 e-con-full e-flex e-con e-child\" data-id=\"f3fefa3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f0127a elementor-widget elementor-widget-html\" data-id=\"8f0127a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ottermoka About & Tokenomics<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Fleksibel untuk WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* MAIN CONTAINER (CENTERED) *\/\r\n .about-token-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* --- ABOUT SECTION --- *\/\r\n .about-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n max-width: 780px;\r\n margin-bottom: 70px;\r\n }\r\n\r\n \/* ROTATING IMAGE WRAPPER (GLASS CIRCLE + AKSEN #6D5C59) *\/\r\n .rotating-image-card {\r\n width: 140px;\r\n height: 140px;\r\n border-radius: 50%;\r\n padding: 4px;\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 2px solid #6D5C59; \/* Aksen warna baru *\/\r\n box-shadow: 0 0 25px rgba(109, 92, 89, 0.35);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 32px;\r\n overflow: hidden;\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .rotating-image-card:hover {\r\n box-shadow: 0 0 35px rgba(109, 92, 89, 0.6);\r\n transform: scale(1.03);\r\n }\r\n\r\n .rotating-asset {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n animation: smoothRotate 14s linear infinite; \/* Berputar Loop Smooth *\/\r\n }\r\n\r\n @keyframes smoothRotate {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* SECTION HEADING *\/\r\n .section-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: clamp(2.2rem, 4.5vw, 3rem);\r\n color: #ffffff;\r\n margin-bottom: 20px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* ABOUT BODY TEXT *\/\r\n .about-desc {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 1.05rem;\r\n color: #9ca3af;\r\n line-height: 1.7;\r\n margin-bottom: 16px;\r\n }\r\n\r\n \/* WARNA DARI HIJAU DIGANTI KE #6D5C59 *\/\r\n .about-desc.highlight {\r\n color: #6D5C59;\r\n font-weight: 400;\r\n }\r\n\r\n \/* --- TOKENOMICS SECTION (4 POIN GLASS CARD) --- *\/\r\n .tokenomics-container {\r\n width: 100%;\r\n max-width: 1000px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .tokenomics-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 20px;\r\n width: 100%;\r\n margin-top: 24px;\r\n }\r\n\r\n \/* GLASS CARD STYLE *\/\r\n .token-card {\r\n background: rgba(18, 24, 38, 0.55);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 24px 20px;\r\n flex: 1;\r\n min-width: 200px;\r\n max-width: 230px;\r\n transition: all 0.35s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .token-card:hover {\r\n border-color: rgba(109, 92, 89, 0.6);\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(109, 92, 89, 0.25);\r\n }\r\n\r\n .token-label {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.82rem;\r\n color: #9ca3af;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .token-value {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: 1.25rem;\r\n color: #ffffff;\r\n }\r\n\r\n \/* RESPONSIVE DESIGN FOR MOBILE *\/\r\n @media (max-width: 768px) {\r\n .about-token-section {\r\n padding: 40px 16px;\r\n }\r\n\r\n .rotating-image-card {\r\n width: 110px;\r\n height: 110px;\r\n }\r\n\r\n .about-container {\r\n margin-bottom: 50px;\r\n }\r\n\r\n .token-card {\r\n min-width: 45%;\r\n max-width: 48%;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .token-card {\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"about-token-section\">\r\n\r\n \r\n <div class=\"about-container\">\r\n \r\n \r\n <div class=\"rotating-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/ASET.png\" alt=\"Ottermoka Rotating Asset\" class=\"rotating-asset\">\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">Focus. Consistency. Organic.<\/h2>\r\n \r\n <p class=\"about-desc\">\r\n Composure is power. In a market driven by panic, Ottermoka maintains its natural rhythm without unnecessary gimmicks. Built to embody resilience and adaptability, always navigating toward its objective.\r\n <\/p>\r\n \r\n <p class=\"about-desc highlight\">\r\n Beyond culture\u2014setting a refined standard for community-driven movement.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"tokenomics-container\">\r\n <h2 class=\"section-title\">Token Structure<\/h2>\r\n\r\n <div class=\"tokenomics-grid\">\r\n \r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Total Supply<\/div>\r\n <div class=\"token-value\">1,000,000,000<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Tax<\/div>\r\n <div class=\"token-value\">0% \/ 0%<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Liquidity<\/div>\r\n <div class=\"token-value\">Burned<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Contract<\/div>\r\n <div class=\"token-value\">Renounced<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d8227a e-flex e-con-boxed e-con e-parent\" data-id=\"8d8227a\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/ottermoka.xyz\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/HERO-OTTERMOKA1.mp4","background_play_on_mobile":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-f2260ae e-con-full e-flex e-con e-child\" data-id=\"f2260ae\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c394cbf elementor-widget elementor-widget-html\" data-id=\"c394cbf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ottermoka Community Section<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Fleksibel untuk WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* COMMUNITY SECTION CONTAINER (RATA ATAS & TANPA CARD) *\/\r\n .community-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center; \/* Rata tengah horizontal *\/\r\n justify-content: flex-start; \/* Rata atas *\/\r\n text-align: center;\r\n }\r\n\r\n \/* SECTION TITLE (NARASI BARU YANG MENARIK) *\/\r\n .community-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: clamp(2.3rem, 5vw, 3.2rem);\r\n color: #ffffff;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* SUBTITLE \/ DESKRIPSI *\/\r\n .community-desc {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 1.05rem;\r\n color: #9ca3af;\r\n line-height: 1.6;\r\n max-width: 600px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n \/* COMMUNITY BUTTONS GRID *\/\r\n .community-buttons-grid {\r\n display: flex;\r\n justify-content: center;\r\n gap: 16px;\r\n width: 100%;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* INDIVIDUAL BUTTON CARD *\/\r\n .community-btn-card {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 12px 30px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.18);\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.95rem;\r\n color: #ffffff;\r\n text-decoration: none;\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition: all 0.3s ease;\r\n min-width: 180px;\r\n }\r\n\r\n .community-btn-card:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.45);\r\n box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .community-btn-card span {\r\n font-size: 0.9rem;\r\n color: #9ca3af;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .community-btn-card:hover span {\r\n color: #ffffff;\r\n }\r\n\r\n \/* RESPONSIVE DESIGN FOR MOBILE *\/\r\n @media (max-width: 600px) {\r\n .community-section {\r\n padding: 40px 16px;\r\n }\r\n\r\n .community-title {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .community-desc {\r\n font-size: 0.92rem;\r\n }\r\n\r\n .community-buttons-grid {\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n .community-btn-card {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"community-section\">\r\n \r\n \r\n <h2 class=\"community-title\">Enter The Circle.<\/h2>\r\n\r\n \r\n <p class=\"community-desc\">\r\n Direct community discussions without noise, open strategies, and a clear direction forward. Become a part of Ottermoka.\r\n <\/p>\r\n\r\n \r\n <div class=\"community-buttons-grid\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"community-btn-card\">\r\n X \/ Twitter <span>\u2197<\/span>\r\n <\/a>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"community-btn-card\">\r\n Telegram <span>\u2197<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/section>\r\n\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d1f99b4 e-flex e-con-boxed e-con e-parent\" data-id=\"d1f99b4\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-073f4a1 e-con-full e-flex e-con e-child\" data-id=\"073f4a1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbeefef elementor-widget elementor-widget-html\" data-id=\"fbeefef\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<footer style=\"text-align: center; padding: 30px 20px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.8rem; color: #9ca3af;\">\r\n <p style=\"margin-bottom: 8px;\">\u00a9 2026 Ottermoka ($Ottermoka). All rights reserved.<\/p>\r\n <p style=\"font-size: 0.75rem; color: #6b7280; max-width: 600px; margin: 0 auto; line-height: 1.5;\">\r\n Disclaimer: Digital assets involve high risk. Always perform independent research before making financial decisions.\r\n <\/p>\r\n<\/footer>\t\t<\/div>\n\t\t\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>Ottermoka Navbar with Video Gallery Ottermoka X \/ Twitter Telegram Chart Swap Gallery Ottermoka Video Gallery \u2715 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the […]<\/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:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":10,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Ottermoka Navbar with Video Gallery<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Transparan agar fleksibel di WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* NAVBAR CONTAINER *\/\r\n .navbar-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 16px auto 0;\r\n padding: 0 20px;\r\n position: sticky;\r\n top: 16px;\r\n z-index: 1000;\r\n }\r\n\r\n \/* ANIMATED SILVER OUTLINE BAR CONTAINER *\/\r\n .nav-silver-wrapper {\r\n position: relative;\r\n border-radius: 100px;\r\n padding: 1px; \/* Jarak untuk border animasi *\/\r\n overflow: hidden;\r\n background: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n \/* SMOOTH ROTATING SILVER GRADIENT FOR MAIN BAR *\/\r\n .nav-silver-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: conic-gradient(\r\n from 0deg,\r\n transparent 0%,\r\n transparent 40%,\r\n #ffffff 50%,\r\n #919eab 60%,\r\n transparent 70%,\r\n transparent 100%\r\n );\r\n animation: rotateSilver 6s linear infinite;\r\n }\r\n\r\n @keyframes rotateSilver {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* GLASS NAV CONTENT *\/\r\n .nav-glass-bar {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 20px;\r\n background: rgba(12, 17, 29, 0.85);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-radius: 100px;\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .nav-silver-wrapper:hover {\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* BRAND LOGO AREA *\/\r\n .brand-logo {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: 1.35rem;\r\n color: #ffffff;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* CARD LINGKARAN KHUSUS UNTUK ICON LOGO *\/\r\n .avatar-card-container {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n padding: 2px;\r\n background: rgba(255, 255, 255, 0.15);\r\n border: 1px solid rgba(255, 255, 255, 0.8); \/* Outline Putih Jelas *\/\r\n box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .avatar-card-container:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 0 16px rgba(255, 255, 255, 0.45);\r\n }\r\n\r\n \/* GAMBAR MENGIKUTI LINGKARAN CARD *\/\r\n .brand-avatar {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n \/* MENU LINKS (CONTAINER TOMBOL) DESKTOP *\/\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px; \/* Jarak antar card tombol *\/\r\n list-style: none;\r\n }\r\n\r\n \/* CARD INDIVIDU UNTUK SETIAP TOMBOL STANDAR *\/\r\n .nav-item-card {\r\n display: inline-block;\r\n }\r\n\r\n .nav-item-card a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 8px 18px;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.88rem;\r\n color: #9ca3af;\r\n text-decoration: none;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n }\r\n\r\n \/* HOVER EFFECT PADA CARD TOMBOL STANDAR *\/\r\n .nav-item-card a:hover {\r\n color: #ffffff;\r\n background: rgba(255, 255, 255, 0.12);\r\n border-color: rgba(255, 255, 255, 0.4);\r\n box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* TOMBOL GALLERY DENGAN WARNA MEMBEDAKAN (#6D5C59) *\/\r\n .btn-gallery-distinct {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 8px 20px;\r\n background: linear-gradient(135deg, #6D5C59 0%, #4a3e3c 100%);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 400;\r\n font-size: 0.88rem;\r\n color: #ffffff;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n cursor: pointer;\r\n box-shadow: 0 2px 10px rgba(109, 92, 89, 0.4);\r\n }\r\n\r\n .btn-gallery-distinct:hover {\r\n background: linear-gradient(135deg, #826e6a 0%, #5c4d4a 100%);\r\n border-color: #ffffff;\r\n box-shadow: 0 4px 18px rgba(109, 92, 89, 0.7);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* --- POP-UP GALLERY MODAL STYLES --- *\/\r\n .gallery-modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: rgba(8, 11, 16, 0.85);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n z-index: 2000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .gallery-modal-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .gallery-modal-card {\r\n background: rgba(18, 24, 38, 0.9);\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n border-radius: 24px;\r\n max-width: 900px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 32px 24px;\r\n position: relative;\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\r\n transform: scale(0.95);\r\n transition: transform 0.35s ease;\r\n }\r\n\r\n .gallery-modal-overlay.active .gallery-modal-card {\r\n transform: scale(1);\r\n }\r\n\r\n \/* MODAL HEADER *\/\r\n .gallery-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n padding-bottom: 12px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .gallery-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800;\r\n font-size: 1.8rem;\r\n color: #ffffff;\r\n }\r\n\r\n .gallery-close-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n font-size: 1.2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n }\r\n\r\n .gallery-close-btn:hover {\r\n background: #ffffff;\r\n color: #000;\r\n }\r\n\r\n \/* GALLERY VIDEO GRID *\/\r\n .video-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .video-card-item {\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n position: relative;\r\n }\r\n\r\n .video-card-item:hover {\r\n border-color: rgba(255, 255, 255, 0.4);\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n .video-player {\r\n width: 100%;\r\n height: 220px;\r\n object-fit: cover;\r\n display: block;\r\n background: #000;\r\n }\r\n\r\n \/* \ud83d\udcf1 KHUSUS TAMPILAN MOBILE (HP) *\/\r\n @media (max-width: 768px) {\r\n .navbar-section {\r\n margin-top: 8px;\r\n top: 8px;\r\n padding: 0 12px;\r\n }\r\n \r\n .nav-glass-bar {\r\n padding: 8px 16px;\r\n justify-content: center; \/* Logo di-center di tampilan mobile *\/\r\n }\r\n\r\n \/* SEMBUNYIKAN SEMUA TOMBOL DI MOBILE *\/\r\n .nav-links {\r\n display: none !important;\r\n }\r\n\r\n .brand-logo {\r\n font-size: 1.15rem;\r\n gap: 10px;\r\n }\r\n\r\n .avatar-card-container {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n\r\n .gallery-modal-card {\r\n padding: 20px 16px;\r\n }\r\n\r\n .video-player {\r\n height: 180px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"navbar-section\">\r\n <div class=\"nav-silver-wrapper\">\r\n <nav class=\"nav-glass-bar\">\r\n \r\n \r\n <a href=\"#\" class=\"brand-logo\">\r\n <div class=\"avatar-card-container\">\r\n <img decoding=\"async\" src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/ICON-WEB-OTTERMOKA.png\" alt=\"Ottermoka Logo\" class=\"brand-avatar\">\r\n <\/div>\r\n Ottermoka\r\n <\/a>\r\n\r\n \r\n <ul class=\"nav-links\">\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">X \/ Twitter<\/a><\/li>\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">Telegram<\/a><\/li>\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">Chart<\/a><\/li>\r\n <li class=\"nav-item-card\"><a href=\"YOUR-LINK\" target=\"_blank\">Swap<\/a><\/li>\r\n \r\n \r\n <li class=\"nav-item-card\">\r\n <button class=\"btn-gallery-distinct\" onclick=\"openGallery()\">Gallery<\/button>\r\n <\/li>\r\n <\/ul>\r\n\r\n <\/nav>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gallery-modal-overlay\" id=\"galleryModal\" onclick=\"closeGalleryOnBackdrop(event)\">\r\n <div class=\"gallery-modal-card\">\r\n \r\n \r\n <div class=\"gallery-header\">\r\n <h3 class=\"gallery-title\">Ottermoka Video Gallery<\/h3>\r\n <button class=\"gallery-close-btn\" onclick=\"closeGallery()\">\u2715<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-grid\">\r\n \r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-1.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-2.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-3.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-4.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-5.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-card-item\">\r\n <video class=\"video-player\" controls preload=\"metadata\">\r\n <source src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/OTTERMOKA-6.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n function openGallery() {\r\n const modal = document.getElementById('galleryModal');\r\n modal.classList.add('active');\r\n }\r\n\r\n function closeGallery() {\r\n const modal = document.getElementById('galleryModal');\r\n modal.classList.remove('active');\r\n \r\n \/\/ Pause semua video yang sedang berputar saat modal ditutup\r\n const videos = document.querySelectorAll('.video-player');\r\n videos.forEach(video => {\r\n video.pause();\r\n });\r\n }\r\n\r\n function closeGalleryOnBackdrop(event) {\r\n if (event.target.classList.contains('gallery-modal-overlay')) {\r\n closeGallery();\r\n }\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d97c3c5 e-con-full e-flex e-con e-child\" data-id=\"d97c3c5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68aecbe elementor-widget elementor-widget-html\" data-id=\"68aecbe\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ottermoka Hero Section<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Fleksibel untuk WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* HERO WRAPPER *\/\r\n .hero-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 40px 20px;\r\n display: flex;\r\n justify-content: flex-end; \/* Mendorong seluruh konten ke kanan *\/\r\n }\r\n\r\n \/* UNIFIED CONTENT GROUP (TANPA CARD) *\/\r\n .hero-content-group {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end; \/* Semua elemen internal rata kanan *\/\r\n text-align: right; \/* Semua teks rata kanan *\/\r\n width: 100%;\r\n max-width: 650px;\r\n }\r\n\r\n \/* MAIN TITLE *\/\r\n .hero-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: clamp(2.5rem, 5vw, 3.8rem);\r\n line-height: 1.05;\r\n color: #ffffff;\r\n margin-bottom: 14px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* SUBTITLE *\/\r\n .hero-subtitle {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.98rem;\r\n color: #9ca3af;\r\n line-height: 1.6;\r\n margin-bottom: 24px;\r\n max-width: 560px;\r\n }\r\n\r\n \/* CTA BUTTONS *\/\r\n .hero-cta {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: flex-end; \/* Tombol rata kanan *\/\r\n margin-bottom: 24px;\r\n width: 100%;\r\n }\r\n\r\n .btn-card {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px 24px;\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.88rem;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-primary {\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: rgba(255, 255, 255, 0.18);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* CONTRACT ADDRESS BOX *\/\r\n .ca-card {\r\n background: rgba(12, 17, 29, 0.75);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n border-radius: 100px;\r\n padding: 6px 6px 6px 18px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n max-width: 440px;\r\n width: 100%;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .ca-card:hover {\r\n background: rgba(12, 17, 29, 0.9);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n .ca-text {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.82rem;\r\n color: #9ca3af;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex: 1;\r\n text-align: left; \/* Alamat CA tetap dibaca dari kiri *\/\r\n }\r\n\r\n .copy-btn {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: #ffffff;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n padding: 8px 18px;\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.8rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n flex-shrink: 0;\r\n }\r\n\r\n .copy-btn:hover {\r\n background: #ffffff;\r\n color: #080b10;\r\n border-color: #ffffff;\r\n }\r\n\r\n \/* RESPONSIVE DESIGNS FOR MOBILE *\/\r\n @media (max-width: 768px) {\r\n .hero-section {\r\n padding: 20px 12px;\r\n }\r\n\r\n .hero-content-group {\r\n max-width: 100%;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .hero-cta {\r\n flex-direction: column;\r\n }\r\n\r\n .btn-card {\r\n width: 100%;\r\n }\r\n\r\n .ca-card {\r\n padding: 6px 6px 6px 12px;\r\n }\r\n\r\n .ca-text {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .copy-btn {\r\n padding: 6px 14px;\r\n font-size: 0.75rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"hero-section\">\r\n <div class=\"hero-content-group\">\r\n \r\n \r\n <h1 class=\"hero-title\">Ottermoka.<\/h1>\r\n\r\n \r\n <p class=\"hero-subtitle\">\r\n A calm composure amid a noisy market. Ottermoka delivers an organic narrative focused on solid fundamentals and steady momentum.\r\n <\/p>\r\n\r\n \r\n <div class=\"hero-cta\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-card btn-primary\">Swap $Ottermoka<\/a>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-card btn-primary\">Open Chart<\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"ca-card\">\r\n <span class=\"ca-text\" id=\"ca-value\">0x0000000000000000000000000000000000000000<\/span>\r\n <button class=\"copy-btn\" id=\"copy-btn\" onclick=\"copyCA()\">Copy CA<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n function copyCA() {\r\n const caText = document.getElementById('ca-value').innerText;\r\n const btn = document.getElementById('copy-btn');\r\n \r\n navigator.clipboard.writeText(caText).then(() => {\r\n btn.innerText = 'Copied!';\r\n btn.style.background = '#ffffff';\r\n btn.style.color = '#080b10';\r\n \r\n setTimeout(() => {\r\n btn.innerText = 'Copy CA';\r\n btn.style.background = 'rgba(255, 255, 255, 0.1)';\r\n btn.style.color = '#ffffff';\r\n }, 2000);\r\n }).catch(err => {\r\n console.error('Failed to copy: ', err);\r\n });\r\n }\r\n <\/script>\r\n\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e8db1c e-flex e-con-boxed e-con e-parent\" data-id=\"6e8db1c\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f3fefa3 e-con-full e-flex e-con e-child\" data-id=\"f3fefa3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f0127a elementor-widget elementor-widget-html\" data-id=\"8f0127a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ottermoka About & Tokenomics<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Fleksibel untuk WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* MAIN CONTAINER (CENTERED) *\/\r\n .about-token-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* --- ABOUT SECTION --- *\/\r\n .about-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n max-width: 780px;\r\n margin-bottom: 70px;\r\n }\r\n\r\n \/* ROTATING IMAGE WRAPPER (GLASS CIRCLE + AKSEN #6D5C59) *\/\r\n .rotating-image-card {\r\n width: 140px;\r\n height: 140px;\r\n border-radius: 50%;\r\n padding: 4px;\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 2px solid #6D5C59; \/* Aksen warna baru *\/\r\n box-shadow: 0 0 25px rgba(109, 92, 89, 0.35);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 32px;\r\n overflow: hidden;\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .rotating-image-card:hover {\r\n box-shadow: 0 0 35px rgba(109, 92, 89, 0.6);\r\n transform: scale(1.03);\r\n }\r\n\r\n .rotating-asset {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n animation: smoothRotate 14s linear infinite; \/* Berputar Loop Smooth *\/\r\n }\r\n\r\n @keyframes smoothRotate {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* SECTION HEADING *\/\r\n .section-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: clamp(2.2rem, 4.5vw, 3rem);\r\n color: #ffffff;\r\n margin-bottom: 20px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* ABOUT BODY TEXT *\/\r\n .about-desc {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 1.05rem;\r\n color: #9ca3af;\r\n line-height: 1.7;\r\n margin-bottom: 16px;\r\n }\r\n\r\n \/* WARNA DARI HIJAU DIGANTI KE #6D5C59 *\/\r\n .about-desc.highlight {\r\n color: #6D5C59;\r\n font-weight: 400;\r\n }\r\n\r\n \/* --- TOKENOMICS SECTION (4 POIN GLASS CARD) --- *\/\r\n .tokenomics-container {\r\n width: 100%;\r\n max-width: 1000px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .tokenomics-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 20px;\r\n width: 100%;\r\n margin-top: 24px;\r\n }\r\n\r\n \/* GLASS CARD STYLE *\/\r\n .token-card {\r\n background: rgba(18, 24, 38, 0.55);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 24px 20px;\r\n flex: 1;\r\n min-width: 200px;\r\n max-width: 230px;\r\n transition: all 0.35s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .token-card:hover {\r\n border-color: rgba(109, 92, 89, 0.6);\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(109, 92, 89, 0.25);\r\n }\r\n\r\n .token-label {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.82rem;\r\n color: #9ca3af;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n\r\n .token-value {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: 1.25rem;\r\n color: #ffffff;\r\n }\r\n\r\n \/* RESPONSIVE DESIGN FOR MOBILE *\/\r\n @media (max-width: 768px) {\r\n .about-token-section {\r\n padding: 40px 16px;\r\n }\r\n\r\n .rotating-image-card {\r\n width: 110px;\r\n height: 110px;\r\n }\r\n\r\n .about-container {\r\n margin-bottom: 50px;\r\n }\r\n\r\n .token-card {\r\n min-width: 45%;\r\n max-width: 48%;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .token-card {\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"about-token-section\">\r\n\r\n \r\n <div class=\"about-container\">\r\n \r\n \r\n <div class=\"rotating-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ottermoka.xyz\/wp-content\/uploads\/2026\/08\/ASET.png\" alt=\"Ottermoka Rotating Asset\" class=\"rotating-asset\">\r\n <\/div>\r\n\r\n <h2 class=\"section-title\">Focus. Consistency. Organic.<\/h2>\r\n \r\n <p class=\"about-desc\">\r\n Composure is power. In a market driven by panic, Ottermoka maintains its natural rhythm without unnecessary gimmicks. Built to embody resilience and adaptability, always navigating toward its objective.\r\n <\/p>\r\n \r\n <p class=\"about-desc highlight\">\r\n Beyond culture\u2014setting a refined standard for community-driven movement.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"tokenomics-container\">\r\n <h2 class=\"section-title\">Token Structure<\/h2>\r\n\r\n <div class=\"tokenomics-grid\">\r\n \r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Total Supply<\/div>\r\n <div class=\"token-value\">1,000,000,000<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Tax<\/div>\r\n <div class=\"token-value\">0% \/ 0%<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Liquidity<\/div>\r\n <div class=\"token-value\">Burned<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card\">\r\n <div class=\"token-label\">Contract<\/div>\r\n <div class=\"token-value\">Renounced<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d8227a e-flex e-con-boxed e-con e-parent\" data-id=\"8d8227a\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/ottermoka.xyz\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/HERO-OTTERMOKA1.mp4","background_play_on_mobile":"yes"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-f2260ae e-con-full e-flex e-con e-child\" data-id=\"f2260ae\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c394cbf elementor-widget elementor-widget-html\" data-id=\"c394cbf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Ottermoka Community Section<\/title>\r\n\r\n \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=Bricolage+Grotesque:opsz,wght@12..96,800&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* RESET BASE *\/\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n background-color: transparent !important; \/* Fleksibel untuk WordPress *\/\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Inter Light *\/\r\n color: #f3f4f6;\r\n }\r\n\r\n \/* COMMUNITY SECTION CONTAINER (RATA ATAS & TANPA CARD) *\/\r\n .community-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center; \/* Rata tengah horizontal *\/\r\n justify-content: flex-start; \/* Rata atas *\/\r\n text-align: center;\r\n }\r\n\r\n \/* SECTION TITLE (NARASI BARU YANG MENARIK) *\/\r\n .community-title {\r\n font-family: 'Bricolage Grotesque', sans-serif;\r\n font-weight: 800; \/* Bold *\/\r\n font-size: clamp(2.3rem, 5vw, 3.2rem);\r\n color: #ffffff;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n \/* SUBTITLE \/ DESKRIPSI *\/\r\n .community-desc {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 1.05rem;\r\n color: #9ca3af;\r\n line-height: 1.6;\r\n max-width: 600px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n \/* COMMUNITY BUTTONS GRID *\/\r\n .community-buttons-grid {\r\n display: flex;\r\n justify-content: center;\r\n gap: 16px;\r\n width: 100%;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* INDIVIDUAL BUTTON CARD *\/\r\n .community-btn-card {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 12px 30px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.18);\r\n border-radius: 50px;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 300; \/* Light *\/\r\n font-size: 0.95rem;\r\n color: #ffffff;\r\n text-decoration: none;\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition: all 0.3s ease;\r\n min-width: 180px;\r\n }\r\n\r\n .community-btn-card:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.45);\r\n box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .community-btn-card span {\r\n font-size: 0.9rem;\r\n color: #9ca3af;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .community-btn-card:hover span {\r\n color: #ffffff;\r\n }\r\n\r\n \/* RESPONSIVE DESIGN FOR MOBILE *\/\r\n @media (max-width: 600px) {\r\n .community-section {\r\n padding: 40px 16px;\r\n }\r\n\r\n .community-title {\r\n font-size: 2.2rem;\r\n }\r\n\r\n .community-desc {\r\n font-size: 0.92rem;\r\n }\r\n\r\n .community-buttons-grid {\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n .community-btn-card {\r\n width: 100%;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"community-section\">\r\n \r\n \r\n <h2 class=\"community-title\">Enter The Circle.<\/h2>\r\n\r\n \r\n <p class=\"community-desc\">\r\n Direct community discussions without noise, open strategies, and a clear direction forward. Become a part of Ottermoka.\r\n <\/p>\r\n\r\n \r\n <div class=\"community-buttons-grid\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"community-btn-card\">\r\n X \/ Twitter <span>\u2197<\/span>\r\n <\/a>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"community-btn-card\">\r\n Telegram <span>\u2197<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/section>\r\n\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d1f99b4 e-flex e-con-boxed e-con e-parent\" data-id=\"d1f99b4\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-073f4a1 e-con-full e-flex e-con e-child\" data-id=\"073f4a1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fbeefef elementor-widget elementor-widget-html\" data-id=\"fbeefef\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<footer style=\"text-align: center; padding: 30px 20px; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.8rem; color: #9ca3af;\">\r\n <p style=\"margin-bottom: 8px;\">\u00a9 2026 Ottermoka ($Ottermoka). All rights reserved.<\/p>\r\n <p style=\"font-size: 0.75rem; color: #6b7280; max-width: 600px; margin: 0 auto; line-height: 1.5;\">\r\n Disclaimer: Digital assets involve high risk. Always perform independent research before making financial decisions.\r\n <\/p>\r\n<\/footer>\t\t<\/div>\n\t\t\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>Ottermoka Navbar with Video Gallery Ottermoka X \/ Twitter Telegram Chart Swap Gallery Ottermoka Video Gallery \u2715 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the […]<\/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:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":10,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/ottermoka.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}