/* Joltly — transparent glass nav over dark heroes Opt-in: add class `jlt-nav-glass` on (or body). v2: desktop link cluster + bar stay clear so hero grid shows through. */ html.jlt-nav-glass { --jlt-nav-h: 68px; --jlt-glass-bg: transparent; --jlt-glass-bg-scrolled: rgba(6, 8, 16, 0.55); --jlt-glass-border: transparent; --jlt-glass-border-scrolled: rgba(148, 163, 184, 0.14); --jlt-glass-ink: #f1f5f9; --jlt-glass-muted: rgba(241, 245, 249, 0.78); background-color: #060810; } html.jlt-nav-glass body { background-color: #060810; } /* Glass bar — transparent at top so hero grid/glow pass through */ html.jlt-nav-glass .navigation.op-stone-bg, html.jlt-nav-glass .navigation.nav-dark, html.jlt-nav-glass .navigation { position: sticky; top: 0; z-index: 1000; background-color: var(--jlt-glass-bg) !important; background-image: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--jlt-glass-border); box-shadow: none; color: var(--jlt-glass-ink); transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease; } html.jlt-nav-glass .navigation.is-scrolled { background-color: var(--jlt-glass-bg-scrolled) !important; -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); border-bottom-color: var(--jlt-glass-border-scrolled); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); } /* Desktop: link cluster must not paint an opaque pill/box */ html.jlt-nav-glass .navigation .w-nav-menu, html.jlt-nav-glass .navigation .nav-menu, html.jlt-nav-glass .navigation .w-nav-container, html.jlt-nav-glass .navigation .container, html.jlt-nav-glass .navigation .navigation-container { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; } /* Pull the first page section under the glass so gradients merge through */ html.jlt-nav-glass .navigation + * { margin-top: calc(var(--jlt-nav-h) * -1); } /* Pricing hero: keep prior 48px rhythm + nav clearance */ html.jlt-nav-glass .jlt-pricing-hero { padding-top: calc(var(--jlt-nav-h) + 48px) !important; } /* Product dark heroes (Bills / Revenue / Integrations) */ html.jlt-nav-glass .jbi-hero, html.jlt-nav-glass .jrh-1-2, html.jlt-nav-glass .section-9 > .jrh-1-2 { padding-top: calc(var(--jlt-nav-h) + 40px) !important; } /* Generic fallback when page uses Op Stone on the first section after nav */ html.jlt-nav-glass .navigation + .section-regular.op-stone-bg:not(.jlt-pricing-hero), html.jlt-nav-glass .navigation + section.op-stone-bg:not(.jlt-pricing-hero) { padding-top: calc(var(--jlt-nav-h) + 40px) !important; } /* Logo → light */ html.jlt-nav-glass .navigation .navigation-logo img, html.jlt-nav-glass .navigation .w-nav-brand img { filter: brightness(0) invert(1); } /* Links */ html.jlt-nav-glass .navigation .nav-link, html.jlt-nav-glass .navigation .nav-link.w-nav-link, html.jlt-nav-glass .navigation .w-dropdown-toggle.nav-link { color: var(--jlt-glass-muted) !important; } html.jlt-nav-glass .navigation .nav-link:hover, html.jlt-nav-glass .navigation .w-dropdown-toggle.nav-link:hover { color: #fff !important; background-color: rgba(255, 255, 255, 0.06) !important; } html.jlt-nav-glass .navigation .nav-link.w--current { color: #fde68a !important; background-color: rgba(245, 158, 11, 0.16) !important; } /* Login outline on dark */ html.jlt-nav-glass .navigation .button-outline-small { color: var(--jlt-glass-ink) !important; border-color: rgba(241, 245, 249, 0.28) !important; background-color: transparent !important; } html.jlt-nav-glass .navigation .button-outline-small:hover { border-color: rgba(241, 245, 249, 0.5) !important; background-color: rgba(255, 255, 255, 0.06) !important; } /* Hamburger */ html.jlt-nav-glass .navigation .menu-line { background-color: var(--jlt-glass-ink) !important; } @media (max-width: 991px) { html.jlt-nav-glass { --jlt-nav-h: 64px; } /* Mobile open menu stays readable */ html.jlt-nav-glass .navigation .w-nav-menu { background-color: rgba(6, 8, 16, 0.96) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } }