/* ============================================================================ 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; }

Get in touch

Chat with us

Connect