{"id":8,"date":"2026-04-26T20:40:45","date_gmt":"2026-04-26T20:40:45","guid":{"rendered":"https:\/\/thenib.fun\/?page_id=8"},"modified":"2026-04-27T07:10:05","modified_gmt":"2026-04-27T07:10:05","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/thenib.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f16da7 e-con-full e-flex e-con e-parent\" data-id=\"0f16da7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd16ebf elementor-widget elementor-widget-html\" data-id=\"cd16ebf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<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=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* ==========================================================================\r\n   GLOBAL STYLES\r\n   ========================================================================== *\/\r\n:root {\r\n    --bg-color: #f0f4f8;\r\n    --text-main: #1a1e21;\r\n    --accent: #ffffff;\r\n    --font-heading: 'Fredoka', sans-serif;\r\n    --font-body: 'Nunito', sans-serif;\r\n}\r\n\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n    scroll-behavior: smooth;\r\n}\r\n\r\nbody, .nib-wrapper {\r\n    font-family: var(--font-body);\r\n    color: var(--text-main);\r\n    overflow-x: hidden;\r\n    background-color: var(--bg-color);\r\n    -webkit-font-smoothing: antialiased;\r\n    position: relative;\r\n}\r\n\r\n\/* Global Canvas for Seamless Floating Particles *\/\r\n#inkCanvas {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 1; \/* Di atas background, di bawah konten *\/\r\n    pointer-events: none;\r\n}\r\n\r\nh1, h2, h3, h4 {\r\n    font-family: var(--font-heading);\r\n    font-weight: 700;\r\n    line-height: 1.2;\r\n}\r\n\r\np {\r\n    line-height: 1.6;\r\n    font-size: 1.15rem;\r\n    font-weight: 600;\r\n    color: #4b5563;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n\/* ==========================================================================\r\n   PREMIUM CLAY-GLASS 3D BUTTONS\r\n   ========================================================================== *\/\r\n.btn-3d {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    background: rgba(255, 255, 255, 0.85);\r\n    backdrop-filter: blur(10px);\r\n    color: var(--text-main);\r\n    border: 2px solid rgba(255, 255, 255, 0.5);\r\n    padding: 16px 36px;\r\n    border-radius: 50px;\r\n    font-family: var(--font-heading);\r\n    font-size: 1.2rem;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n    box-shadow: \r\n        0 10px 20px rgba(0,0,0,0.08), \r\n        0 6px 0 #cbd5e1, \r\n        inset 0 -3px 5px rgba(0,0,0,0.05),\r\n        inset 0 3px 10px rgba(255,255,255,1);\r\n    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    user-select: none;\r\n    word-break: break-all;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.btn-3d:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: \r\n        0 15px 25px rgba(0,0,0,0.12), \r\n        0 9px 0 #cbd5e1, \r\n        inset 0 -3px 5px rgba(0,0,0,0.05),\r\n        inset 0 3px 10px rgba(255,255,255,1);\r\n}\r\n\r\n.btn-3d:active {\r\n    transform: translateY(6px);\r\n    box-shadow: \r\n        0 0px 0px rgba(0,0,0,0.1), \r\n        0 0px 0 #cbd5e1, \r\n        inset 0 4px 8px rgba(0,0,0,0.1);\r\n}\r\n\r\n.btn-3d.dark {\r\n    background: rgba(30, 34, 36, 0.9);\r\n    color: var(--accent);\r\n    border: 1px solid rgba(255,255,255,0.1);\r\n    box-shadow: \r\n        0 10px 20px rgba(0,0,0,0.2), \r\n        0 6px 0 #0f1214, \r\n        inset 0 -3px 5px rgba(0,0,0,0.3),\r\n        inset 0 3px 10px rgba(255,255,255,0.1);\r\n}\r\n\r\n.btn-3d.dark:hover {\r\n    box-shadow: \r\n        0 15px 25px rgba(0,0,0,0.25), \r\n        0 9px 0 #0f1214, \r\n        inset 0 -3px 5px rgba(0,0,0,0.3),\r\n        inset 0 3px 10px rgba(255,255,255,0.15);\r\n}\r\n\r\n\/* Glass-Clay Cards *\/\r\n.card-3d {\r\n    background: rgba(255, 255, 255, 0.65);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border-radius: 35px;\r\n    padding: 40px;\r\n    border: 2px solid rgba(255, 255, 255, 0.6);\r\n    box-shadow: \r\n        0 25px 50px rgba(0,0,0,0.05), \r\n        inset 0 2px 15px rgba(255,255,255,0.9), \r\n        inset 0 -4px 15px rgba(0,0,0,0.02);\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n\/* ==========================================================================\r\n   NAVBAR\r\n   ========================================================================== *\/\r\n.nib-nav {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    padding: 20px 5%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    z-index: 1000;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.nib-nav.scrolled {\r\n    background: rgba(255, 255, 255, 0.4);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    padding: 15px 5%;\r\n    box-shadow: 0 10px 40px rgba(0,0,0,0.05);\r\n    border-bottom: 1px solid rgba(255,255,255,0.5);\r\n}\r\n\r\n.nav-logo {\r\n    font-family: var(--font-heading);\r\n    font-size: 2.8rem;\r\n    font-weight: 700;\r\n    color: var(--accent);\r\n    text-shadow: 0 4px 15px rgba(0,0,0,0.4);\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.nib-nav.scrolled .nav-logo {\r\n    color: var(--text-main);\r\n    text-shadow: 0 2px 5px rgba(255,255,255,0.8);\r\n}\r\n\r\n.burger-menu {\r\n    display: block;\r\n    font-family: var(--font-heading);\r\n    font-weight: 600;\r\n    font-size: 1.2rem;\r\n    cursor: pointer;\r\n    background: rgba(255, 255, 255, 0.9);\r\n    backdrop-filter: blur(10px);\r\n    color: var(--text-main);\r\n    border-radius: 20px;\r\n    padding: 12px 24px;\r\n    box-shadow: 0 6px 15px rgba(0,0,0,0.1), 0 4px 0 #cbd5e1;\r\n    transition: all 0.15s;\r\n    user-select: none;\r\n    border: 1px solid rgba(255,255,255,0.5);\r\n}\r\n\r\n.burger-menu:active {\r\n    transform: translateY(4px);\r\n    box-shadow: 0 0px 0px rgba(0,0,0,0.1), 0 0px 0 #cbd5e1;\r\n}\r\n\r\n.nav-links {\r\n    position: absolute;\r\n    top: 90px;\r\n    right: 5%;\r\n    background: rgba(255, 255, 255, 0.85);\r\n    backdrop-filter: blur(25px);\r\n    border-radius: 30px;\r\n    padding: 25px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n    box-shadow: 0 30px 60px rgba(0,0,0,0.15);\r\n    border: 1px solid rgba(255,255,255,0.6);\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateY(-20px) scale(0.95);\r\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    min-width: 220px;\r\n}\r\n\r\n.nav-links.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n    transform: translateY(0) scale(1);\r\n}\r\n\r\n\/* ==========================================================================\r\n   SECTIONS LAYOUT\r\n   ========================================================================== *\/\r\n.section {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 120px 5%;\r\n    background-size: cover;\r\n    background-position: center;\r\n    \/* Efek Parallax default untuk gambar statis (bisa di-override per section) *\/\r\n    background-attachment: fixed;\r\n    z-index: 2;\r\n}\r\n\r\n\/* --- HERO SECTION --- *\/\r\n.hero-section {\r\n    align-items: flex-end;\r\n    padding-bottom: 10vh;\r\n    background: transparent;\r\n}\r\n\r\n.video-bg-wrapper {\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    z-index: 0;\r\n}\r\n\r\n.video-bg-wrapper video {\r\n    width: 100%; height: 100%; object-fit: cover;\r\n}\r\n\r\n\r\n.hero-content {\r\n    position: relative;\r\n    z-index: 5;\r\n    text-align: center;\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.hero-content h1 {\r\n    font-size: clamp(3.5rem, 7vw, 6rem);\r\n    color: var(--accent);\r\n    margin-bottom: 20px;\r\n    text-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n    letter-spacing: -1px;\r\n}\r\n\r\n.hero-content p {\r\n    color: rgba(255,255,255,0.95);\r\n    font-size: 1.4rem;\r\n    margin-bottom: 50px;\r\n    text-shadow: 0 5px 15px rgba(0,0,0,0.6);\r\n}\r\n\r\n#copyBtn {\r\n    max-width: 100%;\r\n    font-size: clamp(0.9rem, 2.5vw, 1.2rem);\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\/* --- SPLIT CONTAINERS --- *\/\r\n.split-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    gap: 80px;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.split-content {\r\n    flex: 1;\r\n}\r\n\r\n.split-content h2 {\r\n    font-size: clamp(2.8rem, 4.5vw, 4rem);\r\n    margin-bottom: 30px;\r\n    color: var(--text-main);\r\n}\r\n\r\n.split-image {\r\n    flex: 1;\r\n    text-align: center;\r\n    position: relative;\r\n}\r\n\r\n\/* Floating Animation Premium *\/\r\n.split-image img {\r\n    max-width: 100%;\r\n    height: auto;\r\n    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.15));\r\n    animation: floatPremium 8s ease-in-out infinite;\r\n}\r\n\r\n\/* --- CONCEPT SECTION --- *\/\r\n.concept-section {\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    \/* BG ikut scroll (tidak fixed) *\/\r\n    background-attachment: scroll; \r\n}\r\n\r\n.concept-title {\r\n    text-align: center;\r\n    font-size: clamp(3.5rem, 6vw, 5rem);\r\n    margin-bottom: 10vh;\r\n    z-index: 5;\r\n    color: var(--text-main);\r\n    text-transform: uppercase;\r\n}\r\n\r\n.concept-layout {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    max-width: 1300px;\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.concept-card {\r\n    width: 30%;\r\n    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n}\r\n\r\n.concept-card:hover {\r\n    transform: translateY(-15px) scale(1.02);\r\n    box-shadow: \r\n        0 40px 60px rgba(0,0,0,0.08), \r\n        inset 0 2px 15px rgba(255,255,255,1), \r\n        inset 0 -4px 15px rgba(0,0,0,0.02);\r\n}\r\n\r\n.concept-card h3 {\r\n    font-size: 2rem;\r\n    margin-bottom: 15px;\r\n    color: var(--text-main);\r\n}\r\n\r\n.concept-center-img {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 35%;\r\n    max-width: 450px;\r\n    filter: drop-shadow(0 40px 50px rgba(0,0,0,0.25));\r\n    z-index: 6;\r\n    animation: pulseFloat 6s ease-in-out infinite;\r\n}\r\n\r\n\/* --- TOKENOMICS GRID --- *\/\r\n.toke-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 24px;\r\n}\r\n\r\n.toke-item {\r\n    text-align: center;\r\n    font-family: var(--font-heading);\r\n    font-size: 1.4rem;\r\n    font-weight: 700;\r\n    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 35px 20px;\r\n}\r\n\r\n.toke-item:hover {\r\n    transform: translateY(-8px) scale(1.03);\r\n}\r\n\r\n\/* --- JOIN COMMUNITY SECTION --- *\/\r\n.join-section {\r\n    align-items: center;\r\n    padding-bottom: 150px;\r\n    \/* BG ikut scroll (tidak fixed) *\/\r\n    background-attachment: scroll; \r\n}\r\n\r\n.join-content {\r\n    text-align: center;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.join-content h2 {\r\n    font-size: clamp(3rem, 5vw, 4rem);\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.join-content p {\r\n    font-size: 1.3rem;\r\n    margin-bottom: 40px;\r\n}\r\n\r\n\/* --- FOOTER --- *\/\r\n.nib-footer {\r\n    background: var(--text-main);\r\n    color: var(--accent);\r\n    text-align: center;\r\n    padding: 100px 20px 50px;\r\n    border-top-left-radius: 60px;\r\n    border-top-right-radius: 60px;\r\n    margin-top: -80px;\r\n    position: relative;\r\n    z-index: 10;\r\n    box-shadow: 0 -20px 50px rgba(0,0,0,0.1);\r\n}\r\n\r\n.nib-footer h2 {\r\n    font-size: 2.5rem;\r\n    margin-bottom: 40px;\r\n}\r\n\r\n.footer-links {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    margin-bottom: 50px;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.footer-links a {\r\n    color: var(--accent);\r\n    text-decoration: none;\r\n    font-family: var(--font-heading);\r\n    font-weight: 600;\r\n    font-size: 1.2rem;\r\n    transition: all 0.3s ease;\r\n    background: rgba(255,255,255,0.05);\r\n    padding: 12px 30px;\r\n    border-radius: 50px;\r\n    border: 1px solid rgba(255,255,255,0.1);\r\n}\r\n\r\n.footer-links a:hover {\r\n    background: rgba(255,255,255,0.15);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n\/* ==========================================================================\r\n   UTILITIES & ANIMATIONS\r\n   ========================================================================== *\/\r\n.reveal {\r\n    opacity: 0;\r\n    transform: translateY(50px) scale(0.95);\r\n    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);\r\n}\r\n\r\n.reveal.active {\r\n    opacity: 1;\r\n    transform: translateY(0) scale(1);\r\n}\r\n\r\n@keyframes floatPremium {\r\n    0% { transform: translateY(0px) rotate(0deg); }\r\n    50% { transform: translateY(-25px) rotate(2deg); }\r\n    100% { transform: translateY(0px) rotate(0deg); }\r\n}\r\n\r\n@keyframes pulseFloat {\r\n    0% { transform: translate(-50%, -50%) scale(1); }\r\n    50% { transform: translate(-50%, -52%) scale(1.03); }\r\n    100% { transform: translate(-50%, -50%) scale(1); }\r\n}\r\n\r\n\/* Toast *\/\r\n#toast {\r\n    visibility: hidden;\r\n    min-width: 250px;\r\n    background: linear-gradient(145deg, #10b981, #059669);\r\n    color: #fff;\r\n    text-align: center;\r\n    border-radius: 50px;\r\n    padding: 18px 40px;\r\n    position: fixed;\r\n    z-index: 9999;\r\n    left: 50%;\r\n    bottom: 40px;\r\n    transform: translateX(-50%);\r\n    font-family: var(--font-heading);\r\n    font-weight: 700;\r\n    font-size: 1.2rem;\r\n    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4);\r\n    border: 2px solid rgba(255,255,255,0.2);\r\n}\r\n\r\n#toast.show {\r\n    visibility: visible;\r\n    animation: fadein 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), fadeout 0.5s 2.5s forwards;\r\n}\r\n\r\n@keyframes fadein {\r\n    from {bottom: 0; opacity: 0; transform: translate(-50%, 30px) scale(0.8);}\r\n    to {bottom: 40px; opacity: 1; transform: translate(-50%, 0) scale(1);}\r\n}\r\n\r\n@keyframes fadeout {\r\n    from {opacity: 1; transform: translate(-50%, 0) scale(1);}\r\n    to {opacity: 0; transform: translate(-50%, -20px) scale(0.9);}\r\n}\r\n\r\n\/* Mobile Responsiveness *\/\r\n@media screen and (max-width: 1024px) {\r\n    .split-container, .concept-layout {\r\n        flex-direction: column;\r\n        text-align: center;\r\n        gap: 50px;\r\n    }\r\n    .split-image img {\r\n        width: 85%;\r\n    }\r\n    .concept-card {\r\n        width: 100%;\r\n        margin-bottom: 20px;\r\n    }\r\n    .concept-center-img {\r\n        position: relative;\r\n        left: auto;\r\n        top: auto;\r\n        transform: none;\r\n        width: 75%;\r\n        display: block;\r\n        margin: 20px auto 40px auto;\r\n        animation: floatPremium 6s ease-in-out infinite;\r\n    }\r\n    .nib-nav {\r\n        padding: 15px 5%;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"nib-wrapper\">\r\n\r\n    <canvas id=\"inkCanvas\"><\/canvas>\r\n\r\n    <nav class=\"nib-nav\" id=\"navbar\">\r\n        <div class=\"nav-logo\">$NIB<\/div>\r\n        <div class=\"burger-menu\" onclick=\"toggleMenu()\">\u2630 MENU<\/div>\r\n        <div class=\"nav-links\" id=\"navLinks\">\r\n            <a href=\"https:\/\/x.com\/thenibink\" class=\"btn-3d\">Twitter<\/a>\r\n            <a href=\"https:\/\/t.me\/thenibink\" class=\"btn-3d\">Telegram<\/a>\r\n            <a href=\"https:\/\/dexscreener.com\/solana\/m6xrWnCfyXLnoT6TrW4CnvkM371Eq3rjhH2z3aHpump\" class=\"btn-3d dark\">Chart<\/a>\r\n            <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=m6xrWnCfyXLnoT6TrW4CnvkM371Eq3rjhH2z3aHpump\" class=\"btn-3d dark\">Swap<\/a>\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <section class=\"section hero-section\">\r\n        <div class=\"video-bg-wrapper\">\r\n            <div class=\"video-overlay\"><\/div>\r\n            <video autoplay loop muted playsinline>\r\n                <source src=\"https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/NIB-BG.mp4\" type=\"video\/mp4\">\r\n            <\/video>\r\n        <\/div>\r\n        <div class=\"hero-content reveal\">\r\n            <h1>Before the line, there was the nib.<\/h1>\r\n            <p>Every character begins somewhere. Before form, before identity\u2026 there was the point where it all started.<\/p>\r\n            <div class=\"button-group\">\r\n                <button class=\"btn-3d\" id=\"copyBtn\" onclick=\"copyCA()\">\r\n                    m6xrWnCfyXLnoT6TrW4CnvkM371Eq3rjhH2z3aHpump<span style=\"font-size: 1.4rem;\">\ud83d\udccb<\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"section\" style=\"background-image: url('https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-4.png');\">\r\n        <div class=\"split-container\">\r\n            <div class=\"split-content reveal\">\r\n                <h2>THE BLANK PAGE<\/h2>\r\n                <p>Every legend, every icon, and every character you\u2019ve ever seen started the exact same way. A blank canvas. A moment of hesitation. And the first touch of ink.<\/p>\r\n                <p>$NIB is that exact moment. It is the universal truth behind every masterpiece and every chaotic scribble. Before the lines were clean, before the history was written, the nib was there.<\/p>\r\n            <\/div>\r\n            <div class=\"split-image reveal\">\r\n                <img decoding=\"async\" src=\"https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-7.png\" alt=\"Nib Asset 1\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"section concept-section\" style=\"background-image: url('https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-5.png');\">\r\n        <h2 class=\"concept-title reveal\">IT STARTS HERE<\/h2>\r\n        \r\n        <div class=\"concept-layout\">\r\n            <div class=\"concept-card card-3d reveal\">\r\n                <h3>No Forced Lore<\/h3>\r\n                <p>No fabricated history. Just raw, early sketch energy. $NIB is the origin of the stroke\u2014the universal starting point for everything that follows.<\/p>\r\n            <\/div>\r\n            \r\n            <img decoding=\"async\" src=\"https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-8.png\" alt=\"Center Asset\" class=\"concept-center-img reveal\">\r\n            \r\n            <div class=\"concept-card card-3d reveal\">\r\n                <h3>The First Stroke<\/h3>\r\n                <p>Whether it's a masterpiece or a mistake, the first line matters. $NIB represents the chaotic potential of the empty page.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"section\" style=\"background-image: url('https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-4.png');\">\r\n        <div class=\"split-container\">\r\n            <div class=\"split-image reveal\">\r\n                <img decoding=\"async\" src=\"https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-9.png\" alt=\"Tokenomics Asset\">\r\n            <\/div>\r\n            <div class=\"split-content reveal\">\r\n                <h2 style=\"margin-bottom: 40px; text-align: center;\">TOKENOMICS<\/h2>\r\n                <div class=\"toke-grid\">\r\n                    <div class=\"toke-item card-3d\">1 Billion Supply<\/div>\r\n                    <div class=\"toke-item card-3d\">Zero Tax<\/div>\r\n                    <div class=\"toke-item card-3d\">Burned LP<\/div>\r\n                    <div class=\"toke-item card-3d\">Solana Chain<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"section join-section\" style=\"background-image: url('https:\/\/thenib.fun\/wp-content\/uploads\/2026\/04\/Asset-6.png');\">\r\n        <div class=\"join-content card-3d reveal\">\r\n            <h2>THE INK IS DRYING<\/h2>\r\n            <p>Don't just watch the canvas. Be the first line. Join the $NIB community for the latest creations, chaos, and alpha.<\/p>\r\n            <br>\r\n            <a href=\"https:\/\/x.com\/thenibink\" class=\"btn-3d dark\" style=\"padding: 20px 50px; font-size: 1.4rem;\">JOIN THE COMMUNITY<\/a>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <footer class=\"nib-footer\">\r\n        <h2>The beginning of everything.<\/h2>\r\n        <div class=\"footer-links\">\r\n            <a href=\"https:\/\/x.com\/thenibink\">Twitter \/ X<\/a>\r\n            <a href=\"https:\/\/t.me\/thenibink\">Telegram<\/a>\r\n            <a href=\"https:\/\/dexscreener.com\/solana\/m6xrWnCfyXLnoT6TrW4CnvkM371Eq3rjhH2z3aHpump\">DexScreener<\/a>\r\n        <\/div>\r\n        <p style=\"color: rgba(255,255,255,0.6); font-size: 1rem;\">\u00a9 2026 $NIB. The First Ink.<\/p>\r\n    <\/footer>\r\n\r\n    <div id=\"toast\">Contract Address Copied! \u2713<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Toggle Burger Menu\r\n    function toggleMenu() {\r\n        var menu = document.getElementById(\"navLinks\");\r\n        menu.classList.toggle(\"active\");\r\n    }\r\n\r\n    document.addEventListener('click', function(event) {\r\n        var menu = document.getElementById(\"navLinks\");\r\n        var burger = document.querySelector(\".burger-menu\");\r\n        if (!menu.contains(event.target) && !burger.contains(event.target)) {\r\n            menu.classList.remove(\"active\");\r\n        }\r\n    });\r\n\r\n    \/\/ Scroll Effect Navbar\r\n    window.addEventListener('scroll', function() {\r\n        var navbar = document.getElementById('navbar');\r\n        if (window.scrollY > 50) {\r\n            navbar.classList.add('scrolled');\r\n        } else {\r\n            navbar.classList.remove('scrolled');\r\n        }\r\n    });\r\n\r\n    \/\/ Premium Scroll Reveal Animation\r\n    function reveal() {\r\n        var reveals = document.querySelectorAll(\".reveal\");\r\n        for (var i = 0; i < reveals.length; i++) {\r\n            var windowHeight = window.innerHeight;\r\n            var elementTop = reveals[i].getBoundingClientRect().top;\r\n            var elementVisible = 150;\r\n            if (elementTop < windowHeight - elementVisible) {\r\n                reveals[i].classList.add(\"active\");\r\n            }\r\n        }\r\n    }\r\n    window.addEventListener(\"scroll\", reveal);\r\n    reveal(); \r\n\r\n    \/\/ Copy CA Logic\r\n    function copyCA() {\r\n        var contractAddress = \"m6xrWnCfyXLnoT6TrW4CnvkM371Eq3rjhH2z3aHpump\"; \r\n        \r\n        navigator.clipboard.writeText(contractAddress).then(function() {\r\n            var btn = document.getElementById(\"copyBtn\");\r\n            var originalHTML = btn.innerHTML;\r\n            var toast = document.getElementById(\"toast\");\r\n            \r\n            btn.innerHTML = \"COPIED TO CLIPBOARD! <span style='font-size: 1.4rem;'>\u2705<\/span>\";\r\n            toast.className = \"show\";\r\n            \r\n            setTimeout(function() {\r\n                btn.innerHTML = originalHTML;\r\n                toast.className = toast.className.replace(\"show\", \"\");\r\n            }, 2500);\r\n        }).catch(function(err) {\r\n            console.error('Failed to copy: ', err);\r\n        });\r\n    }\r\n\r\n    \/\/ ==========================================\r\n    \/\/ SEAMLESS INK PARTICLE BACKGROUND SYSTEM\r\n    \/\/ ==========================================\r\n    const canvas = document.getElementById('inkCanvas');\r\n    const ctx = canvas.getContext('2d');\r\n    let particlesArray = [];\r\n\r\n    function initCanvas() {\r\n        canvas.width = window.innerWidth;\r\n        canvas.height = window.innerHeight;\r\n    }\r\n    window.addEventListener('resize', initCanvas);\r\n    initCanvas();\r\n\r\n    class Particle {\r\n        constructor() {\r\n            this.x = Math.random() * canvas.width;\r\n            this.y = Math.random() * canvas.height;\r\n            this.size = Math.random() * 8 + 2; \/\/ Ukuran tetesan tinta\r\n            this.speedY = (Math.random() * 0.5) - 1; \/\/ Melayang ke atas lambat\r\n            this.speedX = (Math.random() * 0.4) - 0.2;\r\n            this.opacity = Math.random() * 0.15; \/\/ Sangat subtle agar tidak mengganggu\r\n        }\r\n        update() {\r\n            this.y += this.speedY;\r\n            this.x += this.speedX;\r\n            if (this.size > 0.2) this.size -= 0.01; \/\/ Perlahan mengecil\r\n            \r\n            \/\/ Reset jika keluar layar atau terlalu kecil\r\n            if (this.y < 0 || this.size <= 0.2) {\r\n                this.y = canvas.height + 10;\r\n                this.x = Math.random() * canvas.width;\r\n                this.size = Math.random() * 8 + 2;\r\n            }\r\n        }\r\n        draw() {\r\n            ctx.fillStyle = `rgba(10, 10, 10, ${this.opacity})`;\r\n            ctx.beginPath();\r\n            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n            ctx.fill();\r\n        }\r\n    }\r\n\r\n    function initParticles() {\r\n        particlesArray = [];\r\n        let numberOfParticles = (canvas.width * canvas.height) \/ 15000;\r\n        for (let i = 0; i < numberOfParticles; i++) {\r\n            particlesArray.push(new Particle());\r\n        }\r\n    }\r\n\r\n    function animateParticles() {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        for (let i = 0; i < particlesArray.length; i++) {\r\n            particlesArray[i].update();\r\n            particlesArray[i].draw();\r\n        }\r\n        requestAnimationFrame(animateParticles);\r\n    }\r\n\r\n    initParticles();\r\n    animateParticles();\r\n<\/script>\t\t<\/div>\n\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>$NIB \u2630 MENU Twitter Telegram Chart Swap Before the line, there was the nib. Every character begins somewhere. Before form, before identity\u2026 there was the point where it all started. m6xrWnCfyXLnoT6TrW4CnvkM371Eq3rjhH2z3aHpump\ud83d\udccb THE BLANK PAGE Every legend, every icon, and every character you\u2019ve ever seen started the exact same way. A blank canvas. A moment of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":19,"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/thenib.fun\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}