.elementor-47 .elementor-element.elementor-element-74a0d91{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-47 .elementor-element.elementor-element-74a0d91{--content-width:1280px;}}/* Start custom CSS for html, class: .elementor-element-bfd219c *//* ================================ SLOTBOT HEADER STYLES (CLEAN) ================================ */ /* Base header layout */ .slotbot-header { width: 100%; background: transparent; position: relative; z-index: 100; min-height: 72px; /* reserve consistent header height */ } .header-container { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; width: 100%; line-height: 0; /* prevent inline line-box shifts */ } /* Logo */ .logo { display: inline-flex; align-items: center; } .logo img { height: 48px; display: block; vertical-align: middle; /* avoid baseline wobble */ transform: translateZ(0); /* subpixel stability */ } /* Desktop nav */ .nav-links { display: flex; gap: 28px; } .nav-links a { color: #E5E5E5; text-decoration: none; font-weight: 600; font-size: 16px; } /* ================================ MOBILE TOGGLE BUTTON (BASE) ================================ */ .menu-toggle { background: none; border: 0; padding: 0; margin: 0; display: none; /* hidden on desktop */ cursor: pointer; outline: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 48px; /* lock toggle box size */ height: 48px; line-height: 0; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; z-index: 1002; /* above nav panel */ } /* If you ever keep the <img>, keep it inert */ .menu-icon { display: none !important; } /* ================================ MOBILE & TABLET (≤1024px) ================================ */ @media (max-width: 1024px) { /* Hide desktop nav at this width */ .nav-links { position: absolute; top: 72px; left: 0; right: 0; display: none; /* hidden until .active */ flex-direction: column; gap: 18px; align-items: center; padding: 16px 0; background: rgba(7, 23, 36, 0.96); /* subtle animation base */ transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } /* Show the menu when active */ .nav-links.active { display: flex; transform: translateY(0); opacity: 1; pointer-events: auto; box-shadow: 0 0 25px rgba(0, 202, 82, 0.25), 0 4px 20px rgba(0, 0, 0, 0.65); border-top: 2px solid rgba(0, 202, 82, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Show the toggle only on mobile/tablet */ .menu-toggle { display: block !important; /* default icon = hamburger */ background: url("https://slot-bot.com/wp-content/uploads/2025/10/sb-hamburger-icon.png") center/contain no-repeat transparent !important; } /* when open, swap to X */ .menu-toggle.open { background-image: url("https://slot-bot.com/wp-content/uploads/2025/10/sb-hamburger-close-icon.png") !important; filter: drop-shadow(0 0 8px rgba(0, 202, 82, 0.8)); } /* reserve space so the logo never shifts when toggle appears */ .header-container { padding-right: calc(20px + 48px); } } /* Very small screens */ @media (max-width: 480px) { .menu-toggle { width: 42px; height: 42px; } .header-container { padding-right: calc(20px + 42px); } } /* Prevent page scroll when mobile menu is open */ body.is-menu-open { overflow: hidden; } /* Header underline positioning (prevent strikethrough look) */ .slotbot-header .nav-links a { line-height: 1; display: inline-block; padding: 6px 0; } .slotbot-header .nav-links a::after { bottom: -2px; height: 2px; } /* Always show the toggle in Elementor editor preview */ .elementor-editor-active .menu-toggle { display: block !important; } /* === Kill Elementor pink outline on the hamburger === */ .slotbot-header .menu-toggle, .slotbot-header .menu-toggle:focus, .slotbot-header .menu-toggle:active { outline: none !important; box-shadow: none !important; border: none !important; } /* If Elementor injects editor outlines, suppress them in the editor UI only */ .elementor-editor-active .slotbot-header .menu-toggle, .elementor-editor-active .slotbot-header .menu-toggle::before, .elementor-editor-active .slotbot-header .menu-toggle::after, .elementor-editor-active .slotbot-header .elementor-widget-html .elementor-widget-container::before { outline: none !important; box-shadow: none !important; border: none !important; } /* Optional: keep a subtle accessible focus ring (green) on keyboard focus only */ .slotbot-header .menu-toggle:focus-visible { outline: 2px solid #00CA52 !important; outline-offset: 4px !important; box-shadow: none !important; }/* End custom CSS */