{"id":8,"date":"2026-06-06T16:54:11","date_gmt":"2026-06-06T16:54:11","guid":{"rendered":"https:\/\/thebeard.lol\/?page_id=8"},"modified":"2026-06-09T04:46:17","modified_gmt":"2026-06-09T04:46:17","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/thebeard.lol\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n BEARD CLUB ($BEARD)<\/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=Bagel+Fat+One&family=Patrick+Hand&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* Base & Reset *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n font-family: 'Patrick Hand', cursive;\r\n color: #f7f4eb;\r\n overflow-x: hidden;\r\n background-color: #1a120e;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* Fullscreen Video Background *\/\r\n .video-bg {\r\n position: fixed;\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: -2;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Diperbarui: Overlay dibuat jauh lebih terang agar video di belakang terlihat jelas *\/\r\n .video-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, rgba(14, 10, 8, 0.45) 30%, rgba(8, 6, 5, 0.3) 100%);\r\n z-index: -1;\r\n }\r\n\r\n \/* Typography & Text Shadows *\/\r\n h1, h2, h3, h4 {\r\n font-family: 'Bagel Fat One', cursive;\r\n font-weight: normal;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n p, li, td, th, span {\r\n font-family: 'Patrick Hand', cursive;\r\n font-size: 1.4rem;\r\n color: #f7f4eb;\r\n text-shadow: 2px 2px 0px #000, -1.5px -1.5px 0px #000, 1.5px -1.5px 0px #000, -1.5px 1.5px 0px #000;\r\n line-height: 1.4;\r\n }\r\n\r\n \/* Animation: Smooth Floating Title *\/\r\n @keyframes smoothFloat {\r\n 0% { transform: translateY(0px); }\r\n 50% { transform: translateY(-6px); }\r\n 100% { transform: translateY(0px); }\r\n }\r\n\r\n \/* Golden Soft Gradient Title with Floating Effect *\/\r\n .animated-title {\r\n background: linear-gradient(180deg, #ffe082 0%, #ffb300 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n filter: drop-shadow(4px 4px 0px #130d0a);\r\n animation: smoothFloat 4s ease-in-out infinite;\r\n display: inline-block;\r\n }\r\n\r\n \/* Premium Comic UI Box *\/\r\n .cartoon-box {\r\n background: rgba(35, 25, 20, 0.95); \/* Sedikit transparan agar menyatu dengan BG terang *\/\r\n border: 4px solid #130d0a;\r\n border-radius: 24px;\r\n box-shadow: 8px 8px 0px #130d0a;\r\n }\r\n\r\n \/* Unified Creative Button Styling *\/\r\n .cartoon-btn {\r\n font-family: 'Bagel Fat One', cursive;\r\n font-weight: normal;\r\n font-size: 1.05rem;\r\n color: #f7f4eb;\r\n text-decoration: none;\r\n padding: 12px 22px;\r\n border: 3.5px solid #130d0a;\r\n border-radius: 16px;\r\n box-shadow: 4px 4px 0px #130d0a;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n text-transform: uppercase;\r\n text-shadow: 2px 2px 0px #130d0a;\r\n transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, filter 0.2s ease;\r\n }\r\n\r\n \/* Serasi Color Theme *\/\r\n .btn-nav-theme {\r\n background: linear-gradient(180deg, #5c7480 0%, #3e525c 100%);\r\n }\r\n\r\n .btn-social-theme {\r\n background: linear-gradient(180deg, #e0a943 0%, #b88223 100%);\r\n }\r\n\r\n \/* Advanced Cartoon Hover Effects *\/\r\n .cartoon-btn:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 7px 7px 0px #130d0a;\r\n filter: brightness(1.1);\r\n }\r\n\r\n \/* Subtle reflection sheen on hover *\/\r\n .cartoon-btn::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -60%;\r\n width: 30%;\r\n height: 200%;\r\n background: rgba(255, 255, 255, 0.15);\r\n transform: rotate(30deg);\r\n transition: none;\r\n }\r\n\r\n .cartoon-btn:hover::after {\r\n left: 140%;\r\n transition: left 0.5s ease-in-out;\r\n }\r\n\r\n .cartoon-btn:active {\r\n transform: translate(3px, 3px);\r\n box-shadow: 1px 1px 0px #130d0a;\r\n }\r\n\r\n \/* Top Bar Header Menu Alignment *\/\r\n header {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 30px 20px 10px 20px;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .top-nav {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 14px;\r\n width: 100%;\r\n max-width: 580px;\r\n }\r\n\r\n \/* Hero Split Grid Layout *\/\r\n .hero-section {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n min-height: calc(100vh - 100px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px 30px 60px 30px;\r\n gap: 40px;\r\n }\r\n\r\n \/* Left Side Profile Content *\/\r\n .content-left {\r\n text-align: left;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .content-left h1 {\r\n font-size: 4rem;\r\n margin-bottom: 5px;\r\n line-height: 1.1;\r\n }\r\n\r\n .tagline {\r\n font-size: 1.6rem;\r\n color: #ffe082;\r\n margin-bottom: 20px;\r\n text-transform: uppercase;\r\n font-family: 'Bagel Fat One', cursive;\r\n text-shadow: 2px 2px 0px #130d0a;\r\n }\r\n\r\n .description {\r\n font-size: 1.45rem;\r\n margin-bottom: 25px;\r\n color: #f7f4eb;\r\n max-width: 580px;\r\n }\r\n\r\n \/* Contract Copy Box *\/\r\n .ca-container {\r\n display: flex;\r\n background: #130d0a;\r\n border: 3px solid #130d0a;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n margin-bottom: 25px;\r\n max-width: 480px;\r\n box-shadow: 4px 4px 0px #130d0a;\r\n }\r\n\r\n .ca-text {\r\n flex: 1;\r\n padding: 12px 16px;\r\n font-size: 1.05rem;\r\n color: #a7ffeb;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n align-self: center;\r\n font-family: monospace;\r\n }\r\n\r\n .ca-btn {\r\n background: #ffb300;\r\n color: #130d0a;\r\n border: none;\r\n border-left: 3px solid #130d0a;\r\n padding: 0 22px;\r\n font-family: 'Bagel Fat One', cursive;\r\n cursor: pointer;\r\n font-size: 0.95rem;\r\n text-transform: uppercase;\r\n transition: background 0.2s, color 0.2s;\r\n }\r\n \r\n .ca-btn:hover {\r\n background: #ffee58;\r\n }\r\n\r\n \/* Utilities Bottom Grid *\/\r\n .social-row {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 14px;\r\n margin-top: 5px;\r\n max-width: 480px;\r\n }\r\n\r\n \/* Right Side Character Showcase with Manual Slide Controls *\/\r\n .showcase-right {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n\r\n \/* Outer Area holding Arrow Buttons and Showcase Graphics *\/\r\n .slider-display-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n max-width: 480px;\r\n position: relative;\r\n }\r\n\r\n .image-container {\r\n width: 320px;\r\n height: 320px;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .showcase-img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n position: absolute;\r\n opacity: 0;\r\n transform: scale(0.9) translateY(15px);\r\n transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n pointer-events: none;\r\n \/* Ultra cartoon outline on shape base PNG template *\/\r\n filter: drop-shadow(4px 0px 0px #130d0a) drop-shadow(-4px 0px 0px #130d0a) drop-shadow(0px 4px 0px #130d0a) drop-shadow(0px -4px 0px #130d0a) drop-shadow(6px 6px 0px rgba(0,0,0,0.4));\r\n transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;\r\n }\r\n\r\n .showcase-img.active {\r\n opacity: 1;\r\n transform: scale(1) translateY(0);\r\n pointer-events: auto;\r\n }\r\n\r\n \/* Hover Interaction Effects over Character Illustration Element *\/\r\n .image-container:hover .showcase-img.active {\r\n transform: scale(1.06) rotate(1deg);\r\n filter: drop-shadow(5px 0px 0px #130d0a) drop-shadow(-5px 0px 0px #130d0a) drop-shadow(0px 5px 0px #130d0a) drop-shadow(0px -5px 0px #130d0a) drop-shadow(12px 12px 0px rgba(0,0,0,0.5));\r\n }\r\n\r\n \/* New Styled Floating Sticker Label ($BEARD) in Corner *\/\r\n .ticker-badge {\r\n position: absolute;\r\n top: 5px;\r\n right: -15px;\r\n background: linear-gradient(180deg, #ffee58 0%, #ffb300 100%);\r\n color: #130d0a;\r\n font-family: 'Bagel Fat One', cursive;\r\n font-size: 1.1rem;\r\n padding: 6px 14px;\r\n border: 3.5px solid #130d0a;\r\n border-radius: 12px;\r\n box-shadow: 4px 4px 0px #130d0a;\r\n transform: rotate(14deg);\r\n z-index: 15;\r\n text-shadow: none;\r\n pointer-events: none;\r\n animation: smoothFloat 3.5s ease-in-out infinite alternate;\r\n }\r\n\r\n \/* Manual Vector Navigation Arrows Controls *\/\r\n .arrow-btn {\r\n background: #231914;\r\n color: #ffb300;\r\n border: 3.5px solid #130d0a;\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n user-select: none;\r\n box-shadow: 3px 3px 0px #130d0a;\r\n z-index: 10;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s;\r\n }\r\n\r\n .arrow-btn:hover {\r\n background: #33251e;\r\n color: #ffee58;\r\n transform: scale(1.05);\r\n }\r\n\r\n .arrow-btn:active {\r\n transform: translate(2px, 2px);\r\n box-shadow: 1px 1px 0px #130d0a;\r\n }\r\n\r\n .character-info-box {\r\n margin-top: 25px;\r\n text-align: center;\r\n min-height: 70px;\r\n max-width: 350px;\r\n }\r\n\r\n .character-info-box p {\r\n font-size: 1.25rem;\r\n color: #e2ded4;\r\n }\r\n\r\n \/* POP-UP MODAL WINDOW LAYOUT (WIDER & NO SCROLL) *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(10, 7, 5, 0.75); \/* Dibuat lebih soft transparan *\/\r\n z-index: 100;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 24px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n \/* Wider Window to allow landscape distribution without scroll *\/\r\n .modal-box {\r\n width: 100%;\r\n max-width: 780px; \r\n max-height: 90vh;\r\n overflow: hidden; \/* Prevent scrolling inside the box *\/\r\n padding: 40px 35px 35px 35px;\r\n position: relative;\r\n transform: scale(0.95) translateY(10px);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n text-align: left;\r\n }\r\n\r\n .modal-overlay.active .modal-box {\r\n transform: scale(1) translateY(0);\r\n }\r\n\r\n .modal-box h2 {\r\n font-size: 2.4rem;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n border-bottom: 4px solid #130d0a;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .close-modal {\r\n position: absolute;\r\n top: 10px;\r\n right: 18px;\r\n font-family: 'Bagel Fat One', cursive;\r\n font-size: 1.8rem;\r\n color: #ef5350;\r\n cursor: pointer;\r\n text-shadow: 2px 2px 0px #130d0a;\r\n user-select: none;\r\n transition: transform 0.2s;\r\n }\r\n \r\n .close-modal:hover {\r\n transform: scale(1.15) rotate(90deg);\r\n }\r\n\r\n \/* Tokenomics Grid Map inside Popups *\/\r\n .tokenomics-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .tok-item {\r\n display: flex;\r\n justify-content: space-between;\r\n background: #1c1410;\r\n border: 2.5px solid #130d0a;\r\n padding: 12px 18px;\r\n border-radius: 14px;\r\n box-shadow: 3px 3px 0px #130d0a;\r\n }\r\n .tok-item span:first-child { color: #a7ffeb; font-weight: bold; }\r\n\r\n blockquote {\r\n background: #130d0a;\r\n border-left: 6px solid #ffb300;\r\n padding: 12px 16px;\r\n margin-top: 18px;\r\n border-radius: 0 14px 14px 0;\r\n grid-column: span 2;\r\n }\r\n\r\n \/* Horizontal\/Grid Map distribution for Roadmap Phase without scrolling *\/\r\n .roadmap-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n }\r\n\r\n .roadmap-step {\r\n background: #1c1410;\r\n border: 3px solid #130d0a;\r\n padding: 16px;\r\n border-radius: 16px;\r\n box-shadow: 4px 4px 0px #130d0a;\r\n }\r\n .roadmap-step h4 { color: #ffb300; font-size: 1.15rem; margin-bottom: 6px; text-shadow: 1.5px 1.5px 0 #000; }\r\n .roadmap-step p { font-size: 1.1rem; }\r\n\r\n \/* Tablet & Desktop Responsive Layout Modifiers *\/\r\n @media(min-width: 768px) {\r\n header { padding-top: 40px; }\r\n .hero-section {\r\n flex-direction: row;\r\n justify-content: space-between;\r\n padding-left: 60px;\r\n padding-right: 60px;\r\n gap: 20px;\r\n }\r\n .content-left { width: 55%; }\r\n .showcase-right { width: 40%; }\r\n .image-container { width: 380px; height: 380px; }\r\n .content-left h1 { font-size: 5rem; }\r\n }\r\n\r\n \/* Mobile specific styling adjust to fit without layout breaks *\/\r\n @media(max-width: 767px) {\r\n .top-nav { gap: 8px; }\r\n .cartoon-btn { padding: 10px 12px; font-size: 0.95rem; border-width: 3px; }\r\n .content-left h1 { font-size: 3rem; text-align: center; }\r\n .tagline { text-align: center; font-size: 1.2rem; }\r\n .description { text-align: center; font-size: 1.25rem; }\r\n .ca-container { max-width: 100%; }\r\n .social-row { max-width: 100%; }\r\n .image-container { width: 230px; height: 230px; }\r\n .modal-box { overflow-y: auto; } \/* Fallback only for tight vertical heights on phone screens *\/\r\n .tokenomics-grid, .roadmap-grid { grid-template-columns: 1fr; }\r\n blockquote { grid-column: span 1; }\r\n .ticker-badge { top: -5px; right: 5px; font-size: 0.95rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Video Background Layer -->\r\n <video class=\"video-bg\" autoplay loop muted playsinline>\r\n <source src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/HERO-BEARD.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"video-overlay\"><\/div>\r\n\r\n <!-- RESPONSIVE HEADER BUTTON NAVIGATION -->\r\n <header>\r\n <nav class=\"top-nav\">\r\n <button class=\"cartoon-btn btn-nav-theme\" onclick=\"openModal('aboutModal')\">ABOUT<\/button>\r\n <button class=\"cartoon-btn btn-nav-theme\" onclick=\"openModal('tokModal')\">TOKEN<\/button>\r\n <button class=\"cartoon-btn btn-nav-theme\" onclick=\"openModal('roadModal')\">MAPS<\/button>\r\n <button class=\"cartoon-btn btn-nav-theme\" onclick=\"openModal('joinModal')\">JOIN<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n <!-- ASYMMETRIC CONTENT ROW SECTION -->\r\n <section class=\"hero-section\">\r\n \r\n <!-- LEFT TEXT ZONE (LEFT ALIGNED) -->\r\n <div class=\"content-left\">\r\n <h1 class=\"animated-title\">BEARD CLUB<\/h1>\r\n <div class=\"tagline\">Where Legends Grow Their Legacy.<\/div>\r\n \r\n <p class=\"description\">\r\n Welcome to the deck of <strong>$BEARD<\/strong>. We have gathered the internet\u2019s most iconic characters, given them the finest beards, dressed them in sharp attire, and set one absolute goal: to navigate the Web3 oceans with unmatched dignity and ironclad solidarity.\r\n <\/p>\r\n\r\n <!-- Copyable Secure Smart Contract Address Container -->\r\n <div class=\"ca-container\">\r\n <div class=\"ca-text\" id=\"caValue\">CA: FSAbJW8CoM1ifqcZ8CRyi1SoEwDwNNuX3sSLLH3Vpump<\/div>\r\n <button class=\"ca-btn\" onclick=\"copyCA()\">COPY<\/button>\r\n <\/div>\r\n\r\n <!-- Unified Theme Essential Socials Links -->\r\n <div class=\"social-row\">\r\n <a href=\"https:\/\/x.com\/thebeard_club\" target=\"_blank\" class=\"cartoon-btn btn-social-theme\">TWITTER<\/a>\r\n <a href=\"https:\/\/t.me\/the_beardclub\" target=\"_blank\" class=\"cartoon-btn btn-social-theme\">TELEGRAM<\/a>\r\n <a href=https:\/\/dexscreener.com\/solana\/FSAbJW8CoM1ifqcZ8CRyi1SoEwDwNNuX3sSLLH3Vpump#\" target=\"_blank\" class=\"cartoon-btn btn-social-theme\">DEXSCREENER<\/a>\r\n <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=FSAbJW8CoM1ifqcZ8CRyi1SoEwDwNNuX3sSLLH3Vpump\" target=\"_blank\" class=\"cartoon-btn btn-social-theme\" style=\"background: linear-gradient(180deg, #ffee58 0%, #fdd835 100%); color: #130d0a; text-shadow: none;\">SWAP NOW<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- RIGHT SHOWCASE ZONE (MANUAL AND AUTO INTERACTIVE GALLERY CAROUSEL) -->\r\n <div class=\"showcase-right\">\r\n <div class=\"slider-display-container\">\r\n <!-- Left Click Navigation Arrow -->\r\n <button class=\"arrow-btn\" onclick=\"prevSlide()\">\u25c0<\/button>\r\n \r\n <div class=\"image-container\">\r\n <!-- Smooth Slides Presentation Layer Aset -->\r\n <img decoding=\"async\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/beard-1-1.png\" alt=\"Pepe\" class=\"showcase-img active\">\r\n <img decoding=\"async\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/beard-2-1.png\" alt=\"Horse\" class=\"showcase-img\">\r\n <img decoding=\"async\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/beard-3-1.png\" alt=\"Wojak\" class=\"showcase-img\">\r\n <img decoding=\"async\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/beard-4-1.png\" alt=\"Penguin\" class=\"showcase-img\">\r\n <img decoding=\"async\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/beard-5-1.png\" alt=\"Doge\" class=\"showcase-img\">\r\n <img decoding=\"async\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/beard-6-1.png\" alt=\"Blue Host\" class=\"showcase-img\">\r\n \r\n <!-- Slanted Ticker Badge Label inside corner space -->\r\n <div class=\"ticker-badge\">$BEARD<\/div>\r\n <\/div>\r\n\r\n <!-- Right Click Navigation Arrow -->\r\n <button class=\"arrow-btn\" onclick=\"nextSlide()\">\u25b6<\/button>\r\n <\/div>\r\n \r\n <!-- Context Character Information Nodes -->\r\n <div class=\"character-info-box\">\r\n <p id=\"charDesc\">Gentleman \u2014 Transforms classic internet energy into a new symbol of honor, charisma, and elite status.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- UNIFIED FLAT INTERACTIVE POP-UP MODAL WINDOWS -->\r\n \r\n <!-- About Modal Overlay Layer -->\r\n <div class=\"modal-overlay\" id=\"aboutModal\" onclick=\"closeModal(event, 'aboutModal')\">\r\n <div class=\"modal-box cartoon-box\">\r\n <span class=\"close-modal\" onclick=\"document.getElementById('aboutModal').classList.remove('active')\">X<\/span>\r\n <h2 class=\"gradient-title\">THE LORE<\/h2>\r\n <p>In a world filled with fleeting trends and shallow hype, a beard stands as the ultimate symbol of maturity, resilience, and class.<\/p>\r\n <br>\r\n <p>The <strong>$BEARD<\/strong> crew members are not your average meme characters. They are captains, strategists, and visionaries gathered inside a classic wooden cabin to chart the future. While storms rage outside the porthole windows, peace and absolute confidence reign inside our lounge. We do not listen to the noise of the market; we focus entirely on our own compass of prosperity.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tokenomics Modal Overlay Layer -->\r\n <div class=\"modal-overlay\" id=\"tokModal\" onclick=\"closeModal(event, 'tokModal')\">\r\n <div class=\"modal-box cartoon-box\">\r\n <span class=\"close-modal\" onclick=\"document.getElementById('tokModal').classList.remove('active')\">X<\/span>\r\n <h2 class=\"gradient-title\">TOKENOMICS<\/h2>\r\n <div class=\"tokenomics-grid\">\r\n <div class=\"tok-item\"><span>TICKER:<\/span><span>$BEARD<\/span><\/div>\r\n <div class=\"tok-item\"><span>TOTAL SUPPLY:<\/span><span>1,000,000,000<\/span><\/div>\r\n <div class=\"tok-item\"><span>TAXES:<\/span><span>0% BUY \/ 0% SELL<\/span><\/div>\r\n <div class=\"tok-item\"><span>LIQUIDITY:<\/span><span>LOCKED & BURNED<\/span><\/div>\r\n <blockquote>\r\n <p style=\"color: #ffb300; font-size: 1.2rem; font-family: 'Bagel Fat One', cursive; text-shadow: 1.5px 1.5px 0 #000;\">CAPTAIN'S NOTE:<\/p>\r\n <p style=\"font-size: 1.25rem;\">We build on a foundation of absolute trust. No hidden mechanisms, no fine print. Everything is fair from the moment our anchor drops.<\/p>\r\n <\/blockquote>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Roadmap Modal Overlay Layer -->\r\n <div class=\"modal-overlay\" id=\"roadModal\" onclick=\"closeModal(event, 'roadModal')\">\r\n <div class=\"modal-box cartoon-box\">\r\n <span class=\"close-modal\" onclick=\"document.getElementById('roadModal').classList.remove('active')\">X<\/span>\r\n <h2 class=\"gradient-title\">ROADMAP<\/h2>\r\n <div class=\"roadmap-grid\">\r\n <div class=\"roadmap-step\">\r\n <h4>PHASE 1: Launch<\/h4>\r\n <p>\u2022 Token Launch.<br>\u2022 Community consolidation.<br>\u2022 Viral marketing boost.<\/p>\r\n <\/div>\r\n <div class=\"roadmap-step\">\r\n <h4>PHASE 2: Expansion<\/h4>\r\n <p>\u2022 Global tailored campaigns.<br>\u2022 CoinMarketCap Listings.<br>\u2022 Strategic partnerships.<\/p>\r\n <\/div>\r\n <div class=\"roadmap-step\">\r\n <h4>PHASE 3: Empire<\/h4>\r\n <p>\u2022 Premium merchandise setup.<br>\u2022 Major CEX listing entries.<br>\u2022 Exclusive Lounge gatherings.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Join Us Modal Overlay Layer -->\r\n <div class=\"modal-overlay\" id=\"joinModal\" onclick=\"closeModal(event, 'joinModal')\">\r\n <div class=\"modal-box cartoon-box\" style=\"text-align: center; max-width: 520px;\">\r\n <span class=\"close-modal\" onclick=\"document.getElementById('joinModal').classList.remove('active')\">X<\/span>\r\n <h2 class=\"gradient-title\">JOIN THE CLUB<\/h2>\r\n <p style=\"margin-bottom: 25px;\">Do not just watch from the shore as this ship sails toward ultimate success. Put on your finest suit, grow your beard of conviction, and join us inside the captain lounge right now!<\/p>\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 14px;\">\r\n <a href=\"#\" target=\"_blank\" class=\"cartoon-btn btn-social-theme\">TELEGRAM<\/a>\r\n <a href=\"#\" target=\"_blank\" class=\"cartoon-btn btn-social-theme\" style=\"background: linear-gradient(180deg, #ab47bc 0%, #8e24aa 100%);\">TWITTER X<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Interactive Logic Operations Scripts -->\r\n <script>\r\n \/\/ Copy Engine Tool Context Methods\r\n function copyCA() {\r\n const caText = \"FSAbJW8CoM1ifqcZ8CRyi1SoEwDwNNuX3sSLLH3Vpump\"; \r\n navigator.clipboard.writeText(caText).then(() => {\r\n const btn = document.querySelector('.ca-btn');\r\n btn.innerText = \"COPIED!\";\r\n btn.style.background = \"#a7ffeb\";\r\n btn.style.color = \"#130d0a\";\r\n setTimeout(() => {\r\n btn.innerText = \"COPY\";\r\n btn.style.background = \"#ffb300\";\r\n }, 2000);\r\n }).catch(err => {\r\n console.error('Action declined: ', err);\r\n });\r\n }\r\n\r\n \/\/ Modular Toggle Systems for Modals Trigger Windows\r\n function openModal(modalId) {\r\n document.getElementById(modalId).classList.add('active');\r\n }\r\n\r\n function closeModal(event, modalId) {\r\n if (event.target.classList.contains('modal-overlay')) {\r\n document.getElementById(modalId).classList.remove('active');\r\n }\r\n }\r\n\r\n \/\/ Fixed Character & Gallery Mapping Config (Perfect Order matching URL 1 to 6)\r\n const characters = [\r\n { desc: \"Gentleman Pepe \u2014 Transforms classic internet energy into a new symbol of honor, charisma, and elite status.\" },\r\n { desc: \"Casual Visionary \u2014 The mastermind behind the scenes who always knows exactly which way the wind is blowing.\" },\r\n { desc: \"The Commander \u2014 The rugged captain. Fearlessly steers the crew through the most extreme market storms.\" },\r\n { desc: \"Loyal Diplomat \u2014 The glue of the community, proving that a well-groomed beard instantly commands respect.\" },\r\n { desc: \"Executive Doge \u2014 Brings an aura of luxury, sharp corporate success, and financial wisdom to the table.\" },\r\n { desc: \"Elite Toast \u2014 Represents the celebratory spirit, endless victories, and positive vibes of our lounge.\" }\r\n ];\r\n\r\n const images = document.querySelectorAll('.showcase-img');\r\n const descEl = document.getElementById('charDesc');\r\n let currentIndex = 0;\r\n let slideTimer;\r\n\r\n \/\/ Core Update Function for Slide Rendering\r\n function updateSlide(newIndex) {\r\n images[currentIndex].classList.remove('active');\r\n currentIndex = newIndex;\r\n images[currentIndex].classList.add('active');\r\n \r\n \/\/ Render Text Details Update Content\r\n descEl.innerText = characters[currentIndex].desc;\r\n }\r\n\r\n \/\/ Arrow Action Commands\r\n function nextSlide() {\r\n let index = (currentIndex + 1) % images.length;\r\n updateSlide(index);\r\n resetTimer();\r\n }\r\n\r\n function prevSlide() {\r\n let index = (currentIndex - 1 + images.length) % images.length;\r\n updateSlide(index);\r\n resetTimer();\r\n }\r\n\r\n \/\/ Auto Rotation Timer Management\r\n function startTimer() {\r\n slideTimer = setInterval(() => {\r\n let index = (currentIndex + 1) % images.length;\r\n updateSlide(index);\r\n }, 3500);\r\n }\r\n\r\n function resetTimer() {\r\n clearInterval(slideTimer);\r\n startTimer();\r\n }\r\n\r\n \/\/ Initialize Loop Timer on Window Load\r\n startTimer();\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>BEARD CLUB ($BEARD) ABOUT TOKEN MAPS JOIN BEARD CLUB Where Legends Grow Their Legacy. Welcome to the deck of $BEARD. We have gathered the internet\u2019s most iconic characters, given them the finest beards, dressed them in sharp attire, and set one absolute goal: to navigate the Web3 oceans with unmatched dignity and ironclad solidarity. CA: […]<\/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:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thebeard.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":64,"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/thebeard.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}