/* Boost Navigation v4.0.1 * ───────────────────────────────────────────────────────────────────── * All transition and gap rules use !important to override Elementor's * global button { transition: all 0.3s } and theme gap rules. * ───────────────────────────────────────────────────────────────────── */ /* ── Wrapper ────────────────────────────────────────────────────── */ .bn-wrap { display: flex; align-items: center; } /* ── Real button ────────────────────────────────────────────────── */ .bn-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: 0; cursor: pointer; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none; appearance: none; border-radius: 6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: relative; /* Transition none by default — ghost does all animation */ transition: none !important; } .bn-btn:hover, .bn-btn:focus, .bn-btn:active { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── Real button inner ──────────────────────────────────────────── */ .bn-btn .bn-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; /* width set by Elementor responsive controls */ pointer-events: none; transition: none !important; } /* Hover compress — desktop pointer devices only, not mobile */ @media (hover: hover) and (pointer: fine) { .bn-btn .bn-inner { transition: gap 0.25s ease !important; } .bn-btn:not(.bn-ghosted):hover .bn-inner { gap: 3px !important; } } /* ── Real button bars ───────────────────────────────────────────── */ .bn-btn .bn-bar { display: block; /* width and height set by Elementor responsive controls */ border-radius: 2px; transform-origin: center center; pointer-events: none; flex-shrink: 0; background-color: #ffffff !important; border: none !important; box-shadow: none !important; transition: none !important; } /* ── Hidden while ghost is active ────────────────────────────────── * opacity:0 instead of visibility:hidden — avoids single-frame * repaint flash when ghost is removed and real button reappears. * transition:none prevents theme's transition:all from fading it in. * ─────────────────────────────────────────────────────────────────── */ .bn-btn.bn-ghosted { opacity: 0; transition: none !important; } .bn-btn.bn-ghosted .bn-inner { transition: none !important; } /* ── Ghost button ─────────────────────────────────────────────────── * Appended to so it lives above Elementor's popup z-index. * The ghost does ALL open/close animation; the real button is static. * ─────────────────────────────────────────────────────────────────── */ .bn-ghost { position: fixed; z-index: 9999999; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none; appearance: none; border-radius: 6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* No opacity transition on base — ghost is always opaque until removed */ transition: none !important; } .bn-ghost:hover, .bn-ghost:focus, .bn-ghost:active { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── Ghost inner ──────────────────────────────────────────────────── * Transition declared HERE (not on state classes) so it is always * present when transform value changes. Declaring transition and * changing value simultaneously causes the browser to skip animation. * ─────────────────────────────────────────────────────────────────── */ .bn-ghost .bn-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 26px; pointer-events: none; transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* ── Ghost bars ─────────────────────────────────────────────────── */ .bn-ghost .bn-bar { display: block; width: 26px; height: 2px; border-radius: 2px; transform-origin: center center; pointer-events: none; flex-shrink: 0; background-color: #ffffff !important; border: none !important; box-shadow: none !important; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important; } /* Slightly slower on touch devices */ @media (hover: none) and (pointer: coarse) { .bn-ghost .bn-inner { transition: gap 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important; } .bn-ghost .bn-bar { transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important; } } /* ── OPEN: hamburger → X ──────────────────────────────────────────── * --bn-x-offset is set by JS from actual computed bar height + gap, * so the X is always pixel-perfect regardless of thickness setting. * ─────────────────────────────────────────────────────────────────── */ .bn-ghost.bn-open .bn-top { transform: translateY(var(--bn-x-offset, 10px)) rotate(45deg); } .bn-ghost.bn-open .bn-mid { opacity: 0; transform: scaleX(0); } .bn-ghost.bn-open .bn-bot { transform: translateY(calc(var(--bn-x-offset, 10px) * -1)) rotate(-45deg); } /* ── CLOSE: Spin + Snap (Option B) ───────────────────────────────── * * Sequence (triggered 200ms after click, after popup overlay fades): * 1. Bars snap to hamburger instantly (transition:none) — no morph tangle. * 2. Ghost inner wrapper spins 180° — base transition handles this. * DO NOT redeclare transition here: browser skips animation if * transition and value change happen in the same paint cycle. * 3. Ghost stays fully opaque (no fade) — one clean icon the whole time. * 4. JS removes ghost at ~750ms when spin completes. Real button * snaps back with no fade via forced reflow + opacity:1 inline. * ─────────────────────────────────────────────────────────────────── */ .bn-ghost.bn-closing { pointer-events: none; transition: none !important; } .bn-ghost.bn-closing .bn-inner { transform: rotate(180deg); /* NO transition here — base .bn-ghost .bn-inner handles the spin */ } .bn-ghost.bn-closing .bn-top { transform: none; transition: none !important; } .bn-ghost.bn-closing .bn-mid { opacity: 1; transform: none; transition: none !important; } .bn-ghost.bn-closing .bn-bot { transform: none; transition: none !important; } /* ── SHR / Smart Header Reveal ──────────────────────────────────── */ .bn-ghost.bn-ghost-header-hidden { opacity: 0 !important; pointer-events: none; transition: opacity 0.2s ease !important; } /* ── Elementor editor ───────────────────────────────────────────── */ .elementor-editor-active .bn-btn { cursor: default; pointer-events: none; }