/* ========================================================================== Modern Navbar — experimental Logo left, purple links right, no dark bar. To activate: add this line to the of every HTML file (after ezibuild.css): To deactivate: remove that line. ========================================================================== */ #header { display: flex; align-items: center; justify-content: space-between; padding: 0.5em 2em; background-color: #fff; background-image: none; text-align: left; position: relative; z-index: 100; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); } #header h1 { padding: 0; margin: 0; flex-shrink: 0; } #header h1 a img { height: 60px; width: auto; display: block; } #nav { background: none; background-color: transparent; background-image: none; padding: 0; flex-shrink: 0; } #nav:after { display: none; } #nav > ul > li a { color: #6f4b9e; font-weight: 600; font-size: 0.88em; padding: 0.5em 0.6em; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 4px; transition: color 0.2s ease, background-color 0.2s ease; } #nav > ul > li:hover a { color: #4a2d7a; background-color: rgba(111, 75, 158, 0.08); } #nav > ul > li.current a, #nav > ul > li.active a { color: #4a2d7a; } #nav > ul > li.current:before, #nav > ul > li.active.current:before { display: none; } /* Services dropdown */ .dropotron { background-color: #fff; background-image: none; border: 1px solid #e8e0f0; box-shadow: 0 0.5em 1.5em rgba(111, 75, 158, 0.12); color: #333; padding: 0.5em 0; } .dropotron > li > a { color: #6f4b9e; } .dropotron > li.active > a, .dropotron > li:hover > a { color: #4a2d7a; background-color: #f8f4fd; } /* Override the ≤1280px reset that stacks the header back to the old layout */ @media screen and (max-width: 1280px) { #header { display: flex; padding: 0.4em 1.25em; } #header h1 { padding: 0; } #header h1 a img { height: 54px; } } /* Hide desktop header at mobile breakpoint so the hamburger nav takes over */ @media screen and (max-width: 840px) { #header { display: none; } }