/* ═══════════════════════════════════════════════════════════════════════ PKC Modern Navigation — nav-modern.css v3.1 Targets: standard WordPress wp_nav_menu() — .main-navigation Theme mechanism: display:none → display:flex on hover (NOT opacity) Strategy: NEVER override display on ul ul base — let theme handle it. Only override visual properties + add @keyframes entrance. Brand: #00267a (blue) | #f2c433 (gold) | #fff | #1d2327 ═══════════════════════════════════════════════════════════════════════ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ENTRANCE ANIMATION (fires when display:flex is set by hover rule) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @keyframes pkc-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESKTOP (≥ 1025 px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media screen and (min-width: 1025px) { /* Allow dropdown to overflow below nav bar (theme has overflow:hidden) */ .main-navigation { overflow: visible !important; } /* Each top-level li needs position:relative so dropdown positions under it */ .main-navigation ul > li { position: relative; padding: 0 !important; box-shadow: none !important; } /* ── Top-level link ── */ .main-navigation ul > li > a { font-family: "Poppins", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #1d2327 !important; padding: 12px 14px !important; letter-spacing: 0.01em; position: relative; text-decoration: none; transition: color 0.2s ease !important; } /* Underline indicator */ .main-navigation ul > li:hover > a, .main-navigation ul > li.current-menu-item > a, .main-navigation ul > li.current-menu-parent > a, .main-navigation ul > li.current-menu-ancestor > a { color: #00267a !important; } .main-navigation ul > li:hover > a::after, .main-navigation ul > li.current-menu-item > a::after, .main-navigation ul > li.current-menu-parent > a::after, .main-navigation ul > li.current-menu-ancestor > a::after { width: 60%; } /* Hide triangle arrows the theme adds */ .main-navigation ul li::before, .main-navigation ul li.current-menu-item::before, .main-navigation ul li.current-menu-parent::before { display: none !important; } /* Note: li::after is used for triangles — suppress it, but a::after is our underline */ .main-navigation ul > li::after { display: none !important; border: none !important; } /* ════════════════════════════════════════════════════════════ DROPDOWN PANEL — visual styling only The theme handles display:none / display:flex via CSS hover. We MUST NOT set display here — only visual overrides. ════════════════════════════════════════════════════════════ */ .main-navigation ul ul { /* position/layout — correct placement */ position: absolute !important; top: 100% !important; left: 0; margin-top: 0 !important; z-index: 99999 !important; /* visual */ background: #ffffff !important; border-top: 3px solid #f2c433 !important; border-left: 1px solid #dce6ff !important; border-right: 1px solid #dce6ff !important; border-bottom: 1px solid #dce6ff !important; border-radius: 0 0px 14px 14px !important; box-shadow: 0 20px 50px rgba(0, 38, 122, 0.13), 0 4px 12px rgba(0, 0, 0, 0.07) !important; min-width: 220px !important; /* NO display, opacity, or visibility — theme controls those */ } /* Entrance animation fires when theme sets display:flex on hover */ .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { animation: pkc-nav-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important; } /* ── Level-2 links ── */ .main-navigation ul ul li { box-shadow: none !important; } .main-navigation ul ul li a { font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #2d3748 !important; background: transparent !important; padding: 9px 20px 9px 14px !important; margin-left: 0 !important; border-left: 3px solid transparent; width: auto !important; display: block !important; white-space: nowrap; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease, border-left-color 0.15s ease, padding-left 0.15s ease !important; } .main-navigation ul ul li a:hover { color: #00267a !important; background: #eef2ff !important; border-left-color: #f2c433 !important; padding-left: 20px !important; } /* ── Level-3 flyout ── */ .main-navigation ul ul ul { top: 0 !important; left: 100% !important; border-radius: 8px 14px 14px 14px !important; margin-left: 4px !important; } /* Remove em-dash prefix on level-3 links */ .main-navigation ul ul ul li a::before { display: none !important; } .main-navigation ul ul ul li a { font-size: 13px !important; margin-left: 0 !important; color: #4a5568 !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STICKY HEADER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #masthead.fixHeader { box-shadow: 0 2px 20px rgba(0, 38, 122, 0.11), 0 1px 4px rgba(0, 0, 0, 0.05) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MOBILE (< 1025 px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media screen and (max-width: 1024px) { /* Sidebar nav panel */ .main-navigation ul.nav-menu { background: #00267a !important; border-radius: 16px 0 0 16px !important; padding: 20px 0 !important; box-shadow: -4px 0 32px rgba(0, 38, 122, 0.30) !important; max-width: 300px !important; } .main-navigation ul.nav-menu > li > a { font-family: "Poppins", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #ffffff !important; padding: 12px 24px !important; border-left: 3px solid transparent; transition: border-color 0.15s, background 0.15s, color 0.15s !important; } .main-navigation ul.nav-menu > li > a:hover { border-left-color: #f2c433 !important; background: rgba(255,255,255,0.08) !important; color: #f2c433 !important; } .main-navigation ul ul { background: rgba(255,255,255,0.05) !important; box-shadow: none !important; border: none !important; border-left: 3px solid #f2c433 !important; border-radius: 0 !important; padding: 4px 0 8px !important; margin-left: 16px !important; } .main-navigation ul ul li a { font-size: 13px !important; font-weight: 400 !important; color: rgba(255,255,255,0.82) !important; padding: 8px 20px !important; border-left: none !important; background: transparent !important; } .main-navigation ul ul li a:hover { color: #f2c433 !important; background: rgba(255,255,255,0.06) !important; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: #1d2327 !important; } }