{"id":8,"date":"2026-07-23T21:36:01","date_gmt":"2026-07-23T21:36:01","guid":{"rendered":"https:\/\/marshmellow.lol\/?page_id=8"},"modified":"2026-07-25T02:18:05","modified_gmt":"2026-07-25T02:18:05","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/marshmellow.lol\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Mellow ($Mellow)<\/title>\r\n <!-- Google Fonts -->\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=Chewy&family=Chilanka&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* ==================== RESET GLOBAL ==================== *\/\r\n html, body {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n width: 100% !important;\r\n overflow-x: hidden !important;\r\n font-family: 'Chilanka', cursive, sans-serif;\r\n background-color: #0d0d0d;\r\n color: #ffffff;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n h1, h2, h3, h4, .btn, .nav-logo, .ticker-item, .card-caption, .modal-title, .tok-label {\r\n font-family: 'Chewy', cursive, sans-serif;\r\n letter-spacing: 1px;\r\n }\r\n\r\n \/* ==================== NAVBAR ==================== *\/\r\n .navbar {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 15px 5%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n z-index: 100;\r\n background: rgba(0, 0, 0, 0.4);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 3px solid #000;\r\n }\r\n\r\n .nav-logo {\r\n font-size: 1.8rem;\r\n color: #FFF;\r\n text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;\r\n text-decoration: none;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 12px;\r\n align-items: center;\r\n }\r\n\r\n \/* ==================== BUTTONS & HOVER BOUNCE ==================== *\/\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px 22px;\r\n font-size: 1.2rem;\r\n text-decoration: none;\r\n color: #000;\r\n background: #FFD166;\r\n border: 3px solid #000;\r\n border-radius: 16px;\r\n box-shadow: 4px 4px 0px #000;\r\n cursor: pointer;\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\r\n .btn:hover {\r\n transform: scale(1.08) translateY(-4px) rotate(-1deg);\r\n box-shadow: 6px 8px 0px #000;\r\n }\r\n\r\n .btn:active {\r\n transform: scale(0.95) translateY(2px);\r\n box-shadow: 2px 2px 0px #000;\r\n }\r\n\r\n .btn-icon {\r\n padding: 10px;\r\n width: 46px;\r\n height: 46px;\r\n border-radius: 14px;\r\n }\r\n\r\n .btn-icon svg {\r\n width: 22px;\r\n height: 22px;\r\n fill: #ffffff;\r\n }\r\n\r\n .btn-primary { background: #06D6A0; color: #000; }\r\n .btn-secondary { background: #EF476F; color: #fff; text-shadow: 1px 1px 0 #000; }\r\n .btn-x { background: #000000; border-color: #000; }\r\n .btn-tg { background: #0088cc; }\r\n\r\n \/* ==================== FORCE FULL-WIDTH BREAKOUT SECTIONS ==================== *\/\r\n .hero-section, .marquee-container, .gallery-section {\r\n position: relative;\r\n left: 50% !important;\r\n right: 50% !important;\r\n margin-left: -50vw !important;\r\n margin-right: -50vw !important;\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n }\r\n\r\n \/* ==================== HERO SECTION (RATA KIRI) ==================== *\/\r\n .hero-section {\r\n min-height: 100vh;\r\n padding: 120px 6% 60px 6%;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n overflow: hidden;\r\n }\r\n\r\n .video-bg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100vw !important;\r\n height: 100% !important;\r\n object-fit: cover !important;\r\n z-index: 1;\r\n }\r\n\r\n .overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);\r\n z-index: 2;\r\n }\r\n\r\n .hero-container {\r\n position: relative;\r\n z-index: 3;\r\n width: 100%;\r\n max-width: 750px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .hero-content {\r\n width: 100%;\r\n text-align: left;\r\n animation: bounceIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .hero-title {\r\n font-size: 4.2rem;\r\n line-height: 1.1;\r\n color: #FFFFFF;\r\n text-shadow: 5px 5px 0px #000;\r\n margin-bottom: 15px;\r\n text-align: left;\r\n }\r\n\r\n .hero-tagline {\r\n font-size: 1.8rem;\r\n color: #FFD166;\r\n text-shadow: 2px 2px 0px #000;\r\n margin-bottom: 18px;\r\n display: block;\r\n text-align: left;\r\n }\r\n\r\n .hero-desc {\r\n font-size: 1.25rem;\r\n line-height: 1.6;\r\n margin-bottom: 25px;\r\n background: rgba(0, 0, 0, 0.65);\r\n padding: 18px;\r\n border-radius: 16px;\r\n border: 3px solid #000;\r\n box-shadow: 5px 5px 0 #000;\r\n backdrop-filter: blur(5px);\r\n text-align: left;\r\n }\r\n\r\n .cta-group {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n margin-bottom: 22px;\r\n justify-content: flex-start;\r\n }\r\n\r\n .ca-container {\r\n background: #FFF;\r\n color: #000;\r\n padding: 12px 18px;\r\n border-radius: 16px;\r\n border: 3px solid #000;\r\n box-shadow: 5px 5px 0px #000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n width: 100%;\r\n max-width: 600px;\r\n }\r\n\r\n \/* FONT CA DISAMAKAN DENGAN DESKRIPSI (CHILANKA) *\/\r\n .ca-text {\r\n font-family: 'Chilanka', cursive, sans-serif;\r\n font-weight: bold;\r\n font-size: 1.1rem;\r\n word-break: break-all;\r\n }\r\n\r\n .btn-copy {\r\n padding: 8px 16px;\r\n font-size: 0.95rem;\r\n white-space: nowrap;\r\n background: #118AB2;\r\n color: #fff;\r\n }\r\n\r\n \/* ==================== RUNNING TEXT (MARQUEE) ==================== *\/\r\n .marquee-container {\r\n background: #FFD166;\r\n border-top: 4px solid #000;\r\n border-bottom: 4px solid #000;\r\n padding: 14px 0;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n z-index: 10;\r\n }\r\n\r\n .marquee-content {\r\n display: inline-block;\r\n animation: marquee 16s linear infinite;\r\n }\r\n\r\n .ticker-item {\r\n display: inline-block;\r\n font-size: 1.8rem;\r\n color: #000;\r\n margin: 0 25px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* ==================== GALLERY SECTION (CENTERED 2x2) ==================== *\/\r\n .gallery-section {\r\n min-height: 100vh;\r\n padding: 90px 5% 60px 5%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n overflow: hidden;\r\n }\r\n\r\n .gallery-container {\r\n position: relative;\r\n z-index: 3;\r\n width: 100%;\r\n max-width: 950px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .gallery-header-box {\r\n background: #EF476F;\r\n border: 4px solid #000;\r\n border-radius: 20px;\r\n padding: 10px 30px;\r\n box-shadow: 6px 6px 0px #000;\r\n margin-bottom: 40px;\r\n transform: rotate(-1deg);\r\n text-align: center;\r\n }\r\n\r\n .gallery-title {\r\n font-size: 3.2rem;\r\n color: #FFF;\r\n text-shadow: 4px 4px 0 #000;\r\n }\r\n\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n width: 100%;\r\n justify-items: center;\r\n align-items: center;\r\n }\r\n\r\n .card {\r\n background: rgba(255, 255, 255, 0.95);\r\n border: 4px solid #000;\r\n border-radius: 24px;\r\n box-shadow: 8px 8px 0px #000;\r\n padding: 20px;\r\n width: 100%;\r\n max-width: 420px;\r\n text-align: center;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, background 0.3s ease;\r\n }\r\n\r\n .card::before {\r\n content: \"CLICK TO VIEW\";\r\n position: absolute;\r\n top: 10px;\r\n right: 15px;\r\n font-family: 'Chewy', cursive;\r\n font-size: 0.85rem;\r\n background: #FFD166;\r\n color: #000;\r\n padding: 3px 8px;\r\n border: 2px solid #000;\r\n border-radius: 8px;\r\n box-shadow: 2px 2px 0 #000;\r\n }\r\n\r\n .card:hover {\r\n transform: scale(1.05) translateY(-5px) rotate(1deg);\r\n box-shadow: 12px 12px 0px #06D6A0;\r\n background: #FFFFFF;\r\n }\r\n\r\n .card img {\r\n width: 100%;\r\n height: auto;\r\n max-height: 200px;\r\n object-fit: contain;\r\n border-radius: 16px;\r\n margin-top: 10px;\r\n margin-bottom: 12px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .card:hover img {\r\n transform: scale(1.08);\r\n }\r\n\r\n .card-caption {\r\n font-size: 2rem;\r\n color: #000;\r\n background: #FFD166;\r\n border: 3px solid #000;\r\n border-radius: 12px;\r\n padding: 5px 0;\r\n box-shadow: 3px 3px 0 #000;\r\n }\r\n\r\n \/* ==================== POPUP MODAL ==================== *\/\r\n .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(0, 0, 0, 0.88);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n padding: 15px;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .modal-content {\r\n background: #FFF;\r\n color: #000;\r\n border: 5px solid #000;\r\n border-radius: 24px;\r\n box-shadow: 10px 10px 0px #EF476F;\r\n padding: 30px;\r\n max-width: 720px;\r\n width: 100%;\r\n max-height: 88vh;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n text-align: left;\r\n position: relative;\r\n transform: scale(0.5);\r\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .modal-overlay.active .modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .modal-img {\r\n display: block;\r\n margin: 0 auto 15px auto;\r\n max-width: 100%;\r\n max-height: 180px;\r\n object-fit: contain;\r\n }\r\n\r\n .modal-title {\r\n font-size: 2.8rem;\r\n margin-bottom: 15px;\r\n color: #000;\r\n text-align: center;\r\n }\r\n\r\n .modal-body {\r\n font-size: 1.15rem;\r\n line-height: 1.6;\r\n color: #222;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n }\r\n\r\n .modal-body h4 {\r\n font-size: 1.5rem;\r\n margin-top: 18px;\r\n margin-bottom: 8px;\r\n color: #118AB2;\r\n }\r\n\r\n .modal-body ul {\r\n list-style: none;\r\n padding-left: 0;\r\n }\r\n\r\n .modal-body ul li {\r\n margin-bottom: 10px;\r\n position: relative;\r\n padding-left: 20px;\r\n }\r\n\r\n .modal-body ul li::before {\r\n content: \"\u2022\";\r\n position: absolute;\r\n left: 0;\r\n font-weight: bold;\r\n font-size: 1.5rem;\r\n color: #EF476F;\r\n line-height: 1;\r\n }\r\n\r\n \/* ==================== TOKENOMICS CARDS ==================== *\/\r\n .tokenomics-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 15px;\r\n margin-top: 15px;\r\n }\r\n\r\n .tok-card {\r\n background: #F8F9FA;\r\n border: 3px solid #000;\r\n border-radius: 16px;\r\n padding: 15px;\r\n box-shadow: 4px 4px 0px #000;\r\n transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background 0.2s ease;\r\n }\r\n\r\n .tok-card:hover {\r\n transform: scale(1.04) translateY(-3px);\r\n box-shadow: 6px 6px 0px #06D6A0;\r\n background: #FFF;\r\n }\r\n\r\n .tok-label {\r\n font-size: 1.2rem;\r\n color: #EF476F;\r\n margin-bottom: 4px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* FONT NILAI CA TOKENOMICS DISAMAKAN DENGAN DESKRIPSI (CHILANKA) *\/\r\n .tok-value {\r\n font-family: 'Chilanka', cursive, sans-serif;\r\n font-size: 1.15rem;\r\n font-weight: bold;\r\n color: #000;\r\n word-break: break-all;\r\n }\r\n\r\n \/* ==================== POPUP COMMUNITY LINKS & COLORS ==================== *\/\r\n .modal-links {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n margin-top: 18px;\r\n }\r\n\r\n .modal-links .btn {\r\n width: 100%;\r\n padding: 14px 20px;\r\n font-size: 1.3rem;\r\n text-shadow: 2px 2px 0px #000;\r\n color: #FFFFFF !important; \/* Font Putih Terang & Kontras *\/\r\n }\r\n\r\n \/* WARNA MASING-MASING TOMBOL POP-UP COMMUNITY *\/\r\n .btn-pop-tg { background: #0088cc !important; }\r\n .btn-pop-x { background: #000000 !important; }\r\n .btn-pop-discord { background: #5865F2 !important; }\r\n .btn-pop-chart { background: #06D6A0 !important; }\r\n\r\n .close-btn {\r\n position: absolute;\r\n top: -15px;\r\n right: -15px;\r\n background: #EF476F;\r\n color: #FFF;\r\n border: 3px solid #000;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n font-size: 1.6rem;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 3px 3px 0 #000;\r\n transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .close-btn:hover {\r\n transform: scale(1.2) rotate(90deg);\r\n }\r\n\r\n .footer-text {\r\n position: relative;\r\n z-index: 3;\r\n margin-top: 40px;\r\n font-size: 1.1rem;\r\n color: #FFF;\r\n text-shadow: 2px 2px 0 #000;\r\n text-align: center;\r\n }\r\n\r\n \/* ==================== ANIMATIONS ==================== *\/\r\n @keyframes marquee {\r\n 0% { transform: translateX(0%); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n @keyframes bounceIn {\r\n 0% { opacity: 0; transform: scale(0.3) translateY(100px); }\r\n 50% { opacity: 1; transform: scale(1.05) translateY(-10px); }\r\n 70% { transform: scale(0.9) translateY(5px); }\r\n 100% { transform: scale(1) translateY(0); }\r\n }\r\n\r\n \/* ==================== RESPONSIVE MEDIA QUERIES ==================== *\/\r\n @media (max-width: 768px) {\r\n .hero-section { padding-top: 100px; padding-left: 5%; padding-right: 5%; }\r\n .hero-title { font-size: 3rem; }\r\n .hero-tagline { font-size: 1.5rem; }\r\n .hero-desc { font-size: 1.05rem; }\r\n .gallery-title { font-size: 2.2rem; }\r\n .gallery-header-box { padding: 8px 20px; margin-bottom: 25px; }\r\n\r\n .gallery-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 15px;\r\n }\r\n\r\n .card { padding: 12px; }\r\n .card-caption { font-size: 1.4rem; }\r\n .btn { padding: 8px 16px; font-size: 1rem; }\r\n .navbar { padding: 12px 4%; }\r\n .nav-logo { font-size: 1.4rem; }\r\n .tokenomics-grid { grid-template-columns: 1fr; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-title { font-size: 2.4rem; }\r\n .gallery-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n }\r\n .card img { max-height: 120px; }\r\n .card-caption { font-size: 1.2rem; }\r\n .card::before { font-size: 0.65rem; padding: 2px 5px; right: 8px; top: 8px; }\r\n .ca-container { flex-direction: column; align-items: stretch; text-align: center; }\r\n .btn-copy { width: 100%; }\r\n .modal-content { padding: 20px 15px; }\r\n .modal-title { font-size: 2.2rem; }\r\n .modal-links .btn { font-size: 1.1rem; padding: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- NAVBAR -->\r\n <nav class=\"navbar\">\r\n <a href=\"#\" class=\"nav-logo\">Mellow ($Mellow)<\/a>\r\n <div class=\"nav-links\">\r\n <!-- SVG ICON TWITTER \/ X -->\r\n <a href=\"https:\/\/x.com\/simplemellow\" target=\"_blank\" class=\"btn btn-icon btn-x\" title=\"X (Twitter)\">\r\n <svg viewBox=\"0 0 24 24\"><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\"\/><\/svg>\r\n <\/a>\r\n <!-- SVG ICON TELEGRAM -->\r\n <a href=\"https:\/\/t.me\/simplemellow\" target=\"_blank\" class=\"btn btn-icon btn-tg\" title=\"Telegram\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.22.14.31-.01.07-.01.16-.02.25z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"LINK-KAMU\" target=\"_blank\" class=\"btn btn-primary\">Get $Mellow<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- SECTION 1: HERO SECTION -->\r\n <section class=\"hero-section\">\r\n <video class=\"video-bg\" autoplay loop muted playsinline>\r\n <source src=\"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/HERO-MELLOW.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"overlay\"><\/div>\r\n\r\n <div class=\"hero-container\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title\">Mellow ($Mellow)<\/h1>\r\n <span class=\"hero-tagline\">\"Soft in shape, calm at heart.\"<\/span>\r\n <p class=\"hero-desc\">\r\n Mellow is a simple marshmallow-inspired character with a consistently calm expression. Amid the noise and fast-paced dynamics of the world, Mellow is here to bring a relaxed, peaceful, and pleasant atmosphere.\r\n <\/p>\r\n\r\n <div class=\"cta-group\">\r\n <a href=\"LINK-KAMU\" target=\"_blank\" class=\"btn btn-primary\">Buy $Mellow<\/a>\r\n <a href=\"https:\/\/t.me\/simplemellow\" target=\"_blank\" class=\"btn btn-secondary\">Join Community<\/a>\r\n <\/div>\r\n\r\n <!-- CA Copy Container -->\r\n <div class=\"ca-container\">\r\n <span class=\"ca-text\" id=\"caText\">NULL<\/span>\r\n <button class=\"btn btn-copy\" onclick=\"copyCA()\">Copy CA<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- RUNNING TEXT (MARQUEE SEPARATOR) -->\r\n <div class=\"marquee-container\">\r\n <div class=\"marquee-content\">\r\n <span class=\"ticker-item\">$MELLOW<\/span>\r\n <span class=\"ticker-item\">SOFT IN SHAPE, CALM AT HEART<\/span>\r\n <span class=\"ticker-item\">NO TAX<\/span>\r\n <span class=\"ticker-item\">LIQUIDITY LOCKED<\/span>\r\n <span class=\"ticker-item\">STAY CHILL<\/span>\r\n <!-- Repeat for seamless scroll -->\r\n <span class=\"ticker-item\">$MELLOW<\/span>\r\n <span class=\"ticker-item\">SOFT IN SHAPE, CALM AT HEART<\/span>\r\n <span class=\"ticker-item\">NO TAX<\/span>\r\n <span class=\"ticker-item\">LIQUIDITY LOCKED<\/span>\r\n <span class=\"ticker-item\">STAY CHILL<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SECTION 2: GALLERY \/ FEATURES SECTION -->\r\n <section class=\"gallery-section\">\r\n <video class=\"video-bg\" autoplay loop muted playsinline>\r\n <source src=\"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/HERO-MELLOW1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"overlay\"><\/div>\r\n\r\n <div class=\"gallery-container\">\r\n <div class=\"gallery-header-box\">\r\n <h2 class=\"gallery-title\">EXPLORE MELLOW WORLD<\/h2>\r\n <\/div>\r\n\r\n <!-- 2 ATAS & 2 BAWAH GRID -->\r\n <div class=\"gallery-grid\">\r\n \r\n <!-- Card 1: About -->\r\n <div class=\"card\" onclick=\"openAboutModal()\">\r\n <img decoding=\"async\" src=\"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-ABOUT.png\" alt=\"About Mellow\">\r\n <div class=\"card-caption\">ABOUT<\/div>\r\n <\/div>\r\n\r\n <!-- Card 2: Roadmap -->\r\n <div class=\"card\" onclick=\"openRoadmapModal()\">\r\n <img decoding=\"async\" src=\"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-ROADMAPS.png\" alt=\"Mellow Roadmap\">\r\n <div class=\"card-caption\">ROADMAP<\/div>\r\n <\/div>\r\n\r\n <!-- Card 3: Tokenomics -->\r\n <div class=\"card\" onclick=\"openTokenomicsModal()\">\r\n <img decoding=\"async\" src=\"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-TOKENOMICS.png\" alt=\"Mellow Tokenomics\">\r\n <div class=\"card-caption\">TOKENOMICS<\/div>\r\n <\/div>\r\n\r\n <!-- Card 4: Join Us -->\r\n <div class=\"card\" onclick=\"openCommunityModal()\">\r\n <img decoding=\"async\" src=\"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-JOIN-US.png\" alt=\"Join Mellow\">\r\n <div class=\"card-caption\">COMMUNITY<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"footer-text\">\r\n © 2026 Mellow ($Mellow). All Rights Reserved.\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- POPUP MODAL -->\r\n <div class=\"modal-overlay\" id=\"modalOverlay\" onclick=\"closeModalOnOuter(event)\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal()\">×<\/button>\r\n <img decoding=\"async\" src=\"\" alt=\"Modal Detail\" id=\"modalImg\" class=\"modal-img\">\r\n <h3 id=\"modalTitle\" class=\"modal-title\">Title<\/h3>\r\n <div id=\"modalBody\" class=\"modal-body\">\r\n <!-- Content injected via JS -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- JAVASCRIPT -->\r\n <script>\r\n \/\/ Copy CA Functionality\r\n function copyCA() {\r\n const caText = document.getElementById('caText').innerText;\r\n navigator.clipboard.writeText(caText).then(() => {\r\n const copyBtn = document.querySelector('.btn-copy');\r\n copyBtn.innerText = 'Copied!';\r\n copyBtn.style.background = '#06D6A0';\r\n setTimeout(() => {\r\n copyBtn.innerText = 'Copy CA';\r\n copyBtn.style.background = '#118AB2';\r\n }, 2000);\r\n }).catch(err => {\r\n console.error('Failed to copy: ', err);\r\n });\r\n }\r\n\r\n const modalOverlay = document.getElementById('modalOverlay');\r\n const modalTitle = document.getElementById('modalTitle');\r\n const modalImg = document.getElementById('modalImg');\r\n const modalBody = document.getElementById('modalBody');\r\n\r\n function openAboutModal() {\r\n modalTitle.innerText = \"About Mellow\";\r\n modalImg.src = \"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-ABOUT.png\";\r\n modalBody.innerHTML = `\r\n <h4>Who is Mellow?<\/h4>\r\n <p>Mellow is designed as a symbol of tranquility. When the surroundings become chaotic or overwhelming, Mellow stands grounded with its signature expressionless face\u2014unfazed, yet always there to keep you company.<\/p>\r\n <h4>Characteristics & Traits<\/h4>\r\n <ul>\r\n <li><strong>Simple & Unique:<\/strong> Designed with a clean, minimal aesthetic and bold outlines, making Mellow instantly recognizable and memorable.<\/li>\r\n <li><strong>Signature Expression:<\/strong> A flat face with dot eyes and a straight-line mouth provides a neutral look\u2014making Mellow naturally approachable and highly relatable to everyone.<\/li>\r\n <li><strong>Comforting Presence:<\/strong> Friendly and calm, Mellow serves as the ideal mascot for a welcoming community.<\/li>\r\n <li><strong>Versatile:<\/strong> Mellow effortlessly fits into any setting, whether it's a cozy space, a modern design, or an adventurous storyline.<\/li>\r\n <\/ul>\r\n `;\r\n modalOverlay.classList.add('active');\r\n }\r\n\r\n function openRoadmapModal() {\r\n modalTitle.innerText = \"Roadmap\";\r\n modalImg.src = \"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-ROADMAPS.png\";\r\n modalBody.innerHTML = `\r\n <h4>Phase 1: Initial Steps<\/h4>\r\n <ul>\r\n <li>Character design launch and visual identity setup.<\/li>\r\n <li>Social media creation and community channel launch.<\/li>\r\n <li>Official launch of the $Mellow token.<\/li>\r\n <\/ul>\r\n <h4>Phase 2: Community Expansion<\/h4>\r\n <ul>\r\n <li>Listings on crypto tracking platforms (CoinGecko & CoinMarketCap).<\/li>\r\n <li>Interactive community programs and creative campaigns.<\/li>\r\n <li>Collaborations with local and global creators.<\/li>\r\n <\/ul>\r\n <h4>Phase 3: Ecosystem Growth<\/h4>\r\n <ul>\r\n <li>Exploring centralized exchange (CEX) listings.<\/li>\r\n <li>Development of official Mellow merchandise.<\/li>\r\n <li>Expanding community reach on a global scale.<\/li>\r\n <\/ul>\r\n `;\r\n modalOverlay.classList.add('active');\r\n }\r\n\r\n function openTokenomicsModal() {\r\n modalTitle.innerText = \"Tokenomics\";\r\n modalImg.src = \"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-TOKENOMICS.png\";\r\n modalBody.innerHTML = `\r\n <p>A straightforward and transparent token structure designed for the peace of mind of every community member:<\/p>\r\n \r\n <div class=\"tokenomics-grid\">\r\n <div class=\"tok-card\">\r\n <div class=\"tok-label\">Token Name<\/div>\r\n <div class=\"tok-value\">Mellow<\/div>\r\n <\/div>\r\n <div class=\"tok-card\">\r\n <div class=\"tok-label\">Ticker<\/div>\r\n <div class=\"tok-value\">$Mellow<\/div>\r\n <\/div>\r\n <div class=\"tok-card\">\r\n <div class=\"tok-label\">Transaction Tax<\/div>\r\n <div class=\"tok-value\">0% Buy \/ 0% Sell<\/div>\r\n <\/div>\r\n <div class=\"tok-card\">\r\n <div class=\"tok-label\">Liquidity Status<\/div>\r\n <div class=\"tok-value\">Permanently Locked<\/div>\r\n <\/div>\r\n <div class=\"tok-card\" style=\"grid-column: 1 \/ -1;\">\r\n <div class=\"tok-label\">Contract Address<\/div>\r\n <div class=\"tok-value\">0x000000000000000000000000000000000000mellow<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n modalOverlay.classList.add('active');\r\n }\r\n\r\n function openCommunityModal() {\r\n modalTitle.innerText = \"Community\";\r\n modalImg.src = \"https:\/\/marshmellow.lol\/wp-content\/uploads\/2026\/07\/MELLOW-JOIN-US.png\";\r\n modalBody.innerHTML = `\r\n <p>Stay calm and enjoy the journey with Mellow. Connect and grow with us through our official channels:<\/p>\r\n <div class=\"modal-links\">\r\n <a href=\"https:\/\/t.me\/simplemellow\" target=\"_blank\" class=\"btn btn-pop-tg\">Telegram: Join Channel<\/a>\r\n <a href=\"https:\/\/x.com\/simplemellow\" target=\"_blank\" class=\"btn btn-pop-x\">X (Twitter): Follow Updates<\/a>\r\n <a href=\"LINK-KAMU\" target=\"_blank\" class=\"btn btn-pop-discord\">Discord: Join Discussion<\/a>\r\n <a href=\"LINK-KAMU\" target=\"_blank\" class=\"btn btn-pop-chart\">Price Chart: View Chart<\/a>\r\n <\/div>\r\n `;\r\n modalOverlay.classList.add('active');\r\n }\r\n\r\n function closeModal() {\r\n modalOverlay.classList.remove('active');\r\n }\r\n\r\n function closeModalOnOuter(event) {\r\n if (event.target.classList.contains('modal-overlay')) {\r\n closeModal();\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mellow ($Mellow) Mellow ($Mellow) Get $Mellow Mellow ($Mellow) “Soft in shape, calm at heart.” Mellow is a simple marshmallow-inspired character with a consistently calm expression. Amid the noise and fast-paced dynamics of the world, Mellow is here to bring a relaxed, peaceful, and pleasant atmosphere. Buy $Mellow Join Community NULL Copy CA $MELLOW SOFT IN […]<\/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:\/\/marshmellow.lol\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marshmellow.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marshmellow.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marshmellow.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marshmellow.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":19,"href":"https:\/\/marshmellow.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/marshmellow.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/marshmellow.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}