/* =================================== MILKY WAY WEB STUDIO nav.css - Shared Navigation Styles =================================== */ /* color-scheme is set per theme so JS toggles and OS preference both work. Pages without a toggle get OS preference via :root. Pages with a toggle override via [data-theme] on . */ :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } :root { --clr-nav-bg: light-dark(hsl(225, 43%, 93%), hsl(225, 20%, 18%)); --clr-nav-shadow: var(--clr-shadow-md, var(--shadow-medium)); --clr-nav-link: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%)); --clr-nav-link-hover: hsl(126, 97%, 40%); --clr-nav-link-active-bg: var(--clr-125, var(--dark-orange)); /* dark orange */ --clr-nav-link-active-text: var(--clr-text-white-always, var(--text-white)); --clr-nav-hamburger: var(--clr-525, var(--dark-blue)); /* dark blue */ --nav-spacing-normal: 20px; --nav-spacing-compact: 15px; } .top-nav { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 10px 30px; height: 70px; background-color: var(--clr-nav-bg); box-shadow: 0 2px 10px var(--clr-nav-shadow); } .nav-logo img { height: 50px; width: auto; } .nav-logo .mobile-logo { display: none; } .nav-links { list-style: none; display: flex; gap: var(--nav-spacing-normal); align-items: center; } @media (width <= 1024px) { .nav-logo { margin-right: auto; margin-left: -15px; } .nav-links { gap: var(--nav-spacing-compact); } } @media (width <= 900px) { .nav-links { gap: 8px; font-size: 0.8rem; } } .nav-links a { text-decoration: none; color: var(--clr-nav-link, var(--clr-text-black-always)); border: 1px solid var(--clr-nav-link-hover); /* text-shadow: 0 0 2px var(--clr-nav-link-hover); */ box-shadow: 0 6px 6px color-mix(in srgb, var(--clr-nav-link-hover) 30%, transparent); font-size: 1.01rem; font-weight: 700; padding: 6px 12px; border-radius: 5px; letter-spacing: .02rem; transition: all 0.2s ease; } .nav-links a:hover:not(.active) { color: var(--neon-green); -webkit-text-stroke: 1px var(--text-black); box-shadow: 0 6px 6px color-mix(in srgb, var(--clr-nav-link-hover) 80%, transparent); font-weight: 550; letter-spacing: .04rem; } .nav-links a.active { display: none; } /* .nav-links a.active { background-color: var(--clr-nav-link-active-bg); border-radius: 10px; color: var(--clr-nav-link-active-text); font-weight: 800; text-shadow: 0 0 1px black; box-shadow: none; } */ .hamburger-btn { display: none; background: none; border: none; border-radius: 5px; font-size: 1.5rem; cursor: pointer; color: var(--clr-nav-hamburger); padding: 5px 10px; } /*============= -------- i Pad ---*/ @media (width <= 1176px) { .nav-logo img { height: 30px; } } @media (width<= 1070px){ .nav-logo img { height: 20px; } } /* =================================== MOBILE NAV =================================== */ @media (width < 768px) { .nav-logo .desktop-logo { display: none; } .nav-logo .mobile-logo { display: block; height: 60px; margin-left: 15px; } .hamburger-btn { display: block; background-color: var(--clr-prm-700, var(--clr-700)); color: var(--clr-nav-link-active-text); font-weight: bolder; border-radius: 8px; border: 2px solid var(--primary-blue); } .nav-links { display: none; position: absolute; top: 70px; left: 50%; right: 0; background-color: var(--clr-nav-bg); flex-direction: column; padding: 20px; box-shadow: 0 4px 10px var(--clr-nav-shadow); gap: 10px; } .nav-links.open { display: flex; } } /* =================================== DROPDOWN - future use Uncomment when adding Styles dropdown =================================== */ /* .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--clr-nav-bg); list-style: none; padding: 10px 0; border-radius: 5px; box-shadow: 0 4px 10px var(--clr-nav-shadow); min-width: 160px; z-index: 1001; } .dropdown-menu li a { display: block; padding: 8px 20px; white-space: nowrap; } .dropdown:hover .dropdown-menu { display: block; } */