/* navbar.css */ /* This file contains all the styles for your new, self-contained navigation bar. */ /* It has been updated with a final alignment fix for the right-side navigation links. */ /* --- Font Import (ensure you have this in your main HTML ) --- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap'); /* --- Universal Box Sizing (Alignment Fix) --- */ .ollie-navbar, .ollie-navbar *, .ollie-navbar *:before, .ollie-navbar *:after { box-sizing: border-box; } /* --- Main Navbar Container --- */ .ollie-navbar { background-color: #4fa5b6; /* As requested */ color: #ffffff; /* As requested */ position: relative; z-index: 1001; } /* --- Centering and Layout Container --- */ .ollie-navbar-container { width: 100%; max-width: 1200px; /* Default max-width for standard desktops */ margin-left: auto; margin-right: auto; padding: 0 30px; /* Side padding to align content with the page */ display: flex; justify-content: space-between; align-items: center; height: 70px; } /* --- Logo --- */ .ollie-navbar-brand { display: flex; align-items: center; } /* --- Desktop Navigation Menu (UPDATED) --- */ .ollie-nav-menu-desktop { display: none; /* Hidden on mobile by default */ align-items: center; /* This margin pushes the entire link group 30px to the left */ margin-right: 30px; } /* --- General Desktop Navigation Link Styling --- */ .ollie-nav-link { color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 600; text-decoration: none; font-size: clamp(16px, 1.1vw, 18px); /* Responsive font size */ transition: opacity 0.2s ease; padding: 10px 20px; /* Padding on each side as requested */ } .ollie-nav-link:hover { opacity: 0.8; } /* --- Mail Icon Link Styling --- */ .ollie-nav-link-icon { display: flex; align-items: center; color: #ffffff; transition: opacity 0.2s ease; padding-left: 20px; } .ollie-nav-link-icon svg { width: 30px; /* As requested */ height: auto; } .ollie-nav-link-icon:hover { opacity: 0.8; } /* --- Mobile Hamburger Button --- */ .ollie-mobile-menu-button { display: flex; flex-direction: column; justify-content: space-around; width: 28px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 2000; } .hamburger-line { width: 100%; height: 3px; background-color: #ffffff; border-radius: 10px; } /* --- Mobile Dropdown Menu --- */ .ollie-nav-menu-mobile { display: none; /* Hidden by default */ flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: #3e8496; padding: 15px 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .ollie-nav-menu-mobile.is-open { display: flex; } .ollie-nav-link-mobile { color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; text-decoration: none; padding: 15px 30px; display: flex; align-items: center; gap: 12px; } .ollie-nav-link-mobile:hover { background-color: rgba(255, 255, 255, 0.1); } .ollie-nav-link-mobile svg { width: 30px; height: auto; } /* --- Responsive Breakpoint for Mobile Menu Trigger --- */ @media screen and (max-width: 991px) { .ollie-nav-menu-desktop { display: none; } .ollie-mobile-menu-button { display: flex; } } /* --- Responsive Breakpoint for Large Monitors --- */ /* This increases the container width on very large screens to maintain alignment. */ @media screen and (min-width: 1920px) { .ollie-navbar-container { max-width: 1600px; } } /* --- Desktop Menu Visibility --- */ @media (min-width: 992px) { .ollie-mobile-menu-button { display: none; } .ollie-nav-menu-desktop { display: flex; } }