* =========================================== JUSTSO NAVIGATION STYLES =========================================== */ /* ----- Make "JustSo" non-clickable ----- */ /* Target the nav link that points to # */ .header-nav-item a[href="#"] { pointer-events: none; /* Can't be clicked */ cursor: default; /* Normal cursor, not hand */ font-weight: 800; /* Extra bold - matches your brand */ font-family: 'Poppins', sans-serif; } /* ----- Style the period prefix on divisions ----- */ /* This makes .creative, .studios, .technology stand out */ /* The period creates visual rhythm and brand identity */ /* ----- Dropdown Animation ----- */ /* Hide dropdowns by default with animation-ready state */ .header-nav-folder-content { opacity: 0; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; /* Prevent clicking while hidden */ } /* Show dropdown on hover with smooth animation */ .header-nav-folder:hover .header-nav-folder-content { opacity: 1; transform: translateY(0); pointer-events: auto; /* Allow clicking when visible */ } /* ----- Hover effect for nav links ----- */ /* Subtle underline animation like ilovecreatives */ .header-nav-item a { position: relative; text-decoration: none; } .header-nav-item a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; height: 1px; background-color: currentColor; transition: width 0.3s ease; } .header-nav-item a:hover::after { width: 100%; } /* Don't show underline on non-clickable JustSo */ .header-nav-item a[href="#"]::after { display: none; } /* ----- Dropdown item hover ----- */ .header-nav-folder-item a { transition: opacity 0.2s ease; } .header-nav-folder-item a:hover { opacity: 0.6; }>