{"id":9,"date":"2026-07-15T19:16:29","date_gmt":"2026-07-15T19:16:29","guid":{"rendered":"https:\/\/cubeman.lol\/?page_id=9"},"modified":"2026-07-15T20:16:49","modified_gmt":"2026-07-15T20:16:49","slug":"elementor-9","status":"publish","type":"page","link":"https:\/\/cubeman.lol\/","title":{"rendered":"Elementor #9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9\" class=\"elementor elementor-9\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa1a3ba e-flex e-con-boxed e-con e-parent\" data-id=\"fa1a3ba\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/cubeman.lol\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/HERO-CUBEMAN1.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\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-f92a776 e-con-full e-flex e-con e-child\" data-id=\"f92a776\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0fc1920 elementor-widget elementor-widget-html\" data-id=\"0fc1920\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 -->\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=Jersey+25&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        fontFamily: {\r\n          title: ['\"Jersey 25\"', 'sans-serif'],\r\n        },\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Kunci Semua Font ke Satu Tema: Jersey 25 *\/\r\n  .font-jersey { font-family: 'Jersey 25', sans-serif; }\r\n  header a, header nav a { font-family: 'Jersey 25', sans-serif; }\r\n\r\n  \/* Animasi Warna Gonta-Ganti Terus Menerus (RGB Loop) *\/\r\n  @keyframes RGBFlow {\r\n    0% { color: #FFDE4D; }    \/* Kuning Cubeman *\/\r\n    25% { color: #2B7AFA; }   \/* Biru Cubeman *\/\r\n    50% { color: #EF4444; }   \/* Merah *\/\r\n    75% { color: #10B981; }   \/* Hijau *\/\r\n    100% { color: #FFDE4D; }  \/* Kembali ke Kuning *\/\r\n  }\r\n\r\n  .rgb-text {\r\n    animation: RGBFlow 6s infinite linear;\r\n  }\r\n\r\n  \/* Panel Lebih Slim & Minimalis *\/\r\n  .roblox-nav-panel-slim {\r\n    background: rgba(255, 255, 255, 0.96);\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n  }\r\n  \r\n  \/* Tombol 3D Lebih Compact *\/\r\n  .roblox-btn-nav-slim {\r\n    background-color: #FFDE4D;\r\n    border: 2px solid #1E2022;\r\n    box-shadow: 0px 3px 0px #1E2022;\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n  .roblox-btn-nav-slim:hover {\r\n    transform: translateY(1px);\r\n    box-shadow: 0px 2px 0px #1E2022;\r\n  }\r\n  .roblox-btn-nav-slim:active {\r\n    transform: translateY(3px);\r\n    box-shadow: 0px 0px 0px #1E2022;\r\n  }\r\n\r\n  \/* Hover Link Simpel *\/\r\n  .nav-link-slim {\r\n    letter-spacing: 0.03em;\r\n    transition: all 0.15s ease;\r\n    border-bottom: 3px solid transparent;\r\n  }\r\n  .nav-link-slim:hover {\r\n    color: #2B7AFA;\r\n    border-bottom: 3px solid #2B7AFA;\r\n    transform: translateY(-1px);\r\n  }\r\n<\/style>\r\n\r\n<!-- HEADER SLIM (Transparan & Ringan) -->\r\n<header class=\"w-full bg-transparent p-3 antialiased\">\r\n  <div class=\"max-w-5xl mx-auto\">\r\n    <div class=\"roblox-nav-panel-slim px-4 py-2.5 flex flex-col md:flex-row justify-between items-center gap-3\">\r\n      \r\n      <!-- Logo \/ Brand Name (CUBEMAN Menyatu & Animasi Warna) -->\r\n      <a href=\"#\" class=\"rgb-text text-4xl font-jersey tracking-wider select-none drop-shadow-[0_2px_0_rgba(30,32,34,1)]\">\r\n        CUBEMAN\r\n      <\/a>\r\n      \r\n      <!-- Main Menu (Satu Tema Font Jersey 25) -->\r\n      <nav class=\"flex flex-wrap justify-center items-center gap-x-5 gap-y-1 text-2xl font-jersey\">\r\n        <a href=\"#home\" class=\"nav-link-slim px-1 py-0.5 text-cubeDark\">Home<\/a>\r\n        <a href=\"#about\" class=\"nav-link-slim px-1 py-0.5 text-cubeDark\">About<\/a>\r\n        <a href=\"#tokenomics\" class=\"nav-link-slim px-1 py-0.5 text-cubeDark\">Tokenomics<\/a>\r\n        <a href=\"#gallery\" class=\"nav-link-slim px-1 py-0.5 text-cubeDark\">Gallery<\/a>\r\n        <a href=\"#community\" class=\"nav-link-slim px-1 py-0.5 text-cubeDark\">Community<\/a>\r\n      <\/nav>\r\n      \r\n      <!-- Call to Action (CTA) Button Slim -->\r\n      <a href=\"LINK-KAMU\" target=\"_blank\" class=\"roblox-btn-nav-slim font-jersey text-2xl px-5 py-0.5 rounded-lg uppercase tracking-wider text-center w-full md:w-auto text-cubeDark\">\r\n        Buy $Cubeman\r\n      <\/a>\r\n      \r\n    <\/div>\r\n  <\/div>\r\n<\/header>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2809f9d e-con-full e-flex e-con e-child\" data-id=\"2809f9d\" data-element_type=\"container\" id=\"home\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4f645b elementor-widget elementor-widget-html\" data-id=\"a4f645b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 (Judul) & Pixelify Sans (Deskripsi\/CA) -->\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=Jersey+25&family=Pixelify+Sans:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Font Awesome untuk Ikon Copy -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Pembagian Tema Font Selaras dengan Nav Menu *\/\r\n  .hero-slim-ca h1 { \r\n    font-family: 'Jersey 25', sans-serif !important; \r\n  }\r\n  .hero-slim-ca p, .hero-slim-ca input, .hero-slim-ca button, .hero-slim-ca span { \r\n    font-family: 'Pixelify Sans', sans-serif !important; \r\n  }\r\n\r\n  \/* Animasi Warna Teratur (Mengikuti Pola Nav Menu) *\/\r\n  @keyframes RGBFlowSlim {\r\n    0% { color: #FFDE4D; }\r\n    25% { color: #2B7AFA; }\r\n    50% { color: #EF4444; }\r\n    75% { color: #10B981; }\r\n    100% { color: #FFDE4D; }\r\n  }\r\n\r\n  .rgb-text-slim {\r\n    animation: RGBFlowSlim 6s infinite linear;\r\n  }\r\n\r\n  \/* Efek Bayangan Teks Solid Khas 3D Minimalis *\/\r\n  .text-shadow-solid-dark {\r\n    text-shadow: \r\n      3px 3px 0px #1E2022,\r\n      -1px -1px 0px #1E2022,  \r\n       1px -1px 0px #1E2022,\r\n      -1px  1px 0px #1E2022,\r\n       1px  1px 0px #1E2022;\r\n  }\r\n\r\n  \/* Bar CA Ramping Menyesuaikan Struktur Panel Nav Menu *\/\r\n  .roblox-ca-panel-slim {\r\n    background-color: #FFDE4D;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n  }\r\n\r\n  \/* Tombol Copy 3D Biru Menyesuaikan Style roblox-btn-nav-slim *\/\r\n  .roblox-btn-copy-striking {\r\n    background-color: #2B7AFA;\r\n    color: white;\r\n    border: 2px solid #1E2022;\r\n    box-shadow: 0px 3px 0px #1E2022;\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n  .roblox-btn-copy-striking:hover {\r\n    transform: translateY(1px);\r\n    box-shadow: 0px 2px 0px #1E2022;\r\n    background-color: #1A65DF;\r\n  }\r\n  .roblox-btn-copy-striking:active {\r\n    transform: translateY(3px);\r\n    box-shadow: 0px 0px 0px #1E2022;\r\n  }\r\n<\/style>\r\n\r\n<!-- HERO SECTION SUPER SLIM -->\r\n<section class=\"hero-slim-ca w-full bg-transparent py-6 px-4 antialiased text-center\">\r\n  <div class=\"max-w-2xl mx-auto flex flex-col items-center justify-center gap-3\">\r\n    \r\n    <!-- Headline Utama (Jersey 25) - Sebagian Putih, Sebagian RGB Loop -->\r\n    <h1 class=\"text-5xl sm:text-7xl leading-tight uppercase tracking-wider text-shadow-solid-dark select-none\">\r\n      <span class=\"text-white\">Life is Boxy,<\/span> <br class=\"sm:hidden\">\r\n      <span class=\"rgb-text-slim\">But Just Take It Easy!<\/span>\r\n    <\/h1>\r\n    \r\n    <!-- Deskripsi Lebih Simpel & Singkat (Pixelify Sans) -->\r\n    <p class=\"text-base sm:text-lg text-white text-shadow-solid-dark max-w-lg mx-auto leading-normal tracking-wide font-medium\">\r\n      Welcome to Cubeman's world! Just a chill yellow-and-blue guy enjoying games, chocolate, and simple vibes. We're here to share laughs and grow together as a community.\r\n    <\/p>\r\n\r\n    <!-- Ramping & Sangat Mencolok Live Copyable Contract Address (CA) -->\r\n    <div class=\"w-full max-w-sm mt-2\">\r\n      <span class=\"block text-[11px] font-bold uppercase tracking-widest mb-1.5 text-white text-shadow-solid-dark\">\r\n        \u25bc OFFICIAL CONTRACT ADDRESS \u25bc\r\n      <\/span>\r\n      <!-- Struktur Bar CA Ramping Identik dengan Modul Navigasi -->\r\n      <div class=\"roblox-ca-panel-slim flex items-center p-0.5 overflow-hidden\">\r\n        <input type=\"text\" id=\"caHeroInput\" readonly value=\"0x83c18b29c9a3b839f9b5c928b17c9183c27e8a32\" class=\"bg-transparent text-xs sm:text-sm font-bold w-full px-2 text-cubeDark outline-none select-all truncate text-center md:text-left tracking-wide\">\r\n        <button onclick=\"copyHeroCA()\" id=\"copyHeroBtn\" class=\"roblox-btn-copy-striking text-xs font-bold px-3 py-1 rounded-lg flex items-center gap-1 shrink-0 whitespace-nowrap uppercase\">\r\n          <i class=\"fa-regular fa-copy\"><\/i> Copy\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- Script Copy CA -->\r\n<script>\r\n  function copyHeroCA() {\r\n    var copyText = document.getElementById(\"caHeroInput\");\r\n    var copyBtn = document.getElementById(\"copyHeroBtn\");\r\n    \r\n    copyText.select();\r\n    copyText.setSelectionRange(0, 99999);\r\n\r\n    navigator.clipboard.writeText(copyText.value).then(function() {\r\n      copyBtn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Copied!';\r\n      copyBtn.classList.remove(\"roblox-btn-copy-striking\");\r\n      copyBtn.style.backgroundColor = \"#10B981\";\r\n      copyBtn.style.color = \"white\";\r\n      \r\n      setTimeout(function() {\r\n        copyBtn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i> Copy';\r\n        copyBtn.style.backgroundColor = \"\";\r\n        copyBtn.style.color = \"\";\r\n        copyBtn.classList.add(\"roblox-btn-copy-striking\");\r\n      }, 2000);\r\n    }).catch(function(err) {\r\n      console.error('Gagal menyalin:', err);\r\n    });\r\n  }\r\n<\/script>\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-fafdda6 e-flex e-con-boxed e-con e-parent\" data-id=\"fafdda6\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-054571f e-con-full e-flex e-con e-child\" data-id=\"054571f\" data-element_type=\"container\" id=\"about\">\n\t\t\t\t<div class=\"elementor-element elementor-element-766ad67 elementor-widget elementor-widget-html\" data-id=\"766ad67\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 (Judul) & Pixelify Sans (Deskripsi) -->\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=Jersey+25&family=Pixelify+Sans:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Pembagian Tema Font *\/\r\n  .about-section h2 { \r\n    font-family: 'Jersey 25', sans-serif !important; \r\n  }\r\n  .about-section p, .about-section span, .about-section div { \r\n    font-family: 'Pixelify Sans', sans-serif !important; \r\n  }\r\n\r\n  \/* Animasi Warna Gonta-Ganti Terus Menerus (RGB Loop) *\/\r\n  @keyframes RGBFlowAbout {\r\n    0% { color: #FFDE4D; }\r\n    25% { color: #FFFFFF; }\r\n    50% { color: #EF4444; }\r\n    75% { color: #10B981; }\r\n    100% { color: #FFDE4D; }\r\n  }\r\n\r\n  .rgb-text-about {\r\n    animation: RGBFlowAbout 6s infinite linear;\r\n  }\r\n\r\n  \/* Efek Bayangan Hitam Solid Khas Roblox 3D *\/\r\n  .text-shadow-solid-dark {\r\n    text-shadow: \r\n      2.5px 2.5px 0px #1E2022,\r\n      -1px -1px 0px #1E2022,  \r\n       1px -1px 0px #1E2022,\r\n      -1px  1px 0px #1E2022,\r\n       1px  1px 0px #1E2022;\r\n  }\r\n\r\n  \/* Card Varian Biru Menyesuaikan Desain Nav Slim & CA Bar *\/\r\n  .roblox-about-panel-blue {\r\n    background-color: #2B7AFA;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n  }\r\n\r\n  \/* Animasi Gambar Melayang Konstan (Idle Floating Effect) *\/\r\n  @keyframes floatAnimation {\r\n    0% { transform: translateY(0px); }\r\n    50% { transform: translateY(-8px); }\r\n    100% { transform: translateY(0px); }\r\n  }\r\n  \r\n  .floating-img-idle {\r\n    animation: floatAnimation 4s ease-in-out infinite;\r\n  }\r\n\r\n  \/* Setup Utama Parallax Smooth 3D *\/\r\n  .parallax-wrapper {\r\n    perspective: 1000px;\r\n  }\r\n  \r\n  .parallax-card, .parallax-img-container {\r\n    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);\r\n    transform-style: preserve-3d;\r\n    will-change: transform;\r\n  }\r\n<\/style>\r\n\r\n<!-- SECTION ABOUT (Full Smooth Parallax & Floating Image) -->\r\n<section id=\"about\" class=\"about-section w-full bg-transparent py-6 px-4 antialiased parallax-wrapper\">\r\n  <div class=\"max-w-4xl mx-auto\">\r\n    \r\n    <div class=\"grid grid-cols-1 md:grid-cols-5 gap-6 items-center\">\r\n      \r\n      <!-- Sisi Kiri: Container Gambar dengan Parallax & Gerak Otomatis -->\r\n      <div class=\"md:col-span-2 flex justify-center w-full\">\r\n        <div id=\"cubemanImgContainer\" class=\"parallax-img-container w-full max-w-[240px] sm:max-w-[280px] md:max-w-full aspect-square flex items-center justify-center\">\r\n          <!-- Image memiliki class floating-img-idle agar selalu bergerak naik turun lembut -->\r\n          <img decoding=\"async\" \r\n            src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/ICON-X-CUBEMAN.png\" \r\n            alt=\"Cubeman Icon\" \r\n            class=\"floating-img-idle w-full h-full object-contain pointer-events-none drop-shadow-[4px_6px_0px_rgba(30,32,34,0.25)]\"\r\n          >\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <!-- Sisi Kanan: Card Warna Biru dengan Efek Parallax Smooth -->\r\n      <div id=\"aboutCard\" class=\"parallax-card roblox-about-panel-blue p-5 sm:p-6 md:col-span-3 flex flex-col justify-between h-full min-h-[260px]\">\r\n        <div>\r\n          <!-- Judul Seksi (Jersey 25) - Sebagian Putih, Sebagian RGB Loop -->\r\n          <h2 class=\"text-4xl sm:text-5xl leading-tight uppercase tracking-wider text-shadow-solid-dark mb-3 select-none\">\r\n            <span class=\"text-white\">Who is<\/span> \r\n            <span class=\"rgb-text-about\">Cubeman?<\/span>\r\n          <\/h2>\r\n          \r\n          <!-- Deskripsi Simpel & Singkat (Pixelify Sans) -->\r\n          <p class=\"text-sm sm:text-base text-white text-shadow-solid-dark leading-relaxed font-medium mb-3\">\r\n            Ever feel like the outside world is way too complicated? Cubeman gets it. He chooses to focus on the simple things: retro gaming on a vintage PC, ranking up in his headset, and enjoying chocolate bars on the couch. \r\n          <\/p>\r\n          \r\n          <p class=\"text-sm sm:text-base text-white text-shadow-solid-dark leading-relaxed font-medium\">\r\n            He represents a generation looking for instant entertainment, a good laugh, and a zero-drama space. No fake promises\u2014just good vibes, internet meme culture, and a solid community journey!\r\n          <\/p>\r\n        <\/div>\r\n        \r\n        <!-- Quote Box Kuning Ramping Selaras dengan Aksen Warna Utama -->\r\n        <div class=\"mt-4 p-2 bg-cubeYellow text-cubeDark border-2 border-cubeDark rounded-lg text-xs sm:text-sm font-bold tracking-wide shadow-[0_2px_0_#1E2022]\">\r\n          \"The journey on Earth with the Cubeman community is going to be an absolute blast!\"\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- Script Pergerakan Mouse Parallax (Multi-Element Tilt) -->\r\n<script>\r\n  const aboutSection = document.getElementById('about');\r\n  const targetImg = document.getElementById('cubemanImgContainer');\r\n  const targetCard = document.getElementById('aboutCard');\r\n\r\n  aboutSection.addEventListener('mousemove', (e) => {\r\n    const rect = aboutSection.getBoundingClientRect();\r\n    \r\n    \/\/ Titik koordinat kursor relatif terhadap section\r\n    const x = e.clientX - rect.left;\r\n    const y = e.clientY - rect.top;\r\n    \r\n    \/\/ Titik tengah area\r\n    const centerX = rect.width \/ 2;\r\n    const centerY = rect.height \/ 2;\r\n    \r\n    \/\/ Kalkulasi pergeseran sudut rotasi\r\n    const rotateX = ((centerY - y) \/ centerY) * 10;\r\n    const rotateY = ((x - centerX) \/ centerX) * 10;\r\n    \r\n    \/\/ Parallax Gambar: Berlawanan arah sedikit agar kontras dinamis\r\n    targetImg.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;\r\n    \r\n    \/\/ Parallax Card Biru: Mengikuti arah rotasi mouse dengan halus\r\n    targetCard.style.transform = `rotateX(${-rotateX * 0.5}deg) rotateY(${-rotateY * 0.5}deg) translateZ(10px)`;\r\n  });\r\n\r\n  \/\/ Reset transisi kembali ke posisi semula saat cursor meninggalkan area section\r\n  aboutSection.addEventListener('mouseleave', () => {\r\n    targetImg.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(0px)';\r\n    targetCard.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(0px)';\r\n  });\r\n<\/script>\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-c0fc9e5 e-flex e-con-boxed e-con e-parent\" data-id=\"c0fc9e5\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-92dc1bc e-con-full e-flex e-con e-child\" data-id=\"92dc1bc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b315346 elementor-widget elementor-widget-html\" data-id=\"b315346\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 -->\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=Jersey+25&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Kunci Font ke Jersey 25 *\/\r\n  .marquee-running-text * {\r\n    font-family: 'Jersey 25', sans-serif !important;\r\n  }\r\n\r\n  \/* Animasi Warna Gonta-Ganti Terus Menerus (RGB Loop) *\/\r\n  @keyframes RGBFlowMarquee {\r\n    0% { color: #FFDE4D; }\r\n    25% { color: #2B7AFA; }\r\n    50% { color: #EF4444; }\r\n    75% { color: #10B981; }\r\n    100% { color: #FFDE4D; }\r\n  }\r\n\r\n  .rgb-marquee {\r\n    animation: RGBFlowMarquee 4s infinite linear;\r\n  }\r\n\r\n  \/* Efek Bayangan Hitam Solid (Stroke Tebal Roblox) *\/\r\n  .text-shadow-marquee {\r\n    text-shadow: \r\n      3px 3px 0px #1E2022,\r\n      -1px -1px 0px #1E2022,  \r\n       1px -1px 0px #1E2022,\r\n      -1px  1px 0px #1E2022,\r\n       1px  1px 0px #1E2022;\r\n  }\r\n\r\n  \/* Animasi Bergerak ke Kiri Tanpa Batas *\/\r\n  @keyframes runningText {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(-50%); }\r\n  }\r\n\r\n  .animate-running-text {\r\n    display: flex;\r\n    width: max-content;\r\n    animation: runningText 25s infinite linear;\r\n  }\r\n\r\n  \/* Efek Pause Saat Di-hover Mouse *\/\r\n  .marquee-running-text:hover .animate-running-text {\r\n    animation-play-state: paused;\r\n  }\r\n<\/style>\r\n\r\n<!-- RUNNING TEXT SECTION (Slim, Transparan, & Tanpa Card) -->\r\n<div class=\"marquee-running-text w-full bg-transparent py-2 overflow-hidden select-none antialiased\">\r\n  <div class=\"animate-running-text flex items-center gap-12 text-3xl sm:text-4xl text-white font-bold uppercase tracking-widest text-shadow-marquee\">\r\n    \r\n    <!-- SET UTAMA TEXT -->\r\n    <span>LIFE IS BOXY, JUST TAKE IT EASY!<\/span>\r\n    <span class=\"rgb-marquee\">\u2605 CUBEMAN \u2605<\/span>\r\n    <span>WELCOME TO CUBEMAN'S WORLD!<\/span>\r\n    <span class=\"rgb-marquee\">\u2605 0% TAX \u2605<\/span>\r\n    <span>PULL UP A CHAIR AND CHILL WITH US!<\/span>\r\n    <span class=\"rgb-marquee\">\u2605 LIQUIDITY BURNED \u2605<\/span>\r\n    \r\n    <!-- DUPLIKASI UNTUK EFEK LOOP INFINITE SMOOTH -->\r\n    <span>LIFE IS BOXY, JUST TAKE IT EASY!<\/span>\r\n    <span class=\"rgb-marquee\">\u2605 CUBEMAN \u2605<\/span>\r\n    <span>WELCOME TO CUBEMAN'S WORLD!<\/span>\r\n    <span class=\"rgb-marquee\">\u2605 0% TAX \u2605<\/span>\r\n    <span>PULL UP A CHAIR AND CHILL WITH US!<\/span>\r\n    <span class=\"rgb-marquee\">\u2605 LIQUIDITY BURNED \u2605<\/span>\r\n\r\n  <\/div>\r\n<\/div>\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-d29f87e e-flex e-con-boxed e-con e-parent\" data-id=\"d29f87e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/cubeman.lol\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/HERO-CUBEMAN2.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\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-be43aa9 e-con-full e-flex e-con e-child\" data-id=\"be43aa9\" data-element_type=\"container\" id=\"tokenomics\">\n\t\t\t\t<div class=\"elementor-element elementor-element-664d362 elementor-widget elementor-widget-html\" data-id=\"664d362\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 (Judul) & Pixelify Sans (Deskripsi) -->\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=Jersey+25&family=Pixelify+Sans:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Pembagian Tema Font *\/\r\n  .tokenomics-section h2, .tokenomics-section .font-title-3d { \r\n    font-family: 'Jersey 25', sans-serif !important; \r\n  }\r\n  .tokenomics-section p, .tokenomics-section span, .tokenomics-section div { \r\n    font-family: 'Pixelify Sans', sans-serif !important; \r\n  }\r\n\r\n  \/* Efek Bayangan Teks Solid Khas Roblox 3D *\/\r\n  .text-shadow-solid-dark {\r\n    text-shadow: \r\n      2.5px 2.5px 0px #1E2022,\r\n      -1px -1px 0px #1E2022,  \r\n       1px -1px 0px #1E2022,\r\n      -1px  1px 0px #1E2022,\r\n       1px  1px 0px #1E2022;\r\n  }\r\n\r\n  \/* Animasi Warna Gonta-Ganti Terus Menerus (RGB Loop) *\/\r\n  @keyframes RGBFlowTokenomics {\r\n    0% { color: #FFDE4D; }\r\n    25% { color: #2B7AFA; }\r\n    50% { color: #EF4444; }\r\n    75% { color: #10B981; }\r\n    100% { color: #FFDE4D; }\r\n  }\r\n  .rgb-text-tokenomics {\r\n    animation: RGBFlowTokenomics 6s infinite linear;\r\n  }\r\n\r\n  \/* Desain Card Balok Ramping Varian Biru *\/\r\n  .roblox-token-card-blue {\r\n    background-color: #2B7AFA;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;\r\n  }\r\n  .roblox-token-card-blue:hover {\r\n    transform: scale(1.03) translateY(-3px);\r\n    box-shadow: 0px 7px 0px #FFDE4D;\r\n  }\r\n\r\n  \/* Desain Card Balok Ramping Varian Kuning *\/\r\n  .roblox-token-card-yellow {\r\n    background-color: #FFDE4D;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;\r\n  }\r\n  .roblox-token-card-yellow:hover {\r\n    transform: scale(1.03) translateY(-3px);\r\n    box-shadow: 0px 7px 0px #2B7AFA;\r\n  }\r\n<\/style>\r\n\r\n<!-- SECTION TOKENOMICS (Rapi, Responsif & Mengikuti BG WordPress) -->\r\n<section id=\"tokenomics\" class=\"tokenomics-section w-full bg-transparent py-6 px-4 antialiased\">\r\n  <div class=\"max-w-4xl mx-auto\">\r\n    \r\n    <!-- Header Judul Gaya Hero -->\r\n    <div class=\"text-center mb-8\">\r\n      <h2 class=\"text-5xl sm:text-7xl leading-tight uppercase tracking-wider text-shadow-solid-dark mb-2 select-none\">\r\n        <span class=\"text-white\">Cubeman<\/span> \r\n        <span class=\"rgb-text-tokenomics\">Tokenomics<\/span>\r\n      <\/h2>\r\n      <p class=\"text-base sm:text-lg text-white text-shadow-solid-dark max-w-md mx-auto leading-normal tracking-wide font-medium\">\r\n        We believe in a clean and fair system right from the start. No secrets, no weird gimmicks.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- GRID LAYOUT UTAMA (4 Kolom Rapi di Desktop, 2 Kolom di Tablet, 1 Kolom di HP) -->\r\n    <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-center\">\r\n      \r\n      <!-- Card 1: Total Supply (Tema Kuning) -->\r\n      <div class=\"roblox-token-card-yellow p-4 flex flex-col justify-center items-center\">\r\n        <span class=\"text-xs font-bold text-cubeDark\/70 uppercase tracking-widest mb-1\">TOTAL SUPPLY<\/span>\r\n        <span class=\"font-title-3d text-3xl sm:text-4xl text-cubeDark tracking-wide leading-none my-1\">\r\n          1,000,000,000\r\n        <\/span>\r\n        <span class=\"text-xs font-bold text-white text-shadow-solid-dark bg-cubeBlue px-2 py-0.5 border-2 border-cubeDark rounded-md mt-2\">\r\n          $Cubeman\r\n        <\/span>\r\n      <\/div>\r\n      \r\n      <!-- Card 2: Tax (Tema Biru) -->\r\n      <div class=\"roblox-token-card-blue p-4 flex flex-col justify-center items-center\">\r\n        <span class=\"text-xs font-bold text-white\/80 uppercase tracking-widest mb-1 text-shadow-solid-dark\">TRANSACTION TAX<\/span>\r\n        <span class=\"font-title-3d text-5xl text-cubeYellow tracking-wide leading-none my-1 text-shadow-solid-dark\">\r\n          0%\r\n        <\/span>\r\n        <span class=\"text-xs font-bold text-white text-shadow-solid-dark mt-2\">\r\n          Zero Complications!\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- Card 3: Liquidity Status (Tema Kuning) -->\r\n      <div class=\"roblox-token-card-yellow p-4 flex flex-col justify-center items-center\">\r\n        <span class=\"text-xs font-bold text-cubeDark\/70 uppercase tracking-widest mb-1\">LIQUIDITY STATUS<\/span>\r\n        <span class=\"font-title-3d text-3xl text-cubeDark tracking-wide leading-tight uppercase my-1\">\r\n          BURNED & LOCKED\r\n        <\/span>\r\n        <span class=\"text-xs font-bold text-cubeDark opacity-80 mt-1\">\r\n          100% Safe Forever\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <!-- Card 4: Ownership (Tema Biru) -->\r\n      <div class=\"roblox-token-card-blue p-4 flex flex-col justify-center items-center\">\r\n        <span class=\"text-xs font-bold text-white\/80 uppercase tracking-widest mb-1 text-shadow-solid-dark\">OWNERSHIP<\/span>\r\n        <span class=\"font-title-3d text-3xl text-cubeYellow tracking-wide leading-tight uppercase my-1 text-shadow-solid-dark\">\r\n          FULLY RENOUNCED\r\n        <\/span>\r\n        <span class=\"text-xs font-bold text-white text-shadow-solid-dark mt-1\">\r\n          Belongs To Public\r\n        <\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\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-3f8f195 e-flex e-con-boxed e-con e-parent\" data-id=\"3f8f195\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-71850bd e-con-full e-flex e-con e-child\" data-id=\"71850bd\" data-element_type=\"container\" id=\"gallery\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ffb528 elementor-widget elementor-widget-html\" data-id=\"9ffb528\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 (Judul) & Pixelify Sans (Keterangan) -->\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=Jersey+25&family=Pixelify+Sans:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Font Awesome untuk Ikon Tutup -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Pembagian Tema Font *\/\r\n  .gallery-theater h2 { \r\n    font-family: 'Jersey 25', sans-serif !important; \r\n  }\r\n  .gallery-theater p, .gallery-theater span, .roblox-btn-close { \r\n    font-family: 'Pixelify Sans', sans-serif !important; \r\n  }\r\n\r\n  \/* Efek Bayangan Teks Solid Khas Roblox 3D *\/\r\n  .text-shadow-solid-dark {\r\n    text-shadow: \r\n      2.5px 2.5px 0px #1E2022,\r\n      -1px -1px 0px #1E2022,  \r\n       1px -1px 0px #1E2022,\r\n      -1px  1px 0px #1E2022,\r\n       1px  1px 0px #1E2022;\r\n  }\r\n\r\n  \/* Animasi Warna Gonta-Ganti Terus Menerus (RGB Loop) *\/\r\n  @keyframes RGBFlowGallery {\r\n    0% { color: #FFDE4D; }\r\n    25% { color: #2B7AFA; }\r\n    50% { color: #EF4444; }\r\n    75% { color: #10B981; }\r\n    100% { color: #FFDE4D; }\r\n  }\r\n  .rgb-text-gallery {\r\n    animation: RGBFlowGallery 6s infinite linear;\r\n  }\r\n\r\n  \/* Desain Frame Card Balok Vertikal (Rasio 9:16) *\/\r\n  .video-cube-card {\r\n    background-color: #2B7AFA;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n    padding: 6px;\r\n    cursor: pointer;\r\n    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;\r\n  }\r\n\r\n  \/* Efek Hover Balok Roblox Meloncat *\/\r\n  .video-cube-card:hover {\r\n    transform: scale(1.04) translateY(-4px);\r\n    box-shadow: 0px 8px 0px #FFDE4D;\r\n    z-index: 20;\r\n  }\r\n\r\n  \/* Tombol Tutup Pop-up 3D *\/\r\n  .roblox-btn-close {\r\n    background-color: #EF4444;\r\n    color: white;\r\n    border: 2px solid #1E2022;\r\n    box-shadow: 0px 3px 0px #1E2022;\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n  .roblox-btn-close:hover {\r\n    transform: translateY(1px);\r\n    box-shadow: 0px 2px 0px #1E2022;\r\n  }\r\n  .roblox-btn-close:active {\r\n    transform: translateY(3px);\r\n    box-shadow: 0px 0px 0px #1E2022;\r\n  }\r\n<\/style>\r\n\r\n<!-- SECTION GALLERY (Mini Theater Grid 4-4-4 - Vertikal\/Portrait) -->\r\n<section id=\"gallery\" class=\"gallery-theater w-full bg-transparent py-6 px-4 antialiased\">\r\n  <div class=\"max-w-4xl mx-auto\">\r\n    \r\n    <!-- Header Judul Gaya Hero -->\r\n    <div class=\"text-center mb-8\">\r\n      <h2 class=\"text-5xl sm:text-7xl leading-tight uppercase tracking-wider text-shadow-solid-dark mb-2 select-none\">\r\n        <span class=\"text-white\">Cubeman's<\/span> \r\n        <span class=\"rgb-text-gallery\">Mini Theater<\/span>\r\n      <\/h2>\r\n      <p class=\"text-base sm:text-lg text-white text-shadow-solid-dark max-w-md mx-auto leading-normal tracking-wide font-medium\">\r\n        Take a peek into Cubeman's daily life! Click any vertical clip to play full screen.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- MAIN GRID 4-4-4 SYSTEM (Rasio Vertikal) -->\r\n    <div class=\"flex flex-col gap-6\">\r\n      \r\n      <!-- ROW 1: ATAS (4 Video Vertikal) -->\r\n      <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-1.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-1.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-2.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-2.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-3.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-3.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-4.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-4.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ROW 2: TENGAH (4 Video Vertikal) -->\r\n      <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-5.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-5.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-6.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-6.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-7.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-7.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-8.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-8.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- ROW 3: BAWAH (4 Video Vertikal) -->\r\n      <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-9.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-9.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-10.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-10.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-11.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-11.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n        <div class=\"video-cube-card w-full aspect-[9\/16] overflow-hidden\" data-video-src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-12.mp4\">\r\n          <video src=\"https:\/\/cubeman.lol\/wp-content\/uploads\/2026\/07\/CUBEMAN-12.mp4\" loop muted playsinline class=\"w-full h-full object-cover rounded-lg pointer-events-none\"><\/video>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- LIGHTBOX POP-UP FULLSCREEN OVERLAY -->\r\n<div id=\"videoLightbox\" class=\"fixed inset-0 bg-black\/80 backdrop-blur-sm z-[9999] hidden flex-col items-center justify-center p-4\">\r\n  <div class=\"relative w-full max-w-[360px] aspect-[9\/16] bg-cubeDark border-4 border-cubeDark rounded-2xl p-1 shadow-[0_12px_0_rgba(0,0,0,0.3)] flex flex-col justify-between\">\r\n    <!-- Top Action Area -->\r\n    <div class=\"absolute -top-14 right-2 z-10\">\r\n      <button onclick=\"closeVideoLightbox()\" class=\"roblox-btn-close text-sm font-bold px-4 py-1 rounded-lg uppercase flex items-center gap-1\">\r\n        <i class=\"fa-solid fa-xmark\"><\/i> Close\r\n      <\/button>\r\n    <\/div>\r\n    <!-- Video Monitor Render -->\r\n    <div class=\"w-full h-full overflow-hidden rounded-xl bg-black\">\r\n      <video id=\"lightboxVideo\" loop controls playsinline class=\"w-full h-full object-contain\"><\/video>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- SCRIPT UTAMA: Hover Preview & Fullscreen Click Logic -->\r\n<script>\r\n  const cards = document.querySelectorAll('.video-cube-card');\r\n  const lightbox = document.getElementById('videoLightbox');\r\n  const lightboxVideo = document.getElementById('lightboxVideo');\r\n\r\n  cards.forEach(card => {\r\n    const video = card.querySelector('video');\r\n\r\n    \/\/ 1. Logika Hover Preview (Muted & Loop)\r\n    card.addEventListener('mouseenter', () => {\r\n      video.play().catch(err => console.log(\"Hover preview blocked:\", err));\r\n    });\r\n\r\n    card.addEventListener('mouseleave', () => {\r\n      video.pause();\r\n      video.currentTime = 0;\r\n    });\r\n\r\n    \/\/ 2. Logika Klik untuk Membuka Fullscreen Lightbox\r\n    card.addEventListener('click', () => {\r\n      const videoSrc = card.getAttribute('data-video-src');\r\n      \r\n      \/\/ Hentikan sementara preview di card\r\n      video.pause();\r\n      \r\n      \/\/ Setup dan jalankan video di dalam Lightbox pop-up\r\n      lightboxVideo.src = videoSrc;\r\n      lightboxVideo.muted = false; \/\/ Aktifkan suara penuh\r\n      lightbox.classList.remove('hidden');\r\n      lightbox.classList.add('flex');\r\n      \r\n      lightboxVideo.play().catch(err => console.log(\"Lightbox playback blocked:\", err));\r\n    });\r\n  });\r\n\r\n  \/\/ Fungsi untuk menutup overlay popup\r\n  function closeVideoLightbox() {\r\n    lightboxVideo.pause();\r\n    lightboxVideo.src = \"\";\r\n    lightbox.classList.remove('flex');\r\n    lightbox.classList.add('hidden');\r\n  }\r\n\r\n  \/\/ Tutup popup otomatis jika area luar transparan diklik\r\n  lightbox.addEventListener('click', (e) => {\r\n    if (e.target === lightbox) {\r\n      closeVideoLightbox();\r\n    }\r\n  });\r\n<\/script>\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-752bbc9 e-flex e-con-boxed e-con e-parent\" data-id=\"752bbc9\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/cubeman.lol\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/HERO-CUBEMAN3.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\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-fb80d89 e-con-full e-flex e-con e-child\" data-id=\"fb80d89\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63d5558 elementor-widget elementor-widget-html\" data-id=\"63d5558\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts: Jersey 25 (Judul) & Pixelify Sans (Deskripsi\/Tombol) -->\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=Jersey+25&family=Pixelify+Sans:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- Import Tailwind CSS untuk Styling Responsif -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<script>\r\n  tailwind.config = {\r\n    theme: {\r\n      extend: {\r\n        colors: {\r\n          cubeYellow: '#FFDE4D',\r\n          cubeBlue: '#2B7AFA',\r\n          cubeDark: '#1E2022',\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  \/* Kunci Tema Font *\/\r\n  .community-section h1 { \r\n    font-family: 'Jersey 25', sans-serif !important; \r\n  }\r\n  .community-section p, .community-section a, .community-section span, .community-section div { \r\n    font-family: 'Pixelify Sans', sans-serif !important; \r\n  }\r\n\r\n  \/* Efek Bayangan Teks Solid Khas Roblox 3D *\/\r\n  .text-shadow-solid-dark {\r\n    text-shadow: \r\n      3px 3px 0px #1E2022,\r\n      -1px -1px 0px #1E2022,  \r\n       1px -1px 0px #1E2022,\r\n      -1px  1px 0px #1E2022,\r\n       1px  1px 0px #1E2022;\r\n  }\r\n\r\n  \/* Animasi Warna Gonta-Ganti Terus Menerus (RGB Loop) *\/\r\n  @keyframes RGBFlowCommunity {\r\n    0% { color: #FFDE4D; }\r\n    25% { color: #2B7AFA; }\r\n    50% { color: #EF4444; }\r\n    75% { color: #10B981; }\r\n    100% { color: #FFDE4D; }\r\n  }\r\n  .rgb-text-community {\r\n    animation: RGBFlowCommunity 6s infinite linear;\r\n  }\r\n\r\n  \/* Tombol 3D Biru Mencolok (Telegram) *\/\r\n  .roblox-btn-social-blue {\r\n    background-color: #2B7AFA;\r\n    color: white;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n  .roblox-btn-social-blue:hover {\r\n    transform: translateY(1px);\r\n    box-shadow: 0px 3px 0px #1E2022;\r\n    background-color: #1A65DF;\r\n  }\r\n  .roblox-btn-social-blue:active {\r\n    transform: translateY(4px);\r\n    box-shadow: 0px 0px 0px #1E2022;\r\n  }\r\n\r\n  \/* Tombol 3D Hitam Mencolok (X \/ Twitter) *\/\r\n  .roblox-btn-social-dark {\r\n    background-color: #1E2022;\r\n    color: white;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #000000;\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n  .roblox-btn-social-dark:hover {\r\n    transform: translateY(1px);\r\n    box-shadow: 0px 3px 0px #000000;\r\n    background-color: #111314;\r\n  }\r\n  .roblox-btn-social-dark:active {\r\n    transform: translateY(4px);\r\n    box-shadow: 0px 0px 0px #000000;\r\n  }\r\n\r\n  \/* Tombol 3D Kuning Mencolok (DexChart) *\/\r\n  .roblox-btn-social-yellow {\r\n    background-color: #FFDE4D;\r\n    color: #1E2022;\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n  .roblox-btn-social-yellow:hover {\r\n    transform: translateY(1px);\r\n    box-shadow: 0px 3px 0px #1E2022;\r\n  }\r\n  .roblox-btn-social-yellow:active {\r\n    transform: translateY(4px);\r\n    box-shadow: 0px 0px 0px #1E2022;\r\n  }\r\n\r\n  \/* Footer Panel *\/\r\n  .roblox-footer-panel {\r\n    background: rgba(255, 255, 255, 0.96);\r\n    border: 3px solid #1E2022;\r\n    box-shadow: 0px 4px 0px #1E2022;\r\n    border-radius: 12px;\r\n  }\r\n<\/style>\r\n\r\n<!-- SECTION COMMUNITY (Tanpa Card & Transparan) -->\r\n<section id=\"community\" class=\"community-section w-full bg-transparent py-6 px-4 antialiased text-center\">\r\n  <div class=\"max-w-2xl mx-auto flex flex-col items-center justify-center gap-3\">\r\n    \r\n    <!-- Headline Utama (Jersey 25) -->\r\n    <h1 class=\"text-4xl sm:text-6xl font-bold uppercase tracking-wider text-shadow-solid-dark leading-tight select-none\">\r\n      <span class=\"text-white\">Cubeman's Room Is<\/span> <br class=\"sm:hidden\">\r\n      <span class=\"rgb-text-community\">Always Open!<\/span>\r\n    <\/h1>\r\n    \r\n    <!-- Deskripsi Singkat (Pixelify Sans) -->\r\n    <p class=\"text-base sm:text-lg text-white text-shadow-solid-dark max-w-lg mx-auto leading-normal tracking-wide font-medium\">\r\n      Don\u2019t just stand there looking through the window! Pull up a chair, put on your headset, and become a part of the Cubeman family right now.\r\n    <\/p>\r\n\r\n    <!-- Barisan Tombol Sosial Media Ramping Menggunakan Ikon SVG Inline -->\r\n    <div class=\"w-full max-w-md grid grid-cols-1 sm:grid-cols-3 gap-4 mt-3\">\r\n      \r\n      <!-- Telegram Button -->\r\n      <a href=\"LINK-KAMU\" target=\"_blank\" class=\"roblox-btn-social-blue py-2.5 rounded-xl flex items-center justify-center gap-2 text-sm font-bold uppercase tracking-wider\">\r\n        <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-1-.65-.35-1 .22-1.62.15-.15 2.7-2.46 2.75-2.67.01-.03.01-.14-.06-.2-.07-.06-.17-.04-.25-.02-.11.02-1.83 1.16-5.16 3.42-.49.34-.93.5-1.33.49-.44-.01-1.29-.25-1.92-.45-.77-.25-1.39-.39-1.34-.83.03-.23.35-.46.97-.71 3.82-1.66 6.37-2.75 7.64-3.28 3.64-1.52 4.4-1.78 4.89-1.79.11 0 .35.03.5.16.13.1.17.25.18.36-.01.07 0 .21-.02.27z\"\/>\r\n        <\/svg>\r\n        Telegram\r\n      <\/a>\r\n      \r\n      <!-- Twitter \/ X Button -->\r\n      <a href=\"LINK-KAMU\" target=\"_blank\" class=\"roblox-btn-social-dark py-2.5 rounded-xl flex items-center justify-center gap-2 text-sm font-bold uppercase tracking-wider\">\r\n        <svg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/>\r\n        <\/svg>\r\n        Twitter\r\n      <\/a>\r\n      \r\n      <!-- Dex Chart Button -->\r\n      <a href=\"LINK-KAMU\" target=\"_blank\" class=\"roblox-btn-social-yellow py-2.5 rounded-xl flex items-center justify-center gap-2 text-sm font-bold uppercase tracking-wider\">\r\n        <svg class=\"w-5 h-5 fill-current\" viewBox=\"0 0 24 24\">\r\n          <path d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6zM19 18H5V5h7V3H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7z\"\/>\r\n        <\/svg>\r\n        DexChart\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER SECTION -->\r\n<footer class=\"community-section w-full bg-transparent p-3 antialiased text-center mt-6\">\r\n  <div class=\"max-w-4xl mx-auto\">\r\n    <div class=\"roblox-footer-panel px-4 py-3 flex flex-col sm:flex-row justify-between items-center gap-2 text-xs sm:text-sm text-cubeDark font-medium\">\r\n      <p class=\"tracking-wide\">\r\n        \u00a9 2026 <span class=\"font-bold text-cubeBlue\">Cubeman Project<\/span>. All Rights Reserved.\r\n      <\/p>\r\n      <p class=\"opacity-70 tracking-wide\">\r\n        Built with laughs by the Community, for the Community.\r\n      <\/p>\r\n    <\/div>\r\n  <\/div>\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>CUBEMAN Home About Tokenomics Gallery Community Buy $Cubeman Life is Boxy, But Just Take It Easy! Welcome to Cubeman&#8217;s world! Just a chill yellow-and-blue guy enjoying games, chocolate, and simple vibes. We&#8217;re here to share laughs and grow together as a community. \u25bc OFFICIAL CONTRACT ADDRESS \u25bc Copy Who is Cubeman? Ever feel like the [&hellip;]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cubeman.lol\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cubeman.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cubeman.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cubeman.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cubeman.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":7,"href":"https:\/\/cubeman.lol\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/cubeman.lol\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/cubeman.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}