{"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-06T19:53:52","modified_gmt":"2026-06-06T19:53:52","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 ($BEARD) - Official Website<\/title>\r\n <!-- Integration of Unbounded and Space Grotesk Fonts for Premium Typography Alignment -->\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=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@600;700;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Reset & Core Brutalist Styles *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n font-family: 'Space Grotesk', sans-serif;\r\n background-color: #060606;\r\n \/* Ultra-premium seamless monochrome CSS noise\/grain simulation texture *\/\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)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n color: #f5f5f5;\r\n line-height: 1.5;\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n \/* Full Screen Outer Interface Layout Container *\/\r\n .wrapper {\r\n border-bottom: 1px solid #262626;\r\n width: 100%;\r\n margin: 0 auto;\r\n background-color: transparent;\r\n position: relative;\r\n }\r\n\r\n \/* Top Bar Interface Navigation *\/\r\n .header-nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-bottom: 1px solid #262626;\r\n padding: 25px 4%;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n font-size: 13px;\r\n background-color: rgba(6, 6, 6, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .nav-logo {\r\n font-family: 'Unbounded', sans-serif;\r\n font-weight: 700;\r\n font-size: 20px;\r\n letter-spacing: -1px;\r\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n \r\n .nav-logo:hover {\r\n transform: scale(1.05);\r\n color: #00ff66;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 35px;\r\n font-weight: 500;\r\n }\r\n\r\n .nav-links a {\r\n color: #737373;\r\n cursor: pointer;\r\n transition: color 0.25s ease, letter-spacing 0.25s ease;\r\n position: relative;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background-color: #00ff66;\r\n transition: width 0.25s ease;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: #ffffff;\r\n letter-spacing: 3px;\r\n }\r\n \r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* Hero Split Grid - 2 Column Dynamic Setup stretched to maximum viewports *\/\r\n .main-split {\r\n display: flex;\r\n border-bottom: 1px solid #262626;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n }\r\n \r\n .left-column {\r\n flex: 1 1 50%;\r\n border-right: 1px solid #262626;\r\n padding: 6% 4%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n }\r\n\r\n .right-column {\r\n flex: 1 1 50%;\r\n padding: 6% 4%;\r\n background-color: #0b0b0b;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n\r\n \/* Typography Elements *\/\r\n .meta-tag {\r\n font-size: 12px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n color: #a3a3a3;\r\n margin-bottom: 30px;\r\n border-bottom: 1px dashed #262626;\r\n padding-bottom: 12px;\r\n display: inline-block;\r\n width: fit-content;\r\n }\r\n \r\n .meta-tag strong {\r\n color: #ffffff;\r\n }\r\n\r\n .title-container {\r\n display: block;\r\n margin-bottom: 25px;\r\n }\r\n\r\n h1 {\r\n font-family: 'Unbounded', sans-serif;\r\n font-weight: 900;\r\n font-size: 28px;\r\n line-height: 1.15;\r\n text-transform: uppercase;\r\n color: #ffffff;\r\n white-space: normal;\r\n overflow: visible;\r\n width: 100%;\r\n letter-spacing: -1px;\r\n }\r\n\r\n @media (min-width: 480px) { h1 { font-size: 36px; } }\r\n @media (min-width: 768px) { h1 { font-size: 44px; } }\r\n @media (min-width: 1200px) { h1 { font-size: 52px; } }\r\n\r\n .hero-tagline {\r\n font-size: 22px;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n color: #e5e5e5;\r\n margin-bottom: 25px;\r\n letter-spacing: 0.5px;\r\n line-height: 1.3;\r\n }\r\n\r\n .sub-headline {\r\n font-size: 16px;\r\n color: #a3a3a3;\r\n margin-bottom: 45px;\r\n line-height: 1.7;\r\n max-width: 580px;\r\n }\r\n\r\n \/* Premium Buttons Structure with Kinetic Hover Effects *\/\r\n .cta-container {\r\n display: flex;\r\n gap: 20px;\r\n margin-bottom: 45px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .btn-primary {\r\n font-family: 'Unbounded', sans-serif;\r\n background-color: #ffffff;\r\n color: #000000;\r\n padding: 18px 36px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n font-size: 12px;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n text-align: center;\r\n flex: 1 1 auto;\r\n border: 1px solid #ffffff;\r\n cursor: pointer;\r\n }\r\n\r\n .btn-primary:hover {\r\n background-color: #000000;\r\n color: #ffffff;\r\n border-color: #00ff66;\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(0, 255, 102, 0.15);\r\n }\r\n\r\n .btn-secondary {\r\n font-family: 'Unbounded', sans-serif;\r\n border: 1px solid #404040;\r\n color: #ffffff;\r\n padding: 17px 36px;\r\n text-transform: uppercase;\r\n font-size: 12px;\r\n letter-spacing: 0.5px;\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n text-align: center;\r\n flex: 1 1 auto;\r\n background: transparent;\r\n cursor: pointer;\r\n }\r\n\r\n .btn-secondary:hover {\r\n border-color: #ffffff;\r\n background: rgba(255,255,255,0.03);\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Copyable Contract Address Container *\/\r\n .ca-section {\r\n background: #121212;\r\n border: 1px solid #262626;\r\n padding: 24px;\r\n margin-top: 30px;\r\n width: 100%;\r\n transition: border-color 0.3s ease;\r\n }\r\n \r\n .ca-section:hover {\r\n border-color: #404040;\r\n }\r\n \r\n .ca-title {\r\n font-weight: 600;\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n color: #737373;\r\n margin-bottom: 12px;\r\n letter-spacing: 1.5px;\r\n }\r\n \r\n .ca-box {\r\n font-size: 12px;\r\n color: #00ff66;\r\n word-break: break-all;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 500;\r\n border: 1px dashed #404040;\r\n padding: 16px;\r\n background: #050505;\r\n position: relative;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n user-select: all;\r\n gap: 15px;\r\n transition: all 0.25s ease;\r\n }\r\n\r\n @media (min-width: 400px) { .ca-box { font-size: 14px; } }\r\n\r\n .ca-box:hover {\r\n border-color: #00ff66;\r\n background: #090909;\r\n box-shadow: inset 0 0 15px rgba(0,255,102,0.05);\r\n }\r\n\r\n .copy-badge {\r\n font-size: 11px;\r\n background: #171717;\r\n color: #a3a3a3;\r\n padding: 5px 12px;\r\n text-transform: uppercase;\r\n border: 1px solid #262626;\r\n flex-shrink: 0;\r\n transition: all 0.2s ease;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 600;\r\n }\r\n\r\n .ca-box:hover .copy-badge {\r\n color: #ffffff;\r\n border-color: #00ff66;\r\n background: rgba(0,255,102,0.1);\r\n }\r\n\r\n \/* Right HUD \/ Tactical Slider UI elements *\/\r\n .hud-header-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 30px;\r\n gap: 15px;\r\n }\r\n\r\n .hud-title {\r\n font-weight: 600;\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n color: #ffffff;\r\n border-left: 3px solid #00ff66;\r\n padding-left: 12px;\r\n line-height: 1.4;\r\n }\r\n\r\n .hud-eye-graphic {\r\n width: 55px;\r\n height: auto;\r\n opacity: 0.7;\r\n flex-shrink: 0;\r\n }\r\n\r\n .hud-display {\r\n border: 1px solid #262626;\r\n padding: 30px;\r\n text-align: center;\r\n position: relative;\r\n background: #050505;\r\n transition: border-color 0.3s ease;\r\n }\r\n \r\n .hud-display:hover {\r\n border-color: #404040;\r\n }\r\n\r\n .hud-corner-tl { position: absolute; top: 10px; left: 10px; border-top: 2px solid #525252; border-left: 2px solid #525252; width: 14px; height: 14px; transition: border-color 0.3s; }\r\n .hud-corner-br { position: absolute; bottom: 10px; right: 10px; border-bottom: 2px solid #525252; border-right: 2px solid #525252; width: 14px; height: 14px; transition: border-color 0.3s; }\r\n \r\n .hud-display:hover .hud-corner-tl { border-top-color: #00ff66; border-left-color: #00ff66; }\r\n .hud-display:hover .hud-corner-br { border-bottom-color: #00ff66; border-right-color: #00ff66; }\r\n\r\n \/* Premium Spacing and Margins for Image Carousel Frame *\/\r\n .gallery-preview-container {\r\n margin: 30px auto;\r\n padding: 20px;\r\n width: 100%;\r\n max-width: 290px;\r\n aspect-ratio: 1 \/ 1;\r\n height: auto;\r\n border: 1px solid #262626;\r\n background-color: #0d0d0d;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .hud-display:hover .gallery-preview-container {\r\n border-color: #00ff66;\r\n box-shadow: 0 0 20px rgba(0,255,102,0.03);\r\n }\r\n\r\n .gallery-preview-container img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n \r\n .hud-display:hover .gallery-preview-container img {\r\n transform: scale(1.06);\r\n }\r\n\r\n .carousel-controls {\r\n margin-top: 35px;\r\n font-size: 13px;\r\n letter-spacing: 1px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n\r\n @media (min-width: 450px) { .carousel-controls { flex-direction: row; } }\r\n \r\n .btn-arrow {\r\n padding: 12px 24px;\r\n border: 1px solid #262626;\r\n cursor: pointer;\r\n background: #121212;\r\n color: #ffffff;\r\n font-weight: 600;\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\r\n width: 100%;\r\n font-family: 'Space Grotesk', sans-serif;\r\n }\r\n\r\n @media (min-width: 450px) { .btn-arrow { width: auto; } }\r\n\r\n .btn-arrow:hover {\r\n background: #ffffff;\r\n color: #000000;\r\n border-color: #ffffff;\r\n }\r\n\r\n .carousel-counter {\r\n color: #737373;\r\n font-size: 13px;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n \/* Middle Horizon Tech Status Strip Bar *\/\r\n .status-bar {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n border-bottom: 1px solid #262626;\r\n font-size: 12px;\r\n color: #737373;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n padding: 18px 4%;\r\n background-color: #080808;\r\n font-weight: 500;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .status-bar {\r\n flex-direction: row;\r\n justify-content: space-between;\r\n gap: 0;\r\n }\r\n }\r\n\r\n \/* About & Philosophy Layout Block *\/\r\n .details-section {\r\n padding: 6% 4%;\r\n border-bottom: 1px solid #262626;\r\n }\r\n \r\n .quote-block {\r\n font-size: 24px;\r\n font-style: italic;\r\n color: #ffffff;\r\n margin-bottom: 30px;\r\n border-left: 3px solid #00ff66;\r\n padding-left: 24px;\r\n font-family: Georgia, serif;\r\n max-width: 800px;\r\n }\r\n\r\n @media (min-width: 768px) { .quote-block { font-size: 32px; } }\r\n\r\n .about-text {\r\n font-size: 17px;\r\n color: #a3a3a3;\r\n line-height: 1.8;\r\n max-width: 950px;\r\n }\r\n\r\n \/* Why Hold Header Container layout tag *\/\r\n .utility-header {\r\n font-family: 'Unbounded', sans-serif;\r\n padding: 5% 4% 0 4%; \r\n font-size: 20px; \r\n font-weight: 700; \r\n letter-spacing: 0.5px; \r\n color: #ffffff;\r\n text-transform: uppercase;\r\n }\r\n \r\n @media (min-width: 768px) { .utility-header { font-size: 24px; } }\r\n\r\n \/* 3-Column Ecosystem Utility Feature Framework with Premium Hover Transitions *\/\r\n .utility-grid {\r\n display: flex;\r\n border-bottom: 1px solid #262626;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .utility-col {\r\n flex: 1 1 300px;\r\n padding: 5% 4%;\r\n border-bottom: 1px solid #262626;\r\n transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r\n background-color: transparent;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .utility-col {\r\n border-bottom: none;\r\n border-right: 1px solid #262626;\r\n }\r\n .utility-col:last-child {\r\n border-right: none;\r\n }\r\n }\r\n \r\n \/* Interactive Invert Color Transform Hover Animation (3D Shifting Effect) *\/\r\n .utility-col:hover {\r\n background-color: #ffffff;\r\n color: #000000;\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 30px rgba(0,0,0,0.5);\r\n }\r\n \r\n .ut-title {\r\n font-family: 'Unbounded', sans-serif;\r\n font-weight: 700;\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n margin-bottom: 15px;\r\n letter-spacing: 0.5px;\r\n transition: color 0.35s ease;\r\n }\r\n \r\n @media (min-width: 768px) { .ut-title { font-size: 18px; } }\r\n \r\n .utility-col:hover .ut-title {\r\n color: #000000;\r\n }\r\n \r\n .ut-desc {\r\n font-size: 15px;\r\n color: #8a8a8a;\r\n line-height: 1.6;\r\n transition: color 0.35s ease;\r\n }\r\n\r\n .utility-col:hover .ut-desc {\r\n color: #171717;\r\n }\r\n\r\n \/* Footer Element Layout *\/\r\n .footer-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 5% 4%;\r\n background-color: #050505;\r\n flex-wrap: wrap;\r\n gap: 35px;\r\n }\r\n \r\n .footer-tagline {\r\n font-family: 'Unbounded', sans-serif;\r\n font-size: 15px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n color: #ffffff;\r\n margin-bottom: 10px;\r\n letter-spacing: 0.5px;\r\n }\r\n \r\n @media (min-width: 768px) { .footer-tagline { font-size: 18px; } }\r\n \r\n .footer-copyright {\r\n font-size: 13px;\r\n color: #525252;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n line-height: 1.6;\r\n }\r\n \r\n .link-grid {\r\n display: flex;\r\n gap: 15px;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n }\r\n\r\n @media (min-width: 650px) { .link-grid { width: auto; } }\r\n \r\n .link-item {\r\n font-family: 'Unbounded', sans-serif;\r\n border: 1px solid #262626;\r\n padding: 14px 24px;\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n color: #ffffff;\r\n background: #121212;\r\n transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);\r\n font-weight: 700;\r\n letter-spacing: 0.5px;\r\n text-align: center;\r\n flex: 1 1 auto;\r\n }\r\n \r\n .link-item:hover {\r\n background: #00ff66;\r\n color: #000000;\r\n border-color: #00ff66;\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 20px rgba(0, 255, 102, 0.2);\r\n }\r\n\r\n \/* 3-Column Immersive Pop-up Modal System *\/\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-color: rgba(6, 6, 6, 0.95);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n z-index: 1000;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .modal-container {\r\n width: 92%;\r\n max-width: 1200px;\r\n height: 85vh;\r\n background-color: #0b0b0b;\r\n border: 1px solid #262626;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n box-shadow: 0 30px 60px rgba(0,0,0,0.8);\r\n }\r\n\r\n .modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px 30px;\r\n border-bottom: 1px solid #262626;\r\n background-color: #0e0e0e;\r\n }\r\n\r\n .modal-title {\r\n font-family: 'Unbounded', sans-serif;\r\n font-weight: 700;\r\n font-size: 16px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .modal-close-btn {\r\n background: none;\r\n border: 1px solid #404040;\r\n color: #ffffff;\r\n padding: 8px 16px;\r\n text-transform: uppercase;\r\n font-size: 12px;\r\n font-weight: 700;\r\n cursor: pointer;\r\n font-family: 'Space Grotesk', sans-serif;\r\n transition: all 0.2s;\r\n }\r\n\r\n .modal-close-btn:hover {\r\n border-color: #00ff66;\r\n color: #00ff66;\r\n background: rgba(0,255,102,0.05);\r\n }\r\n\r\n .modal-content-scroll {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 40px 30px;\r\n }\r\n\r\n \/* 3-Column Grid Framework *\/\r\n .pop-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .pop-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 650px) {\r\n .pop-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .pop-card {\r\n background-color: #050505;\r\n border: 1px solid #262626;\r\n padding: 20px;\r\n text-align: center;\r\n position: relative;\r\n cursor: pointer;\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n .pop-card:hover {\r\n border-color: #00ff66;\r\n transform: scale(1.02);\r\n box-shadow: 0 10px 20px rgba(0, 255, 102, 0.02);\r\n }\r\n\r\n .pop-card-img-box {\r\n width: 100%;\r\n aspect-ratio: 1 \/ 1;\r\n background-color: #0d0d0d;\r\n border: 1px solid #1c1c1c;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 15px;\r\n }\r\n\r\n .pop-card-img-box img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n }\r\n\r\n .pop-card-name {\r\n font-family: 'Unbounded', sans-serif;\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .pop-card-desc {\r\n font-size: 13px;\r\n color: #737373;\r\n }\r\n\r\n \/* Modal Corner Accents matching the core aesthetic *\/\r\n .pop-card-corner-tl { position: absolute; top: 8px; left: 8px; border-top: 2px solid transparent; border-left: 2px solid transparent; width: 10px; height: 10px; transition: border-color 0.3s; }\r\n .pop-card-corner-br { position: absolute; bottom: 8px; right: 8px; border-bottom: 2px solid transparent; border-right: 2px solid transparent; width: 10px; height: 10px; transition: border-color 0.3s; }\r\n .pop-card:hover .pop-card-corner-tl { border-top-color: #00ff66; border-left-color: #00ff66; }\r\n .pop-card:hover .pop-card-corner-br { border-bottom-color: #00ff66; border-right-color: #00ff66; }\r\n\r\n \/* Mobile Breakdowns Overrides Layout Controls *\/\r\n @media (max-width: 992px) {\r\n .left-column {\r\n border-right: none;\r\n border-bottom: 1px solid #262626;\r\n }\r\n }\r\n\r\n @media (max-width: 650px) {\r\n .header-nav {\r\n flex-direction: column;\r\n gap: 20px;\r\n text-align: center;\r\n padding: 25px 20px;\r\n }\r\n .nav-links {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 20px;\r\n }\r\n .footer-section {\r\n flex-direction: column;\r\n text-align: center;\r\n align-items: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"wrapper\">\r\n <!-- Top Nav Header Strip -->\r\n <header class=\"header-nav\">\r\n <div class=\"nav-logo\">$BEARD<\/div>\r\n <nav class=\"nav-links\">\r\n <a href=\"#about\">Mission<\/a>\r\n <a href=\"javascript:void(0)\" onclick=\"openGalleryModal()\">The Gallery<\/a>\r\n <a href=\"#utility\">Utility<\/a>\r\n <a href=\"#brotherhood\">Brotherhood<\/a>\r\n <\/nav>\r\n <\/header>\r\n\r\n <!-- Dynamic Hero Grid Structure Split -->\r\n <main class=\"main-split\">\r\n <!-- Left Grid Pane: Branding and Direct Token Access -->\r\n <section class=\"left-column\">\r\n <div>\r\n <div class=\"meta-tag\">WORLDWIDE DEPLOYMENT \/\/ <strong>BUILT FOR THE NATION<\/strong><\/div>\r\n <div class=\"title-container\">\r\n <h1>Grown, Not Shaved.<\/h1>\r\n <\/div>\r\n <div class=\"hero-tagline\">Welcome to the Beard Nation. More than just facial hair\u2014it\u2019s an identity.<\/div>\r\n \r\n <div class=\"sub-headline\">\r\n <strong>$BEARD<\/strong> is the token for those who appreciate character, consistency, and of course, an epic beard.\r\n <\/div>\r\n\r\n <div class=\"cta-container\">\r\n <a href=\"GANTI-LINK\" target=\"_blank\" class=\"btn-primary\">Buy $BEARD Now<\/a>\r\n <button class=\"btn-secondary\" onclick=\"openGalleryModal()\">Explore The Gallery<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Interface Box for Contract Code Copy Trigger -->\r\n <div class=\"ca-section\">\r\n <div class=\"ca-title\">OFFICIAL BEARD CONTRACT ADDRESS ($BEARD CA) - CLICK TO COPY<\/div>\r\n <div class=\"ca-box\" id=\"caBox\" onclick=\"copyAddressToClipboard()\">\r\n <span id=\"caText\">NULL<\/span>\r\n <span class=\"copy-badge\" id=\"copyBadge\">Copy<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Right Grid Pane: Custom HUD System with Real Image Carousel Links -->\r\n <section class=\"right-column\" id=\"gallery\">\r\n <div>\r\n <div class=\"hud-header-container\">\r\n <div class=\"hud-title\">CHOOSE YOUR BEARD ---<br>ALTER-EGO<\/div>\r\n <svg class=\"hud-eye-graphic\" viewBox=\"0 0 100 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M10 20C25 5 75 5 90 20C75 35 25 35 10 20Z\" stroke=\"#262626\" stroke-width=\"1.5\"\/>\r\n <circle cx=\"50\" cy=\"20\" r=\"10\" fill=\"#fff\"\/>\r\n <circle cx=\"50\" cy=\"20\" r=\"4\" fill=\"#000\"\/>\r\n <\/svg>\r\n <\/div>\r\n \r\n <div class=\"hud-display\">\r\n <div class=\"hud-corner-tl\"><\/div>\r\n <div style=\"font-size: 11px; color: #525252; text-align: left; margin-bottom: 12px;\">[ ASSET_PRVW_MODE \/\/ LIVE_SYNC ]<\/div>\r\n \r\n <!-- Visual Panel Rendering Current Slider Asset Image Link -->\r\n <div class=\"gallery-preview-container\">\r\n <img decoding=\"async\" id=\"carouselImage\" src=\"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-1.png\" alt=\"Beard Asset Style Illustration\">\r\n <\/div>\r\n \r\n <div style=\"font-size: 20px; font-weight: 700; color: #ffffff; margin-top: 15px;\" id=\"styleName\">01. Anchor Beard<\/div>\r\n <div style=\"font-size: 13px; color: #a3a3a3; margin-top: 8px; max-width: 90%; margin-left: auto; margin-right: auto;\" id=\"styleDesc\">\r\n \"A nautical look for digital sailors.\"\r\n <\/div>\r\n\r\n <!-- Technical Interface Arrows for Interactive User Input Navigation -->\r\n <div class=\"carousel-controls\">\r\n <button class=\"btn-arrow\" onclick=\"triggerPrevStyle()\">Prev Style<\/button>\r\n <span class=\"carousel-counter\" id=\"carouselCounter\">FOCUS \/\/ 01\/18<\/span>\r\n <button class=\"btn-arrow\" onclick=\"triggerNextStyle()\">Next Style<\/button>\r\n <\/div>\r\n \r\n <div class=\"hud-corner-br\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"font-size: 11px; color: #404040; letter-spacing: 1px; margin-top: 25px;\">\r\n OP ID: 2149821-083 <span style=\"float: right;\">FAST FORWARD >>><\/span>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n\r\n <!-- Interface Horizontal Tech Rule Bar -->\r\n <div class=\"status-bar\">\r\n <div>01\/18 VECTOR GALLERY<\/div>\r\n <div style=\"text-align: center;\">Click on any style to see the details or use it as inspiration for the day.<\/div>\r\n <div>VERIFIED \/\/ CONTRACT<\/div>\r\n <\/div>\r\n\r\n <!-- Section: About Us & Editorial Philosophy Narrative Layout -->\r\n <section class=\"details-section\" id=\"about\">\r\n <div class=\"quote-block\">\r\n \"A thin mustache is fine, but your commitment must be thick.\"\r\n <\/div>\r\n <div class=\"about-text\">\r\n This world is full of instant things, but a great beard isn't one of them. Growing a beard takes time, dedication, and maintenance\u2014exactly like building a solid crypto community. \r\n <br><br>\r\n <strong>BEARD ($BEARD)<\/strong> is the ultimate digital hangout for beard enthusiasts, fans of masculine culture, and digital asset collectors who know how to stand out from the crowd. We aren't just launching a token; we are building a brotherhood.\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section: Why Hold $BEARD? Header layout tag -->\r\n <div class=\"utility-header\" id=\"utility\">\r\n Why hold $BEARD?\r\n <\/div>\r\n\r\n <!-- Section: Three Column Token Utility Grid Network -->\r\n <section class=\"utility-grid\">\r\n <div class=\"utility-col\">\r\n <div class=\"ut-title\">Exclusive Collections<\/div>\r\n <div class=\"ut-desc\">$BEARD holders get first-row access to premium beard vector assets, perfect for avatars, NFTs, or exclusive merchandise.<\/div>\r\n <\/div>\r\n <div class=\"utility-col\">\r\n <div class=\"ut-title\">Alpha Community<\/div>\r\n <div class=\"ut-desc\">A dedicated space for \"Bearded Bros\" (and those who appreciate the aesthetic) to discuss Web3 trends, lifestyle, and grooming tips.<\/div>\r\n <\/div>\r\n <div class=\"utility-col\">\r\n <div class=\"ut-title\">Meme-tility<\/div>\r\n <div class=\"ut-desc\">Fusing the viral power of internet meme culture with a clean, premium visual aesthetic. No fluff, just facial hair and gains.<\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section: Footer Infrastructure with Targeted Links Matrix -->\r\n <footer class=\"footer-section\" id=\"brotherhood\">\r\n <div>\r\n <div class=\"footer-tagline\">Don\u2019t let your chin go bare, don\u2019t let your wallet stay empty.<\/div>\r\n <div class=\"footer-copyright\">Official Channels <br> \u00a9 2026 BEARD Token. All Rights Reserved. No Shaving Allowed.<\/div>\r\n <\/div>\r\n <div class=\"link-grid\">\r\n <a href=\"GANTI-LINK\" target=\"_blank\" class=\"link-item\">Telegram<\/a>\r\n <a href=\"GANTI-LINK\" target=\"_blank\" class=\"link-item\">Twitter (X)<\/a>\r\n <a href=\"GANTI-LINK\" target=\"_blank\" class=\"link-item\">Chart<\/a>\r\n <a href=\"GANTI-LINK\" target=\"_blank\" class=\"link-item\">Swap Now<\/a>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <!-- Immersive Modern Popup Pop-up Grid Component Layer[cite: 3] -->\r\n <div class=\"modal-overlay\" id=\"galleryModal\" onclick=\"closeGalleryModalOutside(event)\">\r\n <div class=\"modal-container\">\r\n <div class=\"modal-header\">\r\n <div class=\"modal-title\">Beard Matrix Ledger Database<\/div>\r\n <button class=\"modal-close-btn\" onclick=\"closeGalleryModal()\">Close Matrix<\/button>\r\n <\/div>\r\n <div class=\"modal-content-scroll\">\r\n <!-- 3 Menurun Column Grid Structure for the 18 Beard styles[cite: 3] -->\r\n <div class=\"pop-grid\" id=\"modalGridInjection\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Embedded Client Side Control Script Matrix Logic -->\r\n <script>\r\n \/\/ Mapped Array List Elements 01-18 matching target files accurately[cite: 3]\r\n const targetBeards = [\r\n { id: \"01\", name: \"Anchor Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-1.png\", desc: \"A nautical look for digital sailors.\" },\r\n { id: \"02\", name: \"Traditional Full Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-2.png\", desc: \"Classic, thick, and never goes out of style.\" },\r\n { id: \"03\", name: \"Circle Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-3.png\", desc: \"Symmetrical, tidy, and perfectly standard.\" },\r\n { id: \"04\", name: \"Short Boxed Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-4.png\", desc: \"Preciously boxed, formal, and highly groomed.\" },\r\n { id: \"05\", name: \"Viking Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-5.png\", desc: \"Wild, rugged, and untamed.\" },\r\n { id: \"06\", name: \"Ducktail\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-6.png\", desc: \"Neat on top, pointed at the bottom.\" },\r\n { id: \"07\", name: \"Balbo Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-7.png\", desc: \"An isolated inverted-T style for the modern man.\" },\r\n { id: \"08\", name: \"Mutton Chops\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-8.png\", desc: \"Maximum retro. Let your sideburns do the talking.\" },\r\n { id: \"09\", name: \"Garibaldi\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-9.png\", desc: \"Thick, wide, round, and completely natural.\" },\r\n { id: \"10\", name: \"Franz Josef\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-10.png\", desc: \"A magnificent, formal imperial look.\" },\r\n { id: \"11\", name: \"Chevron & Stubble\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-11.png\", desc: \"A heavy mustache backed by light shadow.\" },\r\n { id: \"12\", name: \"Rap Industry Standard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-12.png\", desc: \"As thin as a pencil line, as sharp as it gets.\" },\r\n { id: \"13\", name: \"Hulihee Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-13.png\", desc: \"A dramatic, theatrical evolution of sideburns.\" },\r\n { id: \"14\", name: \"Imperial Beard\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-14.png\", desc: \"An aristocratic look with majestic upward curves.\" },\r\n { id: \"15\", name: \"Pencil Mustache\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-15.png\", desc: \"Minimalist, elegant, and full of mystery.\" },\r\n { id: \"16\", name: \"Petit Goatee\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-16.png\", desc: \"A subtle, clean touch right at the tip of the chin.\" },\r\n { id: \"17\", name: \"Fu Manchu\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-17.png\", desc: \"Long, vertical trails full of vintage character.\" },\r\n { id: \"18\", name: \"The Chinstrap\", url: \"https:\/\/thebeard.lol\/wp-content\/uploads\/2026\/06\/BEARD-18.png\", desc: \"A perfectly defined jawline.\" }\r\n ];\r\n\r\n let indexPointer = 0;\r\n\r\n \/\/ Auto-generation engine building the 3-column modal layout content securely[cite: 3]\r\n window.addEventListener('DOMContentLoaded', () => {\r\n const gridWrapper = document.getElementById(\"modalGridInjection\");\r\n targetBeards.forEach((beard, index) => {\r\n const card = document.createElement(\"div\");\r\n card.className = \"pop-card\";\r\n card.setAttribute(\"onclick\", `selectBeardFromGrid(${index})`);\r\n card.innerHTML = `\r\n <div class=\"pop-card-corner-tl\"><\/div>\r\n <div class=\"pop-card-img-box\">\r\n <img decoding=\"async\" src=\"${beard.url}\" alt=\"${beard.name}\">\r\n <\/div>\r\n <div class=\"pop-card-name\">${beard.id}. ${beard.name}<\/div>\r\n <div class=\"pop-card-desc\">${beard.desc}<\/div>\r\n `;\r\n gridWrapper.appendChild(card);\r\n });\r\n });\r\n\r\n function refreshCarouselView() {\r\n const asset = targetBeards[indexPointer];\r\n document.getElementById(\"carouselImage\").src = asset.url;\r\n document.getElementById(\"styleName\").innerText = `${asset.id}. ${asset.name}`;\r\n document.getElementById(\"styleDesc\").innerText = `\"${asset.desc}\"`;\r\n document.getElementById(\"carouselCounter\").innerText = `FOCUS \/\/ ${asset.id}\/18`;\r\n }\r\n\r\n function triggerNextStyle() {\r\n indexPointer = (indexPointer + 1) % targetBeards.length;\r\n refreshCarouselView();\r\n }\r\n\r\n function triggerPrevStyle() {\r\n indexPointer = (indexPointer - 1 + targetBeards.length) % targetBeards.length;\r\n refreshCarouselView();\r\n }\r\n\r\n \/\/ Modal Action Windows Triggers[cite: 3]\r\n function openGalleryModal() {\r\n document.getElementById(\"galleryModal\").classList.add(\"active\");\r\n document.body.style.overflow = \"hidden\"; \/\/ Prevents background body window scrolling\r\n }\r\n\r\n function closeGalleryModal() {\r\n document.getElementById(\"galleryModal\").classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n }\r\n\r\n function closeGalleryModalOutside(event) {\r\n if (event.target.id === \"galleryModal\") {\r\n closeGalleryModal();\r\n }\r\n }\r\n\r\n function selectBeardFromGrid(index) {\r\n indexPointer = index;\r\n refreshCarouselView();\r\n closeGalleryModal();\r\n \/\/ Fluid anchor scrolling back to display hud system view frame[cite: 3]\r\n document.getElementById(\"gallery\").scrollIntoView({ behavior: \"smooth\" });\r\n }\r\n\r\n \/\/ Copy mechanism script logic\r\n function copyAddressToClipboard() {\r\n const rawText = document.getElementById(\"caText\").innerText;\r\n navigator.clipboard.writeText(rawText).then(() => {\r\n const badge = document.getElementById(\"copyBadge\");\r\n badge.innerText = \"Copied!\";\r\n badge.style.backgroundColor = \"#00ff66\";\r\n badge.style.color = \"#000000\";\r\n badge.style.borderColor = \"#00ff66\";\r\n \r\n setTimeout(() => {\r\n badge.innerText = \"Copy\";\r\n badge.style.backgroundColor = \"#1a1a1a\";\r\n badge.style.color = \"#888\";\r\n badge.style.borderColor = \"#333\";\r\n }, 2000);\r\n }).catch(err => {\r\n console.error(\"Critical clipboard breakdown: \", 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BEARD ($BEARD) – Official Website $BEARD Mission The Gallery Utility Brotherhood WORLDWIDE DEPLOYMENT \/\/ BUILT FOR THE NATION Grown, Not Shaved. Welcome to the Beard Nation. More than just facial hair\u2014it\u2019s an identity. $BEARD is the token for those who appreciate character, consistency, and of course, an epic beard. Buy $BEARD Now Explore The Gallery […]<\/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":43,"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/thebeard.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/77"}],"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}]}}