{"id":8,"date":"2026-08-08T01:55:36","date_gmt":"2026-08-08T01:55:36","guid":{"rendered":"https:\/\/blacknana.fun\/?page_id=8"},"modified":"2026-08-08T02:45:28","modified_gmt":"2026-08-08T02:45:28","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/blacknana.fun\/","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 NANA \u2014 $NANA Black Cat Luxury Meme Token<\/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=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --bg-base: #040406;\r\n --bg-card: rgba(16, 16, 22, 0.6);\r\n --border-silver: rgba(220, 225, 235, 0.12);\r\n --border-glow: rgba(255, 255, 255, 0.3);\r\n --text-main: #e2e4e9;\r\n --text-muted: #8a8d9b;\r\n --silver-light: #ffffff;\r\n --silver-mid: #c0c5d0;\r\n --silver-dark: #585c68;\r\n --font-display: 'Bebas Neue', sans-serif;\r\n --font-body: 'Space Grotesk', sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n background-color: var(--bg-base);\r\n color: var(--text-main);\r\n font-family: var(--font-body);\r\n overflow-x: hidden;\r\n position: relative;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* Ambient Silver Gradient Glow Backgrounds *\/\r\n .glow-sphere-1 {\r\n position: fixed;\r\n top: -10%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 700px;\r\n height: 500px;\r\n background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(180, 190, 210, 0.03) 45%, transparent 70%);\r\n filter: blur(80px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glow-sphere-2 {\r\n position: fixed;\r\n top: 40%;\r\n right: -10%;\r\n width: 600px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(200, 210, 230, 0.06) 0%, rgba(120, 130, 150, 0.02) 50%, transparent 70%);\r\n filter: blur(90px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .glow-sphere-3 {\r\n position: fixed;\r\n bottom: 5%;\r\n left: -10%;\r\n width: 650px;\r\n height: 650px;\r\n background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(150, 160, 180, 0.02) 50%, transparent 70%);\r\n filter: blur(100px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n \/* Top Scroll Progress Bar *\/\r\n #scroll-progress {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #ffffff, #8a8d9b, #ffffff);\r\n width: 0%;\r\n z-index: 9999;\r\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);\r\n transition: width 0.1s ease-out;\r\n }\r\n\r\n \/* Black Noise Overlay Texture *\/\r\n .noise-bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n pointer-events: none;\r\n z-index: 999;\r\n opacity: 0.06;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n }\r\n\r\n \/* Ambient Cyber Grid Overlay *\/\r\n .grid-bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n pointer-events: none;\r\n background-image: \r\n linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),\r\n linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);\r\n background-size: 80px 80px, 80px 80px;\r\n z-index: 0;\r\n }\r\n\r\n \/* Silver Chrome Gradient Text *\/\r\n .silver-text {\r\n background: linear-gradient(135deg, #ffffff 0%, #d8dce5 30%, #9aa0b0 65%, #ffffff 85%, #585c68 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* Full Width Header Styling *\/\r\n header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 22px 5%;\r\n width: 100%;\r\n position: sticky;\r\n top: 0;\r\n background: rgba(4, 4, 6, 0.7);\r\n backdrop-filter: blur(20px);\r\n z-index: 100;\r\n }\r\n\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-family: var(--font-display);\r\n font-size: 32px;\r\n letter-spacing: 2px;\r\n color: #fff;\r\n text-decoration: none;\r\n }\r\n\r\n .logo-img {\r\n width: 38px;\r\n height: 38px;\r\n object-fit: contain;\r\n filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));\r\n }\r\n\r\n nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 32px;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 32px;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n color: var(--text-muted);\r\n text-decoration: none;\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-links a:hover, .nav-links a.active {\r\n color: #fff;\r\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n \/* Container Grid *\/\r\n .container {\r\n width: 100%;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Buttons *\/\r\n .btn-silver {\r\n background: linear-gradient(135deg, #ffffff 0%, #9aa0a8 50%, #e6e8ed 100%);\r\n color: #08080a;\r\n padding: 12px 28px;\r\n border-radius: 4px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n border: 1px solid rgba(255, 255, 255, 0.9);\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);\r\n cursor: pointer;\r\n display: inline-block;\r\n }\r\n\r\n .btn-silver:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 30px rgba(255, 255, 255, 0.35);\r\n background: linear-gradient(135deg, #ffffff 0%, #c5cbd4 50%, #ffffff 100%);\r\n }\r\n\r\n .btn-outline {\r\n background: rgba(255, 255, 255, 0.02);\r\n color: #fff;\r\n padding: 12px 28px;\r\n border-radius: 4px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n border: 1px solid var(--border-silver);\r\n transition: all 0.3s ease;\r\n display: inline-block;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .btn-outline:hover {\r\n border-color: #fff;\r\n background: rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* Mobile Menu Hamburger *\/\r\n .menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n .menu-toggle span {\r\n width: 25px;\r\n height: 2px;\r\n background-color: #fff;\r\n transition: 0.3s;\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero-section {\r\n padding: 90px 0 70px;\r\n position: relative;\r\n }\r\n\r\n .hero-bento {\r\n display: grid;\r\n grid-template-columns: 1.1fr 0.9fr;\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n\r\n .hero-left-card {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border-silver);\r\n border-radius: 24px;\r\n padding: 50px 45px;\r\n backdrop-filter: blur(20px);\r\n position: relative;\r\n box-shadow: 0 30px 60px rgba(0,0,0,0.6);\r\n overflow: hidden;\r\n }\r\n\r\n .hero-left-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);\r\n }\r\n\r\n .hero-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(80px, 14vw, 170px);\r\n line-height: 0.8;\r\n letter-spacing: 2px;\r\n margin: 0;\r\n }\r\n\r\n .ticker-badge {\r\n display: inline-block;\r\n padding: 6px 16px;\r\n border-radius: 20px;\r\n border: 1px solid var(--border-silver);\r\n background: rgba(255, 255, 255, 0.03);\r\n font-size: 11px;\r\n letter-spacing: 3px;\r\n color: var(--silver-mid);\r\n margin: 20px 0 25px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .hero-desc {\r\n font-size: 16px;\r\n line-height: 1.7;\r\n color: var(--text-main);\r\n margin-bottom: 35px;\r\n font-weight: 300;\r\n }\r\n\r\n .ca-box {\r\n background: rgba(10, 10, 14, 0.8);\r\n border: 1px solid var(--border-silver);\r\n border-radius: 8px;\r\n padding: 14px 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 35px;\r\n }\r\n\r\n .ca-text {\r\n font-family: monospace;\r\n font-size: 12px;\r\n color: var(--silver-mid);\r\n word-break: break-all;\r\n user-select: all;\r\n }\r\n\r\n .copy-btn {\r\n background: none;\r\n border: 1px solid var(--border-silver);\r\n color: #fff;\r\n padding: 8px 14px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 10px;\r\n letter-spacing: 1.5px;\r\n transition: 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n .copy-btn:hover {\r\n background: #fff;\r\n color: #000;\r\n box-shadow: 0 0 15px rgba(255,255,255,0.4);\r\n }\r\n\r\n .hero-actions {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n \/* Direct Hero Image without Card Frame *\/\r\n .mascot-container-direct {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n perspective: 1000px;\r\n }\r\n\r\n .hero-rotate-img-large {\r\n width: 100%;\r\n max-width: 440px;\r\n height: auto;\r\n object-fit: contain;\r\n filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.25));\r\n animation: continuousRotate 22s linear infinite;\r\n transition: transform 0.1s ease-out;\r\n }\r\n\r\n @keyframes continuousRotate {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* Multi-Directional Scroll Animations *\/\r\n .reveal-left {\r\n opacity: 0;\r\n transform: translateX(-60px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .reveal-right {\r\n opacity: 0;\r\n transform: translateX(60px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .reveal-bottom {\r\n opacity: 0;\r\n transform: translateY(60px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .reveal-left.active, .reveal-right.active, .reveal-bottom.active {\r\n opacity: 1;\r\n transform: translate(0, 0);\r\n }\r\n\r\n \/* Section Block *\/\r\n .section-block {\r\n padding: 100px 0 80px;\r\n position: relative;\r\n }\r\n\r\n .section-header-wrap {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(50px, 8vw, 110px);\r\n line-height: 0.85;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .section-tag {\r\n font-size: 11px;\r\n letter-spacing: 3px;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* About Section *\/\r\n .about-layout {\r\n display: grid;\r\n grid-template-columns: 0.9fr 1.1fr;\r\n gap: 30px;\r\n align-items: stretch;\r\n }\r\n\r\n .about-card-left {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border-silver);\r\n border-radius: 24px;\r\n padding: 35px;\r\n backdrop-filter: blur(16px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n }\r\n\r\n .about-img-precision {\r\n width: 100%;\r\n max-width: 300px;\r\n height: auto;\r\n object-fit: contain;\r\n filter: drop-shadow(0 10px 25px rgba(0,0,0,0.8));\r\n }\r\n\r\n .about-card-right {\r\n background: rgba(12, 12, 16, 0.5);\r\n border: 1px solid var(--border-silver);\r\n border-radius: 24px;\r\n padding: 45px;\r\n backdrop-filter: blur(16px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n }\r\n\r\n .about-highlight {\r\n font-size: 32px;\r\n font-weight: 700;\r\n line-height: 1.25;\r\n color: #fff;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .about-text {\r\n font-size: 16px;\r\n line-height: 1.85;\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* Photo Gallery Section *\/\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .gallery-card-img {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border-silver);\r\n border-radius: 24px;\r\n padding: 24px;\r\n backdrop-filter: blur(16px);\r\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .gallery-card-img:hover {\r\n border-color: rgba(255,255,255,0.5);\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 25px rgba(255,255,255,0.08);\r\n }\r\n\r\n .gallery-photo {\r\n width: 100%;\r\n height: 380px;\r\n object-fit: cover;\r\n border-radius: 14px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .gallery-title {\r\n font-size: 20px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .gallery-sub {\r\n font-size: 13px;\r\n line-height: 1.6;\r\n color: var(--text-muted);\r\n }\r\n\r\n \/* 3D Stacked Video Carousel Gallery *\/\r\n .video-carousel-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1100px;\r\n margin: 40px auto 0;\r\n perspective: 1000px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .video-carousel-container {\r\n position: relative;\r\n width: 100%;\r\n height: 480px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .video-card-3d {\r\n position: absolute;\r\n width: 300px;\r\n height: 420px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n border: 1px solid var(--border-silver);\r\n background: #000;\r\n box-shadow: 0 25px 50px rgba(0,0,0,0.85);\r\n transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\r\n opacity: 0;\r\n pointer-events: none;\r\n transform: translateX(0) scale(0.6) rotateY(0deg);\r\n z-index: 1;\r\n }\r\n\r\n .video-card-3d video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* 3D Position States *\/\r\n .video-card-3d.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n transform: translateX(0) scale(1) rotateY(0deg);\r\n z-index: 10;\r\n border-color: rgba(255, 255, 255, 0.6);\r\n box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 30px rgba(255,255,255,0.15);\r\n }\r\n\r\n .video-card-3d.prev {\r\n opacity: 0.65;\r\n pointer-events: auto;\r\n transform: translateX(-240px) scale(0.82) rotateY(15deg);\r\n z-index: 5;\r\n filter: brightness(0.6);\r\n }\r\n\r\n .video-card-3d.next {\r\n opacity: 0.65;\r\n pointer-events: auto;\r\n transform: translateX(240px) scale(0.82) rotateY(-15deg);\r\n z-index: 5;\r\n filter: brightness(0.6);\r\n }\r\n\r\n .video-card-3d.far-prev {\r\n opacity: 0.2;\r\n transform: translateX(-400px) scale(0.65);\r\n z-index: 2;\r\n }\r\n\r\n .video-card-3d.far-next {\r\n opacity: 0.2;\r\n transform: translateX(400px) scale(0.65);\r\n z-index: 2;\r\n }\r\n\r\n \/* Carousel Navigation Controls *\/\r\n .carousel-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 24px;\r\n margin-top: 30px;\r\n z-index: 15;\r\n }\r\n\r\n .nav-btn {\r\n background: rgba(18, 18, 24, 0.8);\r\n border: 1px solid var(--border-silver);\r\n color: #fff;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n font-size: 18px;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.5);\r\n }\r\n\r\n .nav-btn:hover {\r\n background: #ffffff;\r\n color: #000000;\r\n transform: scale(1.1);\r\n box-shadow: 0 0 20px rgba(255,255,255,0.5);\r\n }\r\n\r\n \/* Tokenomics Section *\/\r\n .tokenomics-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .token-card {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border-silver);\r\n border-radius: 24px;\r\n padding: 40px 30px;\r\n position: relative;\r\n backdrop-filter: blur(16px);\r\n transition: 0.3s;\r\n }\r\n\r\n .token-card:hover {\r\n border-color: rgba(255,255,255,0.4);\r\n transform: translateY(-4px);\r\n }\r\n\r\n .token-label {\r\n font-size: 11px;\r\n letter-spacing: 2.5px;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .token-value {\r\n font-family: var(--font-display);\r\n font-size: 52px;\r\n line-height: 0.9;\r\n color: #fff;\r\n letter-spacing: 1px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .token-bar {\r\n width: 100%;\r\n height: 3px;\r\n background: rgba(255,255,255,0.1);\r\n border-radius: 2px;\r\n margin-bottom: 15px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .token-bar-inner {\r\n height: 100%;\r\n background: linear-gradient(90deg, #ffffff, #585c68);\r\n width: 100%;\r\n }\r\n\r\n .token-desc {\r\n font-size: 12px;\r\n color: var(--text-muted);\r\n line-height: 1.5;\r\n }\r\n\r\n \/* Community Section with Full Overlay Video *\/\r\n .cta-video-card-full {\r\n position: relative;\r\n margin: 80px 0 80px;\r\n border-radius: 28px;\r\n overflow: hidden;\r\n border: 1px solid var(--border-silver);\r\n min-height: 480px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 80px 30px;\r\n box-shadow: 0 30px 60px rgba(0,0,0,0.9);\r\n }\r\n\r\n .community-bg-video {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n z-index: 0;\r\n }\r\n\r\n .community-video-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(6, 6, 10, 0.75);\r\n backdrop-filter: blur(3px);\r\n z-index: 1;\r\n }\r\n\r\n .cta-content-over {\r\n position: relative;\r\n z-index: 2;\r\n text-align: center;\r\n max-width: 700px;\r\n }\r\n\r\n .cta-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(50px, 9vw, 100px);\r\n line-height: 0.9;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .cta-sub {\r\n font-size: 16px;\r\n line-height: 1.7;\r\n color: var(--text-main);\r\n margin: 0 auto 35px;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n padding: 40px 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 11px;\r\n letter-spacing: 1.5px;\r\n color: var(--text-muted);\r\n text-transform: uppercase;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n\r\n \/* Mobile Responsiveness *\/\r\n @media (max-width: 1024px) {\r\n header {\r\n padding: 18px 24px;\r\n }\r\n .hero-bento {\r\n grid-template-columns: 1fr;\r\n }\r\n .about-layout {\r\n grid-template-columns: 1fr;\r\n }\r\n .gallery-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .tokenomics-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .video-card-3d.prev {\r\n transform: translateX(-140px) scale(0.8) rotateY(10deg);\r\n }\r\n .video-card-3d.next {\r\n transform: translateX(140px) scale(0.8) rotateY(-10deg);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .nav-links {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n background: #060608;\r\n flex-direction: column;\r\n padding: 25px;\r\n border-bottom: 1px solid var(--border-silver);\r\n }\r\n\r\n .nav-links.show {\r\n display: flex;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .hero-left-card {\r\n padding: 30px 24px;\r\n }\r\n\r\n .video-carousel-container {\r\n height: 400px;\r\n }\r\n\r\n .video-card-3d {\r\n width: 240px;\r\n height: 350px;\r\n }\r\n\r\n .video-card-3d.prev {\r\n transform: translateX(-80px) scale(0.75);\r\n }\r\n\r\n .video-card-3d.next {\r\n transform: translateX(80px) scale(0.75);\r\n }\r\n\r\n footer {\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Ambient Silver Gradient Elements -->\r\n <div class=\"glow-sphere-1\"><\/div>\r\n <div class=\"glow-sphere-2\"><\/div>\r\n <div class=\"glow-sphere-3\"><\/div>\r\n\r\n <!-- Scroll Progress Line -->\r\n <div id=\"scroll-progress\"><\/div>\r\n\r\n <!-- Metallic Black Noise Overlay -->\r\n <div class=\"noise-bg\"><\/div>\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <!-- Full Width Navigation Header -->\r\n <header>\r\n <a href=\"#\" class=\"logo\">\r\n <img decoding=\"async\" src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/ASET1A.png\" alt=\"NANA Logo\" class=\"logo-img\">\r\n NANA\r\n <\/a>\r\n <nav>\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#gallery\">Gallery<\/a><\/li>\r\n <li><a href=\"#tokenomics\">Tokenomics<\/a><\/li>\r\n <li><a href=\"#join\">Join Us<\/a><\/li>\r\n <\/ul>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-silver\">Buy $NANA<\/a>\r\n <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"Toggle Menu\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n <div class=\"container\">\r\n <!-- Hero Section -->\r\n <section class=\"hero-section\" id=\"home\">\r\n <div class=\"hero-bento\">\r\n <!-- Left Hero Card -->\r\n <div class=\"hero-left-card reveal-left\">\r\n <h1 class=\"hero-title silver-text\">NANA<\/h1>\r\n <div class=\"ticker-badge\">Ticker: $NANA<\/div>\r\n \r\n <p class=\"hero-desc\">\r\n A black cat with a grumpy face\u2014slacking off, yet exuding pure luxury. Sitting back, sharp gaze, ready to hold the line.\r\n <\/p>\r\n\r\n <!-- Contract Address Box -->\r\n <div class=\"ca-box\">\r\n <span class=\"ca-text\" id=\"caText\">0x000000000000000000000000000000000000pump<\/span>\r\n <button class=\"copy-btn\" id=\"copyBtn\">COPY CA<\/button>\r\n <\/div>\r\n\r\n <div class=\"hero-actions\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-silver\">Join Telegram<\/a>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-outline\">Follow Twitter \/ X<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Mascot (Rotating Image without Card Frame) -->\r\n <div class=\"mascot-container-direct reveal-right\">\r\n <img decoding=\"async\" src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/ASET1A.png\" alt=\"NANA Rotating Hero\" class=\"hero-rotate-img-large\" id=\"mascotImg\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- About Section -->\r\n <section class=\"section-block\" id=\"about\">\r\n <div class=\"section-header-wrap reveal-bottom\">\r\n <h2 class=\"section-title silver-text\">ABOUT<\/h2>\r\n <span class=\"section-tag\">01 \/ CHARACTER AURA<\/span>\r\n <\/div>\r\n\r\n <div class=\"about-layout\">\r\n <div class=\"about-card-left reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/ASET1.png\" alt=\"NANA About\" class=\"about-img-precision\">\r\n <\/div>\r\n <div class=\"about-card-right reveal-right\">\r\n <div class=\"about-highlight silver-text\">\r\n Chill Vibes, Authentic Character.\r\n <\/div>\r\n <p class=\"about-text\">\r\n Nana is here with a pure, authentic black cat personality. No over-the-top gimmicks\u2014just a focus on unique visuals and consistent expressions.<br><br>\r\n No need for drama to grab attention. Just lounging around, staring straight ahead, letting the aura speak for itself. Built on a solid community and organic momentum. Simple, relaxed, straight to the point.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Gallery Section -->\r\n <section class=\"section-block\" id=\"gallery\">\r\n <div class=\"section-header-wrap reveal-bottom\">\r\n <h2 class=\"section-title silver-text\">GALLERY<\/h2>\r\n <span class=\"section-tag\">02 \/ VISUAL ARCHIVE<\/span>\r\n <\/div>\r\n\r\n <!-- Image Archive Grid -->\r\n <div class=\"gallery-grid\">\r\n <div class=\"gallery-card-img reveal-left\">\r\n <img decoding=\"async\" src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/ASET2.png\" alt=\"NANA Gallery 1\" class=\"gallery-photo\">\r\n <h3 class=\"gallery-title\">Chill Mode<\/h3>\r\n <p class=\"gallery-sub\">Maximum relaxation, zero stress. The art of lounging with absolute authority.<\/p>\r\n <\/div>\r\n\r\n <div class=\"gallery-card-img reveal-right\">\r\n <img decoding=\"async\" src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/ASET3.png\" alt=\"NANA Gallery 2\" class=\"gallery-photo\">\r\n <h3 class=\"gallery-title\">The Stare<\/h3>\r\n <p class=\"gallery-sub\">The iconic grumpy face. A penetrating, unbothered stare holding the line.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 3D Stacked Video Gallery Carousel -->\r\n <div class=\"video-carousel-wrapper reveal-bottom\">\r\n <div class=\"video-carousel-container\" id=\"videoCarousel\">\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-1.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-2.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-3.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-4.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-5.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-6.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-7.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <div class=\"video-card-3d\">\r\n <video autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/NANA-8.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Navigation Arrows -->\r\n <div class=\"carousel-controls\">\r\n <button class=\"nav-btn\" id=\"prevVideoBtn\" aria-label=\"Previous Video\">❮<\/button>\r\n <button class=\"nav-btn\" id=\"nextVideoBtn\" aria-label=\"Next Video\">❯<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Tokenomics Section -->\r\n <section class=\"section-block\" id=\"tokenomics\">\r\n <div class=\"section-header-wrap reveal-bottom\">\r\n <h2 class=\"section-title silver-text\">TOKENOMICS<\/h2>\r\n <span class=\"section-tag\">03 \/ METRICS<\/span>\r\n <\/div>\r\n\r\n <div class=\"tokenomics-grid\">\r\n <div class=\"token-card reveal-bottom\" style=\"transition-delay: 0.1s;\">\r\n <div class=\"token-label\">Total Supply<\/div>\r\n <div class=\"token-value silver-text\">1B<\/div>\r\n <div class=\"token-bar\"><div class=\"token-bar-inner\"><\/div><\/div>\r\n <div class=\"token-desc\">1,000,000,000 $NANA<br>(Fixed supply, no minting)<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card reveal-bottom\" style=\"transition-delay: 0.2s;\">\r\n <div class=\"token-label\">Tax Rate<\/div>\r\n <div class=\"token-value silver-text\">0%<\/div>\r\n <div class=\"token-bar\"><div class=\"token-bar-inner\"><\/div><\/div>\r\n <div class=\"token-desc\">0% Buy \/ 0% Sell<br>(Zero transaction fees)<\/div>\r\n <\/div>\r\n\r\n <div class=\"token-card reveal-bottom\" style=\"transition-delay: 0.3s;\">\r\n <div class=\"token-label\">Liquidity Status<\/div>\r\n <div class=\"token-value silver-text\">BURNED<\/div>\r\n <div class=\"token-bar\"><div class=\"token-bar-inner\"><\/div><\/div>\r\n <div class=\"token-desc\">100% Permanently Locked & Burned<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Join Us Section with Full Overlay Video -->\r\n <section class=\"cta-video-card-full reveal-bottom\" id=\"join\">\r\n <video class=\"community-bg-video\" autoplay loop muted playsinline>\r\n <source src=\"https:\/\/blacknana.fun\/wp-content\/uploads\/2026\/08\/HERO-NANA.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"community-video-overlay\"><\/div>\r\n\r\n <div class=\"cta-content-over\">\r\n <h2 class=\"cta-title silver-text\">JOIN THE COMMUNITY<\/h2>\r\n <p class=\"cta-sub\">\r\n Hop into the Telegram group and catch the latest updates on X. Ride along organically with holders who get the vibe.\r\n <\/p>\r\n\r\n <div class=\"hero-actions\" style=\"justify-content: center;\">\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-silver\" style=\"padding: 16px 36px;\">Join Telegram<\/a>\r\n <a href=\"YOUR-LINK\" target=\"_blank\" class=\"btn-outline\" style=\"padding: 16px 36px;\">Twitter \/ X<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer>\r\n <div>NANA ($NANA)<\/div>\r\n <div>\u00a9 NANA.<\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <!-- JavaScript Interactivity -->\r\n <script>\r\n \/\/ Hamburger Menu Toggle\r\n const menuToggle = document.getElementById('menuToggle');\r\n const navLinks = document.getElementById('navLinks');\r\n menuToggle.addEventListener('click', () => {\r\n navLinks.classList.toggle('show');\r\n });\r\n\r\n \/\/ Dynamic Copy Contract Address Function\r\n const copyBtn = document.getElementById('copyBtn');\r\n const caText = document.getElementById('caText');\r\n\r\n copyBtn.addEventListener('click', () => {\r\n const addressToCopy = caText.textContent.trim();\r\n\r\n if (navigator.clipboard && window.isSecureContext) {\r\n navigator.clipboard.writeText(addressToCopy).then(() => {\r\n showCopiedFeedback();\r\n }).catch(() => {\r\n fallbackCopyText(addressToCopy);\r\n });\r\n } else {\r\n fallbackCopyText(addressToCopy);\r\n }\r\n });\r\n\r\n function fallbackCopyText(text) {\r\n const tempInput = document.createElement('textarea');\r\n tempInput.value = text;\r\n tempInput.style.position = 'fixed';\r\n tempInput.style.opacity = '0';\r\n document.body.appendChild(tempInput);\r\n tempInput.focus();\r\n tempInput.select();\r\n try {\r\n document.execCommand('copy');\r\n showCopiedFeedback();\r\n } catch (err) {\r\n console.error('Gagal menyalin:', err);\r\n }\r\n document.body.removeChild(tempInput);\r\n }\r\n\r\n function showCopiedFeedback() {\r\n copyBtn.textContent = 'COPIED!';\r\n copyBtn.style.background = '#ffffff';\r\n copyBtn.style.color = '#000000';\r\n\r\n setTimeout(() => {\r\n copyBtn.textContent = 'COPY CA';\r\n copyBtn.style.background = 'none';\r\n copyBtn.style.color = '#ffffff';\r\n }, 2000);\r\n }\r\n\r\n \/\/ Parallax Mouse Movement for Hero Image\r\n const mascotImg = document.getElementById('mascotImg');\r\n document.addEventListener('mousemove', (e) => {\r\n const { clientX, clientY } = e;\r\n const centerX = window.innerWidth \/ 2;\r\n const centerY = window.innerHeight \/ 2;\r\n const moveX = (clientX - centerX) \/ 35;\r\n const moveY = (clientY - centerY) \/ 35;\r\n if (mascotImg) {\r\n mascotImg.style.transform = `translate(${moveX}px, ${moveY}px)`;\r\n }\r\n });\r\n\r\n \/\/ 3D Stacked Video Carousel Logic\r\n const videoCards = document.querySelectorAll('.video-card-3d');\r\n const prevVideoBtn = document.getElementById('prevVideoBtn');\r\n const nextVideoBtn = document.getElementById('nextVideoBtn');\r\n let currentIndex = 0;\r\n\r\n function update3DCarousel() {\r\n const total = videoCards.length;\r\n videoCards.forEach((card, i) => {\r\n card.className = 'video-card-3d'; \/\/ Reset classes\r\n \r\n const diff = (i - currentIndex + total) % total;\r\n\r\n if (diff === 0) {\r\n card.classList.add('active');\r\n } else if (diff === 1) {\r\n card.classList.add('next');\r\n } else if (diff === total - 1) {\r\n card.classList.add('prev');\r\n } else if (diff === 2) {\r\n card.classList.add('far-next');\r\n } else if (diff === total - 2) {\r\n card.classList.add('far-prev');\r\n }\r\n });\r\n }\r\n\r\n if (prevVideoBtn && nextVideoBtn) {\r\n nextVideoBtn.addEventListener('click', () => {\r\n currentIndex = (currentIndex + 1) % videoCards.length;\r\n update3DCarousel();\r\n });\r\n\r\n prevVideoBtn.addEventListener('click', () => {\r\n currentIndex = (currentIndex - 1 + videoCards.length) % videoCards.length;\r\n update3DCarousel();\r\n });\r\n }\r\n\r\n \/\/ Initialize 3D Carousel state\r\n update3DCarousel();\r\n\r\n \/\/ Multi-Directional Scroll Reveal & Progress Bar\r\n const scrollProgress = document.getElementById('scroll-progress');\r\n\r\n const handleScrollAnimations = () => {\r\n const winScroll = document.body.scrollTop || document.documentElement.scrollTop;\r\n const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\r\n const scrolled = (winScroll \/ height) * 100;\r\n if (scrollProgress) {\r\n scrollProgress.style.width = scrolled + '%';\r\n }\r\n\r\n const revealList = document.querySelectorAll('.reveal-left, .reveal-right, .reveal-bottom');\r\n revealList.forEach((el) => {\r\n const elementTop = el.getBoundingClientRect().top;\r\n const windowHeight = window.innerHeight;\r\n if (elementTop < windowHeight - 70) {\r\n el.classList.add('active');\r\n }\r\n });\r\n };\r\n\r\n window.addEventListener('scroll', handleScrollAnimations);\r\n window.addEventListener('load', handleScrollAnimations);\r\n handleScrollAnimations();\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>NANA \u2014 $NANA Black Cat Luxury Meme Token NANA About Gallery Tokenomics Join Us Buy $NANA NANA Ticker: $NANA A black cat with a grumpy face\u2014slacking off, yet exuding pure luxury. Sitting back, sharp gaze, ready to hold the line. 0x000000000000000000000000000000000000pump COPY CA Join Telegram Follow Twitter \/ X ABOUT 01 \/ CHARACTER AURA Chill […]<\/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:\/\/blacknana.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blacknana.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blacknana.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blacknana.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blacknana.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":19,"href":"https:\/\/blacknana.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/blacknana.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/blacknana.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}