/* ================================================================ EMP Ultra Mega Menu — AORO Solar v3.1 Panels injected into → position:fixed works correctly ================================================================ */ /* ── Mega Menu Core ── */ #ux-site-header, #ux-navbar, #ux-navbar .nav-inner { max-width: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; } #ux-navbar .nav-logo { margin-right: auto !important; } /* Ensure the menu stays centered if desired, or let it follow logo */ #ux-nav-menu { margin-right: 40px !important; } /* ── Drop arrow on mega items ── */ #ux-nav-menu > li > a .emp-arrow { width: 11px; height: 11px; opacity: 0.45; margin-left: 4px; vertical-align: middle; transition: opacity 0.2s, transform 0.25s cubic-bezier(.4,0,.2,1); display: inline-block; } #ux-nav-menu > li.mega-active > a .emp-arrow, #ux-nav-menu > li.has-mega > a:hover .emp-arrow { opacity: 1; transform: rotate(180deg); } /* ── Hover indicator (underline) on mega triggers ── */ #ux-nav-menu > li.has-mega { position: relative; } /* CSS bridge: tall transparent zone BELOW the li to cover the gap between navbar and panel for smoother mouse movement. pointer-events: none here — the must remain fully clickable. Hover is preserved via the panel's own ::before bridge. */ #ux-nav-menu > li.has-mega::after { content: ''; position: absolute; bottom: -60px; left: -30px; right: -30px; height: 70px; background: transparent; z-index: 0; /* below the */ pointer-events: none; /* never eat clicks */ } /* The must sit above everything so it stays fully clickable */ #ux-nav-menu > li.has-mega > a { position: relative; z-index: 2; display: inline-flex; align-items: center; } /* No extra ::before underline — header-style.css full-width ::after line is enough */ #ux-nav-menu > li.has-mega > a::before { display: none !important; } /* ── Header must sit ABOVE overlay so nav links stay clickable ── */ #ux-site-header { z-index: 99500 !important; } #ux-navbar, #ux-nav-menu, #ux-nav-menu > li, #ux-nav-menu > li > a { position: relative; z-index: 99500; pointer-events: auto !important; cursor: pointer; } /* ── Backdrop overlay ── */ #emp-mega-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); z-index: 99000; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } #emp-mega-overlay.active { opacity: 1; pointer-events: all; } /* ── Mega Panel ── */ .emp-mega-panel { position: fixed; left: 0; width: 100%; z-index: 99400; background: linear-gradient(180deg, #060f0b 0%, #070e0a 100%); border-top: 1px solid rgba(31,111,92,0.4); border-bottom: 1px solid rgba(31,111,92,0.1); box-shadow: 0 30px 80px rgba(0,0,0,0.75); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s; } /* Invisible zone ABOVE panel — closes the gap between navbar and panel so mouse events aren't lost while moving cursor from nav to panel */ .emp-mega-panel::before { content: ''; position: absolute; top: -30px; left: 0; right: 0; height: 30px; background: transparent; pointer-events: auto; z-index: 99420; } /* Green glow line at top */ .emp-mega-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(31,111,92,0.7) 20%, rgba(93,232,176,0.5) 50%, rgba(31,111,92,0.7) 80%, transparent 100%); pointer-events: none; } .emp-mega-panel.active { opacity: 1; visibility: visible; transform: translateY(0); } /* ── Panel inner grid ── */ .emp-mega-inner { max-width: 1680px; margin: 0 auto; padding: 40px 56px 48px; display: grid; gap: 52px; align-items: start; } #emp-panel-solar-systems .emp-mega-inner, #emp-panel-solar .emp-mega-inner, #emp-panel-packages .emp-mega-inner, #emp-panel-about .emp-mega-inner { grid-template-columns: 1fr 1fr 1.35fr; } #emp-panel-support .emp-mega-inner { grid-template-columns: 1fr 1.1fr 1fr; } /* ── Column header ── */ .emp-col-hd { font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; } .emp-col-hd::before { content: ''; width: 14px; height: 2px; background: #1F6F5C; border-radius: 2px; flex-shrink: 0; } /* ── Link items ── */ .emp-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; } .emp-col ul li a { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 8px; border-radius: 10px; color: rgba(255,255,255,0.65); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background 0.16s ease, color 0.16s ease, padding-left 0.16s ease; } .emp-col ul li a:hover { background: rgba(31,111,92,0.14); color: #fff; padding-left: 14px; } /* Icon box */ .emp-li-icon { width: 32px; height: 32px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #5de8b0; transition: background 0.16s, border-color 0.16s, color 0.16s; } .emp-col ul li a:hover .emp-li-icon { background: rgba(31,111,92,0.22); border-color: rgba(31,111,92,0.45); color: #7ff0c0; } /* Text block */ .emp-li-text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .emp-li-text strong { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.92); line-height: 1.2; display: block; } .emp-col ul li a:hover .emp-li-text strong { color: #fff; } .emp-li-text small { font-size: 11.5px; color: rgba(255,255,255,0.48); font-weight: 400; line-height: 1.25; display: block; } /* Badge */ .emp-li-badge { background: rgba(31,111,92,0.18); color: #5de8b0; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 50px; border: 1px solid rgba(31,111,92,0.32); flex-shrink: 0; } /* ── Feature list (col 2) ── */ .emp-feat-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; } .emp-feat-list li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: rgba(255,255,255,0.75); font-weight: 400; } .emp-feat-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #1F6F5C; flex-shrink: 0; box-shadow: 0 0 7px rgba(31,111,92,0.7); } .emp-info-p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.78; margin: 0 0 24px; } /* ── Visual card (col 3) ── */ .emp-vis-card { border-radius: 16px; overflow: hidden; position: relative; height: 240px; background-size: cover; background-position: center; transition: transform 0.32s ease, box-shadow 0.32s ease; display: block; text-decoration: none; box-shadow: 0 4px 24px rgba(0,0,0,0.4); } .emp-vis-card:hover { transform: scale(1.018) translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.6); } /* Dark gradient over image */ .emp-vis-card > div::before { content: none; /* handled below on the card itself */ } .emp-vis-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(5,14,10,0.88) 0%, rgba(5,14,10,0.45) 60%, rgba(5,14,10,0.2) 100%); z-index: 1; border-radius: 16px; } .emp-vis-body { position: absolute; inset: 0; z-index: 2; padding: 26px 28px; display: flex; flex-direction: column; justify-content: flex-end; } .emp-vis-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.25; letter-spacing: -0.015em; } .emp-vis-sub { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 0 0 16px; line-height: 1.5; } .emp-vis-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: #1F6F5C; color: #fff; border-radius: 50px; font-size: 12.5px; font-weight: 700; text-decoration: none; width: fit-content; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.02em; box-shadow: 0 4px 16px rgba(31,111,92,0.3); } .emp-vis-btn:hover { background: #25896e; transform: translateY(-2px); color: #fff; box-shadow: 0 6px 24px rgba(31,111,92,0.5); } /* ── Finance Footer (Desktop) ── */ .emp-mega-footer { grid-column: 1 / -1; margin-top: -10px; padding-top: 24px; border-top: 1px solid rgba(31,111,92,0.15); display: flex; justify-content: flex-start; } .emp-mega-footer a { display: flex; align-items: center; gap: 15px; text-decoration: none; padding: 12px 20px; background: rgba(31,111,92,0.08); border: 1px solid rgba(31,111,92,0.2); border-radius: 12px; transition: all 0.2s ease; } .emp-mega-footer a:hover { background: rgba(31,111,92,0.15); border-color: rgba(31,111,92,0.4); transform: translateY(-1px); } .emp-mega-footer strong { color: #fff; font-size: 14px; font-weight: 700; } .emp-mega-footer span { color: #5de8b0; font-size: 14px; font-weight: 500; } /* ──────────────────────────────────────────── Site Header Drawer — Finance Footer (Mobile) ──────────────────────────────────────────── */ .drawer-mega-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.08); } .drawer-mega-footer a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; padding: 12px 14px; background: rgba(31,111,92,0.12); border-radius: 8px; } .drawer-mega-footer strong { color: #fff; font-size: 13px; } .drawer-mega-footer span { color: #5de8b0; font-size: 13px; font-weight: 600; } /* ── Responsive ── */ @media (max-width: 1024px) { .emp-mega-panel { display: none !important; } #emp-mega-overlay { display: none !important; } }