/** * HVAC Master Trainer Navigation Styles * Distinctive color scheme for master trainer navigation */ /* Master Menu Color Variables */ .hvac-master-menu-wrapper { --master-primary: #6B46C1; /* Deep purple for primary */ --master-hover: #553C9A; /* Darker purple for hover */ --master-active: #9333EA; /* Bright purple for active */ --master-text: #FFFFFF; /* White text */ --master-bg: #F3E8FF; /* Light purple background */ --master-border: #9333EA; /* Purple border */ --master-dropdown-bg: #FFFFFF; /* White dropdown background */ --master-dropdown-hover: #F3E8FF; /* Light purple hover */ } /* Copy essential styles from regular navigation */ .hvac-master-menu-wrapper { position: relative; z-index: 9999; width: 100%; margin-bottom: 20px; } /* Master Menu Container */ .hvac-master-menu-wrapper { background: linear-gradient(135deg, var(--master-primary) 0%, var(--master-hover) 100%); box-shadow: 0 2px 8px rgba(107, 70, 193, 0.2); border-bottom: 2px solid var(--master-border); } /* Master Menu Main Items */ .hvac-master-menu > li > a { color: var(--master-text) !important; font-weight: 500; padding: 12px 20px; transition: all 0.3s ease; background: transparent; border-radius: 4px; margin: 0 2px; } .hvac-master-menu > li > a:hover, .hvac-master-menu > li.current-menu-item > a { background: rgba(255, 255, 255, 0.15) !important; color: var(--master-text) !important; transform: translateY(-1px); } /* Master Menu Active State */ .hvac-master-menu > li.current-menu-item > a { background: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Master Dropdown Menus */ .hvac-master-menu .sub-menu { background: var(--master-dropdown-bg) !important; border: 1px solid var(--master-border); box-shadow: 0 4px 12px rgba(107, 70, 193, 0.15); border-top: 3px solid var(--master-active); } .hvac-master-menu .sub-menu li a { color: var(--master-primary) !important; padding: 10px 20px; border-bottom: 1px solid rgba(147, 51, 234, 0.1); transition: all 0.2s ease; } .hvac-master-menu .sub-menu li a:hover { background: var(--master-dropdown-hover) !important; color: var(--master-hover) !important; padding-left: 25px; } .hvac-master-menu .sub-menu li.current-menu-item a { background: var(--master-bg) !important; color: var(--master-active) !important; font-weight: 600; } /* Master Menu Toggle Arrow */ .hvac-master-menu .menu-toggle::after { border-color: var(--master-text) transparent transparent transparent; } .hvac-master-menu li.menu-open > a .menu-toggle::after { border-color: transparent transparent var(--master-text) transparent; } /* Master Menu Badge for Special Items */ .hvac-master-menu .menu-badge { background: var(--master-active); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 5px; font-weight: bold; } /* Announcements Special Styling */ .hvac-master-menu a[href*="announcements"] { position: relative; } .hvac-master-menu a[href*="announcements"]::before { content: "📢"; margin-right: 5px; } /* Master Dashboard Special Styling */ .hvac-master-menu a[href*="master-dashboard"] { position: relative; } .hvac-master-menu a[href*="master-dashboard"]::before { content: "📊"; margin-right: 5px; } /* Help Icon for Master Menu */ .hvac-master-menu .menu-help-icon { background: rgba(255, 255, 255, 0.2); border-radius: 50%; padding: 5px 10px; } .hvac-master-menu .menu-help-icon:hover { background: rgba(255, 255, 255, 0.3); } /* Mobile Responsive Master Menu */ @media (max-width: 768px) { .hvac-master-nav { margin-bottom: 20px; border-radius: 4px; } .hvac-master-menu { flex-direction: column; padding: 4px 8px; gap: 1px; } .hvac-master-menu > li { width: 100%; } .hvac-master-menu > li > a { justify-content: center; padding: 14px 16px; font-size: 13px; border-radius: 4px; } .hvac-master-menu .sub-menu { position: static; width: 100%; box-shadow: none; border-left: 3px solid var(--master-active); background: rgba(243, 232, 255, 0.95) !important; border-radius: 4px; margin-top: 2px; } } @media (max-width: 480px) { .hvac-master-menu > li > a { padding: 12px 14px; font-size: 12px; } } /* Master Menu Animation Effects */ @keyframes masterPulse { 0% { box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(147, 51, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(147, 51, 234, 0); } } .hvac-master-menu .menu-new-item { animation: masterPulse 2s infinite; } /* Master Menu Breadcrumb Override */ .hvac-master-menu-wrapper + .hvac-breadcrumbs { background: var(--master-bg); border-left: 3px solid var(--master-primary); } /* Visual Indicator for Master Trainer */ .hvac-master-menu-wrapper::before { content: "Master Trainer Dashboard"; position: absolute; top: -25px; right: 20px; font-size: 11px; color: var(--master-primary); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; background: white; padding: 2px 10px; border-radius: 10px; } /* Enhanced menu structure with professional layout */ .hvac-master-nav { position: relative; padding: 0; background: var(--master-primary); border-radius: 8px; box-shadow: 0 4px 12px rgba(107, 70, 193, 0.2); margin-bottom: 30px; } .hvac-master-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; background: transparent; flex-wrap: wrap; gap: 2px; padding: 8px 12px; } .hvac-master-menu > li { position: relative; margin: 0; } .hvac-master-menu > li > a { display: flex; align-items: center; text-decoration: none; padding: 12px 18px; border-radius: 6px; transition: all 0.2s ease; font-size: 14px; font-weight: 600; color: var(--master-text); background: transparent; border: none; cursor: pointer; white-space: nowrap; } .hvac-master-menu > li > a:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .hvac-master-menu > li.current-menu-item > a { background: rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } .hvac-master-menu .dashicons { margin-right: 8px; font-size: 16px; } /* Ensure dropdowns are visible (inherit fix from main navigation) */ .hvac-master-menu-wrapper, .hvac-master-menu { overflow: visible !important; } .hvac-master-menu .sub-menu { z-index: 999999 !important; position: absolute !important; display: none; } .hvac-master-menu li.menu-open > .sub-menu { display: block !important; }