/* File Path: /css/mega-menu.css */ /* ==================================================================== ==================================================================== MEGA MENU STYLES Purpose: Defines the appearance and behavior of the dropdown mega menu. - Desktop: Glassmorphism effect, hover-activated with delay. - Mobile: Full-width, click-activated. ==================================================================== ==================================================================== */ /* ============================================================ DROPDOWN PARENT CONTAINER ============================================================ */ /* * Sets the positioning context for the dropdown menu. * This is crucial for the absolute positioning of the child '.dropdown-menu'. */ .header_nav-list_item.dropdown { position: relative; /* Required for absolute positioning of dropdown */ } /* ============================================================ MEGA MENU BASE STYLING ============================================================ */ /* * Base styles for the dropdown menu container. * It is hidden by default and styled with a modern glassmorphism effect. */ .header_nav .dropdown-menu { /* Positioning */ /* ------------- */ position: absolute; /* Positions the menu relative to the '.dropdown' container */ top: 100%; /* Aligns the menu just below the parent navigation item */ left: 50%; /* Centers the menu horizontally to start */ transform: translateX(-50%) translateY(10px); /* Adjusts horizontal centering and adds a small gap from the top */ z-index: 9999; /* Ensures the menu appears above all other page content */ /* Display & Visibility */ /* -------------------- */ display: none; /* The menu is hidden by default */ opacity: 0; /* Used for a smooth fade-in transition */ visibility: hidden; /* Hides the element from screen readers and interactions when not visible */ /* Dimensions */ /* ---------- */ min-width: 280px; /* Sets a minimum width for smaller dropdowns */ max-width: 600px; /* Sets a maximum width to prevent it from becoming too large */ width: max-content; /* Allows the menu to size itself based on its content */ /* Spacing */ /* ------- */ padding: 1.5rem; /* Inner spacing for the content */ margin-top: 0.5rem; /* Adds a small gap between the nav item and the menu */ /* Glassmorphism Effect */ /* -------------------- */ background: rgba(255, 255, 255, 0.95); /* Semi-transparent white background */ backdrop-filter: blur(20px) saturate(180%); /* Applies the blur effect to the content behind the menu */ -webkit-backdrop-filter: blur(20px) saturate(180%); /* Safari compatibility */ /* Borders & Shadows */ /* ----------------- */ border-radius: 16px; /* Modern, rounded corners */ border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border to catch light */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), /* Large, soft shadow for depth */ 0 4px 12px rgba(0, 0, 0, 0.08), /* Medium shadow */ 0 2px 6px rgba(0, 0, 0, 0.04), /* Small, subtle shadow */ inset 0 -1px 2px rgba(0, 0, 0, 0.05); /* Inner shadow to add a 3D effect */ /* Animation */ /* --------- */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition for all properties */ } /* ============================================================ SHOW STATE & ENTRANCE ANIMATION ============================================================ */ /** * Defines the animation for the dropdown menu's entrance. * It smoothly fades in, slides down, and scales up. */ @keyframes dropdownSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /** * Styles for the dropdown menu when it is visible. * The '.show' class is added via JavaScript. */ .header_nav .dropdown-menu.show { display: block !important; /* Overrides the default 'display: none' */ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); /* Slides the menu into its final position */ animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Applies the entrance animation */ } /* ============================================================ MENU LAYOUT & CONTENT ============================================================ */ /* -- SERVICES MEGA MENU - 2 Column Layout -- */ .header_nav .dropdown-menu .row { gap: 1.5rem; /* Space between the columns */ } .header_nav .dropdown-menu .col-md-6 { flex: 1; /* Allows columns to grow equally */ min-width: 200px; /* Ensures columns don't get too narrow */ } /* -- SECTION HEADERS (Category Titles) -- */ .header_nav .dropdown-menu h6 { font-size: 0.75rem; /* Small font size */ font-weight: 700; /* Bold text */ text-transform: uppercase; /* Uppercase letters */ letter-spacing: 0.1em; /* Wide letter spacing for a refined look */ color: #6B7280; /* A muted gray color */ margin-bottom: 0.75rem; /* Space below the header */ padding-left: 0.5rem; /* Slight indentation */ } /* -- DIVIDER LINE -- */ .header_nav .dropdown-menu .border-top { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(229, 231, 235, 0.5) !important; /* Subtle divider line */ } /* -- LIST STYLING -- */ .header_nav .dropdown-menu .list-unstyled { list-style: none; /* Removes default bullet points */ padding: 0; margin: 0; } /* ============================================================ DROPDOWN ITEMS & INTERACTIVITY ============================================================ */ /* -- Default Item Styling -- */ .header_nav .dropdown-menu .dropdown-item { /* Layout */ display: block; padding: 0.75rem 1rem; margin-bottom: 0.5rem; /* Space between items */ /* Typography */ font-size: 0.95rem; font-weight: 500; color: #1F2937; /* Dark gray text for readability */ text-decoration: none; /* Appearance */ border-radius: 10px; /* Rounded corners for a modern button look */ background: rgba(249, 250, 251, 0.5); /* Very light, semi-transparent gray */ border: 1px solid rgba(229, 231, 235, 0.5); /* Subtle border */ /* Animation & Positioning */ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; /* Positioning context for the shimmer effect */ overflow: hidden; /* Hides the shimmer pseudo-element when it's outside the button */ } /* -- Hover Effect -- */ .header_nav .dropdown-menu .dropdown-item:hover { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Vibrant gradient background */ color: #ffffff; /* White text on hover */ box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3), /* Adds a colored shadow for a "glow" effect */ 0 4px 8px rgba(118, 75, 162, 0.2); transform: translateY(-2px) scale(1.02); /* Lifts the item up slightly */ border-color: rgba(255, 255, 255, 0.4); /* Brighter border on hover */ } /* -- Shimmer Effect on Hover -- */ .header_nav .dropdown-menu .dropdown-item::before { content: ''; position: absolute; top: 0; left: -100%; /* Starts off-screen to the left */ width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); /* A transparent-to-white-to-transparent gradient */ transition: left 0.5s; /* Smooth transition for the wipe effect */ } .header_nav .dropdown-menu .dropdown-item:hover::before { left: 100%; /* Moves the shimmer effect across the button on hover */ } /* -- Active/Focus States for Accessibility -- */ .header_nav .dropdown-menu .dropdown-item:active, .header_nav .dropdown-menu .dropdown-item:focus { background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%); /* Slightly darker gradient for "pressed" state */ transform: translateY(0) scale(0.98); /* Simulates the button being pushed down */ outline: none; /* Removes the default focus outline in favor of our custom styles */ } /* ============================================================ SPECIAL BUTTONS ("View All") ============================================================ */ .header_nav .dropdown-menu .btn-outline-primary { /* Layout & Typography */ width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; font-size: 0.9rem; color: #764ba2; /* Purple text color */ /* Gradient Border Effect */ background: linear-gradient(white, white) padding-box, /* White background */ linear-gradient(135deg, #667eea, #764ba2) border-box; /* Gradient is applied to the border area */ border: 2px solid transparent; /* The border is made transparent to let the background gradient show through */ border-radius: 12px; /* Animation */ transition: all 0.3s ease; } .header_nav .dropdown-menu .btn-outline-primary:hover { background: linear-gradient(135deg, #667eea, #764ba2); /* Fills the button with the gradient on hover */ color: white; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); /* Adds a glow effect */ transform: translateY(-2px); /* Lifts the button */ } /* ============================================================ NAVIGATION TOGGLE ARROW (▼) ============================================================ */ /* Hides the default Bootstrap dropdown arrow */ .header_nav .dropdown-toggle::after { display: none; } /* Styles the custom arrow element (a span) */ .header_nav .dropdown-toggle span:last-child { font-size: 0.7rem; margin-left: 0.4rem; color: #9CA3AF; /* Light gray color */ transition: transform 0.3s ease; /* Smooth rotation animation */ display: inline-block; /* Allows transform to be applied */ } /* Rotates the arrow when the dropdown menu is open */ .header_nav .dropdown-toggle[aria-expanded="true"] span:last-child { transform: rotate(180deg); } /* ============================================================ MOBILE STYLES (Responsive Adjustments) ============================================================ */ @media (max-width: 991.98px) { /* * On mobile, the dropdown menu becomes a static block within the navigation flow. */ .header_nav .dropdown-menu { /* Positioning & Sizing */ position: static; /* Removes absolute positioning */ transform: none; /* Resets transforms */ left: 0; right: 0; margin: 0.5rem 0; width: 100%; max-width: 100%; /* Appearance */ background: #f9fafb; /* A simple, light gray background instead of glassmorphism */ backdrop-filter: none; /* Removes the blur effect for performance */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* A simpler, softer shadow */ border-radius: 12px; padding: 1rem; } /* * Stacks the columns vertically on mobile. */ .header_nav .dropdown-menu .row { flex-direction: column; } .header_nav .dropdown-menu .col-md-6 { width: 100%; } } /* ============ Mega menu positioning (navbar) ============ */ /* Ensure the dropdown positions relative to each list item */ .header .header_nav-list_item.dropdown { position: relative; } /* Center the dropdown below its trigger with a small gap */ .header .header_nav-list_item .dropdown-menu { position: absolute; /* anchor to the list item */ left: 50%; /* center horizontally under trigger */ transform: translateX(-50%); /* center correction */ top: calc(100% + 12px); /* vertical spacing below the button */ margin: 0; /* no extra margin interference */ z-index: 1050; /* above the header background */ opacity: 0; /* smooth show/hide if you use .show class */ visibility: hidden; transition: opacity .15s ease, visibility .15s ease; } /* When open (Bootstrap adds .show), make it visible */ .header .header_nav-list_item.show > .dropdown-menu, .header .header_nav-list_item .dropdown-menu.show { opacity: 1; visibility: visible; } /* Guard: prevent header from clipping the menu */ .header { overflow: visible; }