(function () { // ================================================ // TAP OUT HONEY PACKS — Client Portal Brand JS // ================================================ const BRAND = { gold: "#D4AF37", goldBright: "#F5C518", black: "#0A0A0A", blackCard: "#111111", white: "#FFFFFF", tagline: "Don't Tap Out. Perform Like You Mean It.", name: "TAP OUT HONEY PACKS", }; /* ---- 1. BRANDED TOP BANNER ---- */ function addBrandBanner() { if (document.getElementById("tapout-brand-banner")) return; const banner = document.createElement("div"); banner.id = "tapout-brand-banner"; banner.style.cssText = ` width: 100%; background: linear-gradient(135deg, #0A0A0A 0%, #1c1400 50%, #0A0A0A 100%); border-bottom: 2px solid #D4AF37; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; position: relative; z-index: 99999; box-shadow: 0 2px 24px rgba(212, 175, 55, 0.18); `; banner.innerHTML = `

🍯

${BRAND.name}

Client Portal

${BRAND.tagline}

`; document.body.insertBefore(banner, document.body.firstChild); } /* ---- 2. HONEYCOMB BACKGROUND PATTERN ---- */ function applyHoneycombBackground() { const svg = ``; const encoded = "data:image/svg+xml," + encodeURIComponent(svg); document.body.style.backgroundImage = `url("${encoded}")`; document.body.style.backgroundRepeat = "repeat"; document.body.style.backgroundSize = "56px 48px"; document.body.style.backgroundAttachment = "fixed"; } /* ---- 3. INJECT KEYFRAME ANIMATIONS ---- */ function injectAnimations() { if (document.getElementById("tapout-keyframes")) return; const style = document.createElement("style"); style.id = "tapout-keyframes"; style.textContent = ` @keyframes goldShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes goldPulse { 0%, 100% { box-shadow: 0 0 6px rgba(212,175,55,0.2); } 50% { box-shadow: 0 0 18px rgba(212,175,55,0.5); } } @keyframes fadeInGold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Animate banner on load */ #tapout-brand-banner { animation: fadeInGold 0.4s ease forwards; } `; document.head.appendChild(style); } /* ---- 4. MUTATION OBSERVER (catches Vue/React dynamic renders) ---- */ function watchDynamicElements() { const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { if (node.nodeType !== 1) return; // Re-brand any dynamically injected primary buttons const btns = node.querySelectorAll ? node.querySelectorAll( '[class*="btn-primary"], button[type="submit"], [class*="primary-btn"]' ) : []; btns.forEach(function (btn) { btn.style.background = "linear-gradient(90deg, #D4AF37 0%, #F5C518 50%, #D4AF37 100%)"; btn.style.backgroundSize = "200% auto"; btn.style.color = "#000000"; btn.style.fontWeight = "700"; btn.style.border = "none"; btn.style.animation = "goldShimmer 3s linear infinite"; }); // Re-brand any dynamically injected headings const headings = node.querySelectorAll ? node.querySelectorAll("h1, h2, h3, h4, h5, h6") : []; headings.forEach(function (h) { h.style.color = "#D4AF37"; }); }); }); }); observer.observe(document.body, { childList: true, subtree: true, }); } /* ---- 5. INIT ---- */ function init() { injectAnimations(); applyHoneycombBackground(); addBrandBanner(); watchDynamicElements(); console.log("[TAP OUT] Client portal theme loaded."); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();