/* ============================================================================ GOHIGHLEVEL GLOBAL CSS - ENHANCED & FIXED VERSION Purpose: Robust CSS that works across ALL GHL pages Issue Fixed: GHL builder CSS overriding custom styles Solution: !important flags + high specificity selectors Apply this CSS to: Global CSS section in GHL Settings Last Updated: January 19, 2026 ============================================================================ */ /* ============================================================================ ROOT VARIABLES & BASE STYLES ============================================================================ */ :root { --font-geist: 'Geist', sans-serif !important; --font-mono: 'JetBrains Mono', monospace !important; --color-bg-primary: #050505 !important; --color-text-primary: #ffffff !important; --glass-bg: rgba(20, 20, 22, 0.7) !important; --glass-border: rgba(255, 255, 255, 0.08) !important; } /* Force body styles across all pages */ body, body.hl_page-preview, body[class*="hl_"] { background-color: #050505 !important; background-color: var(--color-bg-primary) !important; color: #ffffff !important; color: var(--color-text-primary) !important; font-family: 'Geist', sans-serif !important; font-family: var(--font-geist) !important; overflow-x: hidden !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ============================================================================ CUSTOM SCROLLBAR - CONSISTENT ACROSS ALL PAGES ============================================================================ */ ::-webkit-scrollbar { width: 6px !important; height: 6px !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background: #27272a !important; border-radius: 3px !important; } ::-webkit-scrollbar-thumb:hover { background: #3f3f46 !important; } /* Hide scrollbar for specific elements */ .no-scrollbar::-webkit-scrollbar { display: none !important; } .no-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; } /* ============================================================================ GLASSMORPHISM EFFECTS - CRITICAL FIX Multiple selectors for maximum compatibility with GHL builder ============================================================================ */ /* Primary glass-panel selector with !important flags */ .glass-panel, div.glass-panel, [class*="glass-panel"], nav .glass-panel, nav div.glass-panel, header .glass-panel, .glass-panel[class], *[class*="glass-panel"] { background: rgba(20, 20, 22, 0.7) !important; background: var(--glass-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border: 1px solid var(--glass-border) !important; } /* Glass header variant */ .glass-header, div.glass-header, [class*="glass-header"] { background: rgba(5, 5, 5, 0.8) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Ensure backdrop-filter works in all browsers */ @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) { .glass-panel, div.glass-panel, nav .glass-panel, .glass-header, div.glass-header { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } } /* Fallback for browsers that don't support backdrop-filter */ @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) { .glass-panel, div.glass-panel, nav .glass-panel { background: rgba(20, 20, 22, 0.95) !important; } .glass-header, div.glass-header { background: rgba(5, 5, 5, 0.95) !important; } } /* ============================================================================ GRID BACKGROUNDS ============================================================================ */ .bg-grid, [class*="bg-grid"] { background-size: 50px 50px !important; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important; mask-image: radial-gradient(circle at center, black, transparent 80%) !important; -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%) !important; } /* Inner card grid variant */ .card-grid, [class*="card-grid"] { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important; background-size: 24px 24px !important; } /* ============================================================================ SPOTLIGHT EFFECT - INTERACTIVE HOVER GLOW ============================================================================ */ .spotlight-card { position: relative !important; } .spotlight-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: inherit !important; padding: 1px !important; background: radial-gradient( 800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.4), transparent 40% ) !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; opacity: 0 !important; transition: opacity 0.5s !important; pointer-events: none !important; z-index: 10 !important; } .spotlight-card:hover::before { opacity: 1 !important; } /* JavaScript to track mouse position for spotlight effect */ /* Add this to your page or global JS: document.addEventListener('mousemove', (e) => { document.querySelectorAll('.spotlight-card').forEach(card => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; card.style.setProperty('--mouse-x', `${x}px`); card.style.setProperty('--mouse-y', `${y}px`); }); }); */ /* ============================================================================ 3D TRANSFORMS & PERSPECTIVE ============================================================================ */ /* Perspective utilities */ .perspective-none { perspective: none !important; } .perspective-dramatic { perspective: 100px !important; } .perspective-near { perspective: 300px !important; } .perspective-normal { perspective: 500px !important; } .perspective-midrange { perspective: 800px !important; } .perspective-distant { perspective: 1200px !important; } .perspective-2000 { perspective: 2000px !important; } /* Transform style utilities */ .transform-style-preserve-3d, .preserve-3d { transform-style: preserve-3d !important; } .transform-style-flat { transform-style: flat !important; } /* Hero tilt effect */ .hero-tilt { transform: rotateX(10deg) rotateY(-12deg) rotateZ(2deg) !important; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .hero-container:hover .hero-tilt { transform: rotateX(5deg) rotateY(-6deg) rotateZ(1deg) !important; } /* ============================================================================ ANIMATIONS & KEYFRAMES ============================================================================ */ /* Fade up animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Animation classes */ .animate-fade-up { animation: fade-up 0.6s ease-out forwards !important; } .animate-fade-in { animation: fade-in 0.6s ease-out forwards !important; } /* Animation delays */ .delay-100 { animation-delay: 100ms !important; } .delay-200 { animation-delay: 200ms !important; } .delay-300 { animation-delay: 300ms !important; } .delay-400 { animation-delay: 400ms !important; } .delay-500 { animation-delay: 500ms !important; } /* ============================================================================ BUTTON ENHANCEMENTS ============================================================================ */ /* Primary CTA buttons with glow effect */ button[class*="bg-white"], button[class*="bg-slate"], .btn-primary, [class*="btn-primary"] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } button[class*="bg-white"]:hover, button[class*="bg-slate"]:hover, .btn-primary:hover, [class*="btn-primary"]:hover { transform: scale(1.02) !important; box-shadow: 0 0 40px -5px rgba(255, 255, 255, 0.5) !important; } /* Gradient buttons */ button[class*="gradient"], .btn-gradient, [class*="btn-gradient"] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } button[class*="gradient"]:hover, .btn-gradient:hover, [class*="btn-gradient"]:hover { transform: scale(1.02) !important; box-shadow: 0 0 40px rgba(37, 99, 235, 0.5) !important; } /* ============================================================================ CARD ENHANCEMENTS ============================================================================ */ /* Card hover effects */ .card-hover, [class*="card-hover"] { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .card-hover:hover, [class*="card-hover"]:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important; } /* ============================================================================ TEXT UTILITIES ============================================================================ */ /* Line clamp utilities */ .line-clamp-1 { display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .line-clamp-2 { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .line-clamp-3 { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .line-clamp-4 { display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* ============================================================================ SYNTAX HIGHLIGHTING (for code blocks) ============================================================================ */ .token-keyword { color: #c792ea !important; } .token-function { color: #82aaff !important; } .token-string { color: #c3e88d !important; } .token-comment { color: #546e7a !important; font-style: italic !important; } .token-number { color: #f78c6c !important; } /* ============================================================================ HOVER TRIGGERS ============================================================================ */ .hover-trigger .hover-target { transform: translateY(0) !important; opacity: 1 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ============================================================================ NAVIGATION SPECIFIC FIXES ============================================================================ */ /* Force navigation bar to use glassmorphism */ nav, nav[class*="fixed"], header nav, .navigation, [class*="navigation"] { z-index: 50 !important; } /* Ensure nav container has proper styling */ nav > div, nav > div[class*="glass"], header nav > div { background: rgba(20, 20, 22, 0.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Navigation links hover effects */ nav a, nav a[class*="text-zinc"], .nav-link, [class*="nav-link"] { transition: color 0.2s ease-in-out !important; } nav a:hover, .nav-link:hover { color: #ffffff !important; } /* ============================================================================ RESPONSIVE UTILITIES ============================================================================ */ /* Ensure responsive classes work properly */ @media (max-width: 768px) { .glass-panel, nav .glass-panel { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } } /* ============================================================================ Z-INDEX MANAGEMENT ============================================================================ */ /* Ensure proper stacking order */ nav, .navigation, header { z-index: 50 !important; } .glass-panel { z-index: inherit !important; } .spotlight-card::before { z-index: 10 !important; } /* ============================================================================ ACCESSIBILITY ENHANCEMENTS ============================================================================ */ /* Focus states for keyboard navigation */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5) !important; outline-offset: 2px !important; } /* Reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================================ PRINT STYLES ============================================================================ */ @media print { .glass-panel, .glass-header { background: #1a1a1a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .spotlight-card::before { display: none !important; } } /* ============================================================================ GOHIGHLEVEL SPECIFIC OVERRIDES Force styles to work in GHL's builder environment ============================================================================ */ /* Override GHL's default container backgrounds */ .hl_page-preview .glass-panel, [class*="hl_"] .glass-panel, .elBuilderPreview .glass-panel { background: rgba(20, 20, 22, 0.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* Override GHL's default nav styling */ .hl_page-preview nav div, [class*="hl_"] nav div, .elBuilderPreview nav div { background: rgba(20, 20, 22, 0.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* Ensure GHL's Tailwind classes don't override */ [class*="bg-black"].glass-panel, [class*="bg-zinc"].glass-panel, [class*="bg-slate"].glass-panel { background: rgba(20, 20, 22, 0.7) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* ============================================================================ END OF ENHANCED GLOBAL CSS ============================================================================ */ /* IMPLEMENTATION NOTES: 1. Add this CSS to: Settings > Custom Code > Global CSS (Head) 2. Clear browser cache after applying 3. Test on all pages to verify glassmorphism is working 4. If issues persist, check for inline styles overriding these rules 5. Ensure Google Fonts are loaded before this CSS TROUBLESHOOTING: - If glassmorphism still not working: Check browser DevTools to see what's overriding - If backdrop-filter not supported: Fallback solid background will be used - If animations not working: Check for JavaScript errors blocking execution BROWSER SUPPORT: - Chrome/Edge: Full support - Firefox: Full support - Safari: Full support (with -webkit- prefixes) - Mobile browsers: Full support */

Complete your order