{"id":8,"date":"2026-08-14T19:18:57","date_gmt":"2026-08-14T19:18:57","guid":{"rendered":"https:\/\/getmatsui.xyz\/?page_id=8"},"modified":"2026-08-14T20:22:36","modified_gmt":"2026-08-14T20:22:36","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/getmatsui.xyz\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\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 MATSUI ($MATSUI) - Nav Menu & Pop-ups<\/title>\r\n <!-- Google Fonts: Mansalva (Headings) & Schoolbell (Body\/Buttons) -->\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=Mansalva&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* ==========================================================\r\n CSS VARIABLES & RESET\r\n ========================================================== *\/\r\n :root {\r\n --ink-black: #121212;\r\n --border-thick: 3px solid #121212;\r\n --border-thin: 2px solid #121212;\r\n --shadow-hard: 4px 5px 0px #121212;\r\n --shadow-hover: 6px 7px 0px #121212;\r\n --font-heading: 'Mansalva', cursive, sans-serif;\r\n --font-body: 'Schoolbell', cursive, sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n background: transparent;\r\n color: var(--ink-black);\r\n font-family: var(--font-body);\r\n font-size: 1.15rem;\r\n line-height: 1.5;\r\n overflow-x: hidden;\r\n width: 100%;\r\n }\r\n\r\n h2, h3, .brand-title {\r\n font-family: var(--font-heading);\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n line-height: 1.15;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n \/* Hand-Drawn Doodle Button *\/\r\n .doodle-btn {\r\n font-family: var(--font-body);\r\n font-weight: 400;\r\n background: #ffffff;\r\n color: var(--ink-black);\r\n border: var(--border-thick);\r\n border-radius: 255px 25px 225px 25px\/25px 225px 25px 255px;\r\n padding: 6px 16px;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n box-shadow: var(--shadow-hard);\r\n transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n white-space: nowrap;\r\n }\r\n\r\n .doodle-btn:hover {\r\n transform: translate(-2px, -2px) rotate(-1deg);\r\n box-shadow: var(--shadow-hover);\r\n background-color: #fafafa;\r\n }\r\n\r\n .doodle-btn:active {\r\n transform: translate(2px, 2px);\r\n box-shadow: 2px 2px 0px var(--ink-black);\r\n }\r\n\r\n \/* ==========================================================\r\n HEADER & NAVIGATION (Fixed Top)\r\n ========================================================== *\/\r\n header {\r\n width: 100%;\r\n padding: 14px 24px;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 999;\r\n background: rgba(247, 246, 242, 0.88);\r\n backdrop-filter: blur(8px);\r\n border-bottom: var(--border-thin);\r\n }\r\n\r\n .nav-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n .logo-area {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .logo-area .brand-title {\r\n font-size: 2rem;\r\n color: var(--ink-black);\r\n }\r\n\r\n .logo-area .ticker-pill {\r\n font-family: var(--font-body);\r\n font-size: 0.9rem;\r\n border: var(--border-thin);\r\n padding: 2px 10px;\r\n border-radius: 20px;\r\n background: #000;\r\n color: #fff;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n list-style: none;\r\n gap: 16px;\r\n align-items: center;\r\n }\r\n\r\n .nav-link-btn {\r\n background: none;\r\n border: none;\r\n font-family: var(--font-body);\r\n font-size: 1.15rem;\r\n color: var(--ink-black);\r\n cursor: pointer;\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .nav-link-btn:hover {\r\n background: #e8e6de;\r\n transform: scale(1.05) rotate(-1deg);\r\n }\r\n\r\n \/* Mobile Navigation Container *\/\r\n .mobile-menu-tray {\r\n display: none;\r\n }\r\n\r\n \/* ==========================================================\r\n MODAL & POP-UP (Smooth Spring Bounce from Left)\r\n ========================================================== *\/\r\n .modal-backdrop {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(18, 18, 18, 0.65);\r\n backdrop-filter: blur(4px);\r\n z-index: 1000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 16px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n .modal-backdrop.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .modal-dialog {\r\n width: 100%;\r\n max-width: 740px;\r\n max-height: 88vh;\r\n background: #ffffff;\r\n border: var(--border-thick);\r\n border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n box-shadow: 10px 12px 0px #000;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n transform: translate3d(-120vw, 0, 0) rotate(-6deg);\r\n transition: transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .modal-backdrop.active .modal-dialog {\r\n transform: translate3d(0, 0, 0) rotate(0deg);\r\n }\r\n\r\n .modal-header {\r\n padding: 18px 24px;\r\n border-bottom: var(--border-thick);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: #faf9f3;\r\n flex-shrink: 0;\r\n }\r\n\r\n .modal-header h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .close-modal-btn {\r\n width: 38px;\r\n height: 38px;\r\n border: var(--border-thick);\r\n border-radius: 50%;\r\n background: #ffffff;\r\n cursor: pointer;\r\n font-size: 1.3rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 3px 3px 0px #000;\r\n transition: all 0.2s ease;\r\n flex-shrink: 0;\r\n }\r\n\r\n .close-modal-btn:hover {\r\n transform: rotate(90deg) scale(1.1);\r\n background: #f0f0f0;\r\n }\r\n\r\n .modal-body {\r\n padding: 24px;\r\n overflow-y: auto;\r\n font-family: var(--font-body);\r\n max-height: calc(88vh - 85px);\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n\r\n .content-box {\r\n margin-bottom: 18px;\r\n padding: 16px;\r\n border: var(--border-thin);\r\n border-radius: 16px;\r\n background: #fdfcf9;\r\n word-wrap: break-word;\r\n overflow-wrap: break-word;\r\n }\r\n\r\n .content-box h3 {\r\n font-size: 1.5rem;\r\n margin-bottom: 6px;\r\n border-bottom: 2px dashed #000;\r\n padding-bottom: 4px;\r\n }\r\n\r\n \/* Video Frame Styling (Clean Autoplay) *\/\r\n .about-video-box {\r\n margin-top: 14px;\r\n width: 100%;\r\n border: var(--border-thick);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: #000;\r\n box-shadow: 3px 4px 0px #000;\r\n display: block;\r\n pointer-events: none;\r\n }\r\n\r\n .about-video {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n }\r\n\r\n .roadmap-list, .howtobuy-list, .faq-list {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n }\r\n\r\n .step-item {\r\n padding: 14px;\r\n border: var(--border-thin);\r\n border-radius: 14px;\r\n background: #ffffff;\r\n box-shadow: 3px 3px 0px #000;\r\n word-wrap: break-word;\r\n overflow-wrap: break-word;\r\n }\r\n\r\n .step-num {\r\n font-family: var(--font-heading);\r\n display: inline-block;\r\n font-size: 1.25rem;\r\n margin-bottom: 2px;\r\n color: #000;\r\n }\r\n\r\n .faq-category {\r\n font-family: var(--font-heading);\r\n font-size: 1.6rem;\r\n margin: 16px 0 8px 0;\r\n text-decoration: underline wavy #000 2px;\r\n }\r\n\r\n .faq-q {\r\n font-family: var(--font-heading);\r\n font-size: 1.3rem;\r\n margin-bottom: 2px;\r\n }\r\n\r\n \/* ==========================================================\r\n RESPONSIVE DESIGN (Mobile - Anti Potong, Rapi & Simpel)\r\n ========================================================== *\/\r\n @media (max-width: 768px) {\r\n header {\r\n padding: 8px 12px;\r\n }\r\n\r\n .nav-container {\r\n gap: 8px;\r\n }\r\n\r\n .logo-area .brand-title {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .logo-area .ticker-pill {\r\n font-size: 0.75rem;\r\n padding: 2px 7px;\r\n }\r\n\r\n .nav-container .doodle-btn {\r\n padding: 4px 10px;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n \/* Mobile Tray Scroll Horizontal yang Mulus *\/\r\n .mobile-menu-tray {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n gap: 8px;\r\n margin-top: 8px;\r\n padding-bottom: 4px;\r\n scrollbar-width: none;\r\n }\r\n\r\n .mobile-menu-tray::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .mobile-menu-tray .doodle-btn {\r\n padding: 4px 12px;\r\n font-size: 0.88rem;\r\n flex-shrink: 0;\r\n box-shadow: 2px 3px 0px #121212;\r\n }\r\n\r\n \/* Modal Mobile Optimization *\/\r\n .modal-backdrop {\r\n padding: 12px;\r\n }\r\n\r\n .modal-dialog {\r\n max-height: 85vh;\r\n border-radius: 20px;\r\n box-shadow: 5px 6px 0px #000;\r\n }\r\n\r\n .modal-header {\r\n padding: 12px 16px;\r\n }\r\n\r\n .modal-header h2 {\r\n font-size: 1.4rem;\r\n }\r\n\r\n .close-modal-btn {\r\n width: 32px;\r\n height: 32px;\r\n font-size: 1.1rem;\r\n box-shadow: 2px 2px 0px #000;\r\n }\r\n\r\n .modal-body {\r\n padding: 14px;\r\n max-height: calc(85vh - 65px);\r\n font-size: 0.98rem;\r\n line-height: 1.4;\r\n }\r\n\r\n .content-box {\r\n padding: 12px;\r\n margin-bottom: 12px;\r\n border-radius: 12px;\r\n }\r\n\r\n .content-box h3 {\r\n font-size: 1.25rem;\r\n }\r\n\r\n .step-item {\r\n padding: 10px 12px;\r\n border-radius: 10px;\r\n box-shadow: 2px 2px 0px #000;\r\n }\r\n\r\n .step-num {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .faq-category {\r\n font-size: 1.3rem;\r\n margin: 12px 0 6px 0;\r\n }\r\n\r\n .faq-q {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .about-video-box {\r\n border-width: 2px;\r\n border-radius: 12px;\r\n box-shadow: 2px 3px 0px #000;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ================= FIXED TOP NAVIGATION MENU ================= -->\r\n <header>\r\n <div class=\"nav-container\">\r\n <div class=\"logo-area\">\r\n <a href=\"#\" class=\"brand-title\">MATSUI<\/a>\r\n <span class=\"ticker-pill\">$MATSUI<\/span>\r\n <\/div>\r\n\r\n <nav>\r\n <ul class=\"nav-links\">\r\n <li><button class=\"nav-link-btn\" onclick=\"openModal('about-modal')\">About<\/button><\/li>\r\n <li><button class=\"nav-link-btn\" onclick=\"openModal('art-modal')\">The Art<\/button><\/li>\r\n <li><button class=\"nav-link-btn\" onclick=\"openModal('roadmap-modal')\">Roadmap<\/button><\/li>\r\n <li><button class=\"nav-link-btn\" onclick=\"openModal('howtobuy-modal')\">How to Buy<\/button><\/li>\r\n <li><button class=\"nav-link-btn\" onclick=\"openModal('faq-modal')\">FAQ<\/button><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"doodle-btn\">\r\n Get $MATSUI\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Mobile Tray Navigation (Scroll Horizontal Rapi) -->\r\n <div class=\"mobile-menu-tray\">\r\n <button class=\"doodle-btn\" onclick=\"openModal('about-modal')\">About<\/button>\r\n <button class=\"doodle-btn\" onclick=\"openModal('art-modal')\">The Art<\/button>\r\n <button class=\"doodle-btn\" onclick=\"openModal('roadmap-modal')\">Roadmap<\/button>\r\n <button class=\"doodle-btn\" onclick=\"openModal('howtobuy-modal')\">How to Buy<\/button>\r\n <button class=\"doodle-btn\" onclick=\"openModal('faq-modal')\">FAQ<\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- ================= POP-UP MODALS ================= -->\r\n\r\n <!-- 1. ABOUT MODAL -->\r\n <div class=\"modal-backdrop\" id=\"about-modal\" onclick=\"handleBackdropClick(event, 'about-modal')\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-header\">\r\n <h2>About MATSUI<\/h2>\r\n <button class=\"close-modal-btn\" onclick=\"closeModal('about-modal')\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <div class=\"content-box\">\r\n <h3>Genesis & Background<\/h3>\r\n <p>Born in Aichi, Japan in 1996 and based in Gifu, the artistic path began with studies in installation and media art at Nagoya University of Arts and Sciences. Following an initial career in design after graduation, independent artistry began in 2022, marked by a debut solo exhibition alongside subsequent exhibitions, events, and collaborations with major brands both in Japan and internationally.<\/p>\r\n \r\n <!-- Clean Autoplay Video (No Controls\/Bar) -->\r\n <div class=\"about-video-box\">\r\n <video class=\"about-video\" autoplay loop muted playsinline disablepictureinpicture disableremoteplayback>\r\n <source src=\"https:\/\/getmatsui.xyz\/wp-content\/uploads\/2026\/08\/HERO-MATSUI-1.mp4\" type=\"video\/mp4\">\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2. THE ART MODAL -->\r\n <div class=\"modal-backdrop\" id=\"art-modal\" onclick=\"handleBackdropClick(event, 'art-modal')\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-header\">\r\n <h2>The Art: matsui DOGS<\/h2>\r\n <button class=\"close-modal-btn\" onclick=\"closeModal('art-modal')\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <div class=\"content-box\">\r\n <h3>The matsui DOGS<\/h3>\r\n <p>The visual identity centers on floppy-eared and pointy-eared canine motifs known as \"matsui DOGS.\" These imaginary figures belong to no specific breed or real-life model, created to express humor and playfulness through bold, relaxed lines and vivid colors. Alternating between dog-like traits and human-like qualities, the characters convey instant familiarity alongside a quiet ambiguity, connecting naturally with personal memories and emotions.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 3. ROADMAP MODAL -->\r\n <div class=\"modal-backdrop\" id=\"roadmap-modal\" onclick=\"handleBackdropClick(event, 'roadmap-modal')\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-header\">\r\n <h2>Project Roadmap<\/h2>\r\n <button class=\"close-modal-btn\" onclick=\"closeModal('roadmap-modal')\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <ul class=\"roadmap-list\">\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">Phase 01: Genesis & Launch<\/span>\r\n <p>Official deployment of the $MATSUI token, initial liquidity setup, and opening of core community channels.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">Phase 02: Visual Rollout & Community Growth<\/span>\r\n <p>Digital art archive distribution, character awareness initiatives for matsui DOGS, and global member expansion.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">Phase 03: Culture & Brand Collaborations<\/span>\r\n <p>Digital exhibition showcases, physical merchandise development, and strategic partnerships across contemporary art spaces.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">Phase 04: Global Ecosystem Presence<\/span>\r\n <p>International community activations, long-term brand integrations, and cross-platform presence.<\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 4. HOW TO BUY MODAL -->\r\n <div class=\"modal-backdrop\" id=\"howtobuy-modal\" onclick=\"handleBackdropClick(event, 'howtobuy-modal')\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-header\">\r\n <h2>How to Buy<\/h2>\r\n <button class=\"close-modal-btn\" onclick=\"closeModal('howtobuy-modal')\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <ol class=\"howtobuy-list\">\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">1. Install a Web3 Wallet<\/span>\r\n <p>Download and set up a non-custodial crypto wallet compatible with the network (such as Phantom or MetaMask).<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">2. Acquire the Base Asset<\/span>\r\n <p>Fund the wallet with the network's native token to cover swap value and transaction fees.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">3. Access the Swap Platform<\/span>\r\n <p>Open the designated decentralized exchange and connect the funded wallet.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">4. Paste Official Contract Address<\/span>\r\n <p>Copy and paste the official $MATSUI contract address into the token search bar to ensure token accuracy.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <span class=\"step-num\">5. Set Slippage & Confirm<\/span>\r\n <p>Set standard slippage tolerance, enter the desired amount, and confirm the transaction directly in the wallet.<\/p>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 5. FAQ MODAL -->\r\n <div class=\"modal-backdrop\" id=\"faq-modal\" onclick=\"handleBackdropClick(event, 'faq-modal')\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-header\">\r\n <h2>Frequently Asked Questions<\/h2>\r\n <button class=\"close-modal-btn\" onclick=\"closeModal('faq-modal')\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <h3 class=\"faq-category\">Art & Concept<\/h3>\r\n <ul class=\"faq-list\">\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">Who is the artist behind the work?<\/div>\r\n <p>An artist born in Aichi in 1996 and based in Gifu, with an academic background in installation and media art from Nagoya University of Arts and Sciences.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">When did the independent artistic journey begin?<\/div>\r\n <p>Independent artistic activity began in 2022, launched through a debut solo exhibition followed by multiple showcases and brand collaborations.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">What defines the signature visual style?<\/div>\r\n <p>The artwork is recognized by bold, relaxed line work, vibrant color palettes, and the primary use of canine motifs.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">What are the \"matsui DOGS\"?<\/div>\r\n <p>Imaginary floppy-eared and pointy-eared canine figures without specific breeds, created to project playfulness, warmth, and humor.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">What emotion does the character design evoke?<\/div>\r\n <p>By balancing canine traits with human-like expressions, the figures offer a familiar yet ambiguous presence that resonates with individual memories and feelings.<\/p>\r\n <\/li>\r\n <\/ul>\r\n\r\n <h3 class=\"faq-category\" style=\"margin-top: 24px;\">Token & Technicals<\/h3>\r\n <ul class=\"faq-list\">\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">What is the purpose of $MATSUI?<\/div>\r\n <p>A culture-focused digital asset created to celebrate and bring the minimalist visual world of matsui DOGS into decentralized spaces.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">What are the transaction taxes?<\/div>\r\n <p>Standard decentralized swaps carry a 0% buy and 0% sell tax.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">How is the official contract verified?<\/div>\r\n <p>The verified contract address is pinned directly on this page and confirmed only through official communication channels.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">Is the initial liquidity secured?<\/div>\r\n <p>Initial liquidity was permanently locked at launch to maintain ecosystem transparency.<\/p>\r\n <\/li>\r\n <li class=\"step-item\">\r\n <div class=\"faq-q\">Where does community interaction take place?<\/div>\r\n <p>Real-time discussions, visual updates, and announcements are hosted directly on the official Twitter\/X and Telegram channels linked below.<\/p>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ================= JAVASCRIPT LOGIC ================= -->\r\n <script>\r\n \/\/ Open Modal with smooth spring bounce\r\n function openModal(modalId) {\r\n const modal = document.getElementById(modalId);\r\n if (modal) {\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n\r\n \/\/ Auto-play video saat modal dibuka\r\n const vid = modal.querySelector('video');\r\n if (vid) {\r\n vid.play().catch(e => console.log('Autoplay handled:', e));\r\n }\r\n }\r\n }\r\n\r\n \/\/ Close Modal\r\n function closeModal(modalId) {\r\n const modal = document.getElementById(modalId);\r\n if (modal) {\r\n modal.classList.remove('active');\r\n document.body.style.overflow = '';\r\n\r\n \/\/ Pause video saat modal ditutup\r\n const vid = modal.querySelector('video');\r\n if (vid) {\r\n vid.pause();\r\n }\r\n }\r\n }\r\n\r\n \/\/ Click outside modal content to close\r\n function handleBackdropClick(event, modalId) {\r\n if (event.target === event.currentTarget) {\r\n closeModal(modalId);\r\n }\r\n }\r\n\r\n \/\/ ESC Key listener to close active modal\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') {\r\n document.querySelectorAll('.modal-backdrop.active').forEach(modal => {\r\n modal.classList.remove('active');\r\n const vid = modal.querySelector('video');\r\n if (vid) vid.pause();\r\n });\r\n document.body.style.overflow = '';\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-91e239d e-flex e-con-boxed e-con e-parent\" data-id=\"91e239d\" data-element_type=\"container\" data-settings=\"{"background_background":"video","background_video_link":"https:\\\/\\\/getmatsui.xyz\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/HERO-MATSUI.mp4"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container elementor-hidden-phone\">\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-b50932e e-con-full e-flex e-con e-child\" data-id=\"b50932e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dfeb808 elementor-widget elementor-widget-html\" data-id=\"dfeb808\" 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>Hero Section - MATSUI<\/title>\r\n <!-- Google Fonts: Mansalva & Schoolbell -->\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=Mansalva&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n :root {\r\n --ink-black: #121212;\r\n --border-thick: 2.5px solid #121212;\r\n --border-thin: 2px solid #121212;\r\n --shadow-hard: 3px 3px 0px #121212;\r\n --shadow-hover: 4px 5px 0px #121212;\r\n --font-heading: 'Mansalva', cursive, sans-serif;\r\n --font-body: 'Schoolbell', cursive, sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n \/* Reset body transparan dan fleksibel mengikuti tinggi container *\/\r\n body {\r\n background: transparent !important;\r\n color: var(--ink-black);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n min-height: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ==========================================================\r\n HERO SECTION (Desktop: Rata Kiri & Menempel Bawah)\r\n ========================================================== *\/\r\n .hero-container {\r\n margin-top: auto; \/* Menempel di bawah *\/\r\n margin-bottom: 0;\r\n margin-left: 0;\r\n margin-right: auto;\r\n padding: 24px;\r\n max-width: 620px;\r\n width: 100%;\r\n text-align: left;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 12px;\r\n position: relative;\r\n }\r\n\r\n \/* Video Mobile (Default di desktop: Hidden) *\/\r\n .hero-mobile-video {\r\n display: none;\r\n }\r\n\r\n .tagline-badge {\r\n display: inline-block;\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n border: var(--border-thin);\r\n border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n padding: 3px 14px;\r\n background: #ffffff;\r\n box-shadow: 2px 2px 0px #121212;\r\n transform: rotate(-1deg);\r\n }\r\n\r\n .hero-headline {\r\n font-family: var(--font-heading);\r\n font-size: 2.8rem;\r\n line-height: 1.1;\r\n font-weight: 600;\r\n text-shadow: 1px 1px 0 #ffffff;\r\n }\r\n\r\n \/* Deskripsi Polos Tanpa Card *\/\r\n .hero-subheadline {\r\n max-width: 540px;\r\n font-size: 1.1rem;\r\n line-height: 1.4;\r\n color: #121212;\r\n background: transparent;\r\n border: none;\r\n padding: 0;\r\n text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n \/* Contract Address Copy Bar *\/\r\n .ca-container {\r\n width: 100%;\r\n max-width: 480px;\r\n margin-top: 2px;\r\n background: rgba(255, 255, 255, 0.98);\r\n border: var(--border-thick);\r\n border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n padding: 5px 10px 5px 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 10px;\r\n box-shadow: var(--shadow-hard);\r\n }\r\n\r\n .ca-text {\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n user-select: all;\r\n }\r\n\r\n .ca-copy-btn {\r\n font-family: var(--font-body);\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n border: var(--border-thin);\r\n background: #121212;\r\n color: #ffffff;\r\n padding: 5px 12px;\r\n border-radius: 14px;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n flex-shrink: 0;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .ca-copy-btn:hover {\r\n background: #333333;\r\n transform: scale(1.03);\r\n }\r\n\r\n \/* Hand-Drawn Doodle Buttons *\/\r\n .doodle-btn {\r\n font-family: var(--font-body);\r\n font-weight: 600;\r\n background: #ffffff;\r\n color: var(--ink-black);\r\n border: var(--border-thick);\r\n border-radius: 255px 20px 225px 20px\/20px 225px 20px 255px;\r\n padding: 6px 16px;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n box-shadow: var(--shadow-hard);\r\n text-decoration: none;\r\n transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n .doodle-btn:hover {\r\n transform: translate(-2px, -2px) rotate(-1deg);\r\n box-shadow: var(--shadow-hover);\r\n background-color: #fafafa;\r\n }\r\n\r\n .doodle-btn:active {\r\n transform: translate(2px, 2px);\r\n box-shadow: 1px 1px 0px var(--ink-black);\r\n }\r\n\r\n .hero-actions {\r\n display: flex;\r\n justify-content: flex-start;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n margin-top: 4px;\r\n }\r\n\r\n .icon-svg {\r\n width: 18px;\r\n height: 18px;\r\n stroke-width: 2.2;\r\n stroke: currentColor;\r\n fill: none;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n \/* Toast Notification *\/\r\n #ca-toast {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n background: #121212;\r\n color: #ffffff;\r\n padding: 8px 18px;\r\n border-radius: 30px;\r\n font-family: var(--font-body);\r\n font-size: 0.95rem;\r\n border: 2px solid #ffffff;\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.5);\r\n z-index: 2000;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n #ca-toast.show {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n \/* ==========================================================\r\n RESPONSIVE DESIGN (Mobile: Video Muncul & Semua Center)\r\n ========================================================== *\/\r\n @media (max-width: 768px) {\r\n .hero-container {\r\n padding: 20px 16px;\r\n gap: 12px;\r\n align-items: center; \/* Center semua item *\/\r\n text-align: center; \/* Center teks *\/\r\n margin: 0 auto; \/* Posisi container di tengah *\/\r\n max-width: 100%;\r\n }\r\n\r\n \/* Video Aktif Khusus Mobile *\/\r\n .hero-mobile-video {\r\n display: block;\r\n width: 100%;\r\n max-width: 340px;\r\n border: var(--border-thick);\r\n border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n overflow: hidden;\r\n background: #000;\r\n box-shadow: var(--shadow-hard);\r\n margin-bottom: 6px;\r\n pointer-events: none;\r\n }\r\n\r\n .hero-mobile-video video {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n }\r\n\r\n .hero-headline {\r\n font-size: 2rem;\r\n }\r\n\r\n .hero-subheadline {\r\n font-size: 0.95rem;\r\n max-width: 100%;\r\n }\r\n\r\n .ca-container {\r\n flex-direction: column;\r\n align-items: stretch;\r\n text-align: center;\r\n padding: 8px 12px;\r\n gap: 8px;\r\n }\r\n\r\n .ca-copy-btn {\r\n justify-content: center;\r\n }\r\n\r\n .hero-actions {\r\n justify-content: center; \/* Tombol rata tengah *\/\r\n gap: 8px;\r\n }\r\n\r\n .hero-actions .doodle-btn {\r\n padding: 6px 12px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n #ca-toast {\r\n right: 50%;\r\n transform: translateX(50%) translateY(40px);\r\n }\r\n\r\n #ca-toast.show {\r\n transform: translateX(50%) translateY(0);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ================= HERO SECTION ================= -->\r\n <section class=\"hero-container\">\r\n\r\n <!-- Video Khusus Mobile (Otomatis Disembunyikan di Desktop) -->\r\n <div class=\"hero-mobile-video\">\r\n <video autoplay loop muted playsinline disablepictureinpicture disableremoteplayback>\r\n <source src=\"https:\/\/getmatsui.xyz\/wp-content\/uploads\/2026\/08\/HERO-MATSUI.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 class=\"tagline-badge\">Contemporary Japanese Art on Chain<\/div>\r\n \r\n <h1 class=\"hero-headline\">The World of matsui DOGS<\/h1>\r\n \r\n <p class=\"hero-subheadline\">\r\n Bold lines, vivid simplicity, and imaginary canine expressions born in Aichi for global culture.\r\n <\/p>\r\n\r\n <!-- Contract Address Bar -->\r\n <div class=\"ca-container\">\r\n <span class=\"ca-text\" id=\"ca-value\">0x000000000000000000000000000000000000MATSUI<\/span>\r\n <button class=\"ca-copy-btn\" onclick=\"copyContractAddress()\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect>\r\n <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path>\r\n <\/svg>\r\n <span id=\"ca-btn-label\">Copy CA<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"hero-actions\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"doodle-btn\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"9\" cy=\"21\" r=\"1\"><\/circle>\r\n <circle cx=\"20\" cy=\"21\" r=\"1\"><\/circle>\r\n <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"><\/path>\r\n <\/svg>\r\n Buy $MATSUI\r\n <\/a>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"doodle-btn\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <path d=\"M4 4l11.733 16h4.267l-11.733 -16z\"><\/path>\r\n <path d=\"M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772\"><\/path>\r\n <\/svg>\r\n Twitter \/ X\r\n <\/a>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"doodle-btn\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <path d=\"M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4\"><\/path>\r\n <\/svg>\r\n Telegram\r\n <\/a>\r\n\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"doodle-btn\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"><\/line>\r\n <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"><\/line>\r\n <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"><\/line>\r\n <line x1=\"2\" y1=\"20\" x2=\"22\" y2=\"20\"><\/line>\r\n <\/svg>\r\n Chart\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Copy Toast Element -->\r\n <div id=\"ca-toast\">Contract Address Copied!<\/div>\r\n\r\n <!-- JavaScript for Copy CA -->\r\n <script>\r\n function copyContractAddress() {\r\n const caText = document.getElementById('ca-value').innerText.trim();\r\n navigator.clipboard.writeText(caText).then(() => {\r\n const btnLabel = document.getElementById('ca-btn-label');\r\n const toast = document.getElementById('ca-toast');\r\n \r\n btnLabel.innerText = \"Copied!\";\r\n toast.classList.add('show');\r\n\r\n setTimeout(() => {\r\n btnLabel.innerText = \"Copy CA\";\r\n toast.classList.remove('show');\r\n }, 2000);\r\n }).catch(err => {\r\n console.error('Failed to copy: ', err);\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-40ce8bf e-flex e-con-boxed e-con e-parent\" data-id=\"40ce8bf\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b92c7bb elementor-widget elementor-widget-html\" data-id=\"b92c7bb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- ================= SECTION COPYRIGHT ================= -->\r\n<footer class=\"simple-copyright\">\r\n <p>\u00a9 <span id=\"current-year\"><\/span> $MATSUI. All Rights Reserved.<\/p>\r\n<\/footer>\r\n\r\n<style>\r\n \/* Styling Section Copyright *\/\r\n .simple-copyright {\r\n width: 100%;\r\n background: transparent !important; \/* Background transparan *\/\r\n padding: 16px 20px;\r\n text-align: center;\r\n box-sizing: border-box;\r\n }\r\n\r\n .simple-copyright p {\r\n margin: 0;\r\n padding: 0;\r\n color: #ffffff; \/* Teks putih *\/\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n font-size: 0.95rem;\r\n letter-spacing: 0.5px;\r\n opacity: 0.85; \/* Sedikit lembut agar tidak terlalu mencolok *\/\r\n text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); \/* Shadow halus agar mudah dibaca di berbagai background *\/\r\n }\r\n\r\n \/* Responsif Mobile *\/\r\n @media (max-width: 768px) {\r\n .simple-copyright {\r\n padding: 12px 16px;\r\n }\r\n .simple-copyright p {\r\n font-size: 0.85rem;\r\n }\r\n }\r\n<\/style>\r\n\r\n<!-- Script agar tahun copyright selalu update otomatis -->\r\n<script>\r\n document.getElementById('current-year').textContent = new Date().getFullYear();\r\n<\/script>\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>MATSUI ($MATSUI) – Nav Menu & Pop-ups MATSUI $MATSUI About The Art Roadmap How to Buy FAQ Get $MATSUI About The Art Roadmap How to Buy FAQ About MATSUI \u2715 Genesis & Background Born in Aichi, Japan in 1996 and based in Gifu, the artistic path began with studies in installation and media art at […]<\/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:\/\/getmatsui.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":37,"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/getmatsui.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}