diff --git a/sustainable-farming.html b/sustainable-farming.html index 1d9916e2..f1641a6e 100644 --- a/sustainable-farming.html +++ b/sustainable-farming.html @@ -145,48 +145,64 @@ } /* --- UPDATED TOP NAV WITH HIDE ON SCROLL --- */ - .top-nav { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - background: rgba(30, 41, 59, 0.95); - backdrop-filter: blur(10px); - border: 1px solid var(--border-color); - border-radius: 15px; - margin-bottom: 2rem; - position: sticky; - top: 20px; - z-index: 100; - /* Premium transition timing */ - transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; - } + /* --- UPDATED TOP NAV WITH LINKS --- */ +.top-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; + background: rgba(30, 41, 59, 0.95); + backdrop-filter: blur(10px); + border: 1px solid var(--border-color); + border-radius: 15px; + margin-bottom: 2rem; + position: sticky; + top: 20px; + z-index: 100; + transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), + background 0.3s ease, + border-color 0.3s ease, + box-shadow 0.3s ease; +} - /* Class to trigger the hide effect */ - .nav-hidden { - transform: translateY(-150%); - } +/* Hide on scroll effect */ +.nav-hidden { + transform: translateY(-150%); +} - .nav-left { - display: flex; - align-items: center; - gap: 1rem; - } +.nav-left { + display: flex; + align-items: center; + gap: 2rem; /* bigger gap between Back to Home and links */ +} - .nav-back { - background: var(--bg-tertiary); - color: var(--text-primary); - padding: 10px 15px; - border-radius: 10px; - text-decoration: none; - border: 1px solid var(--border-color); - transition: all 0.3s ease; - } +/* Back to Home pill */ +.nav-back { + background: var(--bg-tertiary); + color: var(--text-primary); + padding: 8px 14px; + border-radius: 999px; + text-decoration: none; + border: 1px solid var(--border-color); + font-weight: 600; + transition: all 0.3s ease; +} +.nav-back:hover { + background: var(--accent-primary); + color: #fff; +} + +/* Extra nav links */ +.nav-left a:not(.nav-back) { + font-weight: 600; + color: #f1f5f9; /* light gray for readability on dark background */ + text-decoration: none; + transition: color 0.3s ease; +} +.nav-left a:not(.nav-back):hover { + color: var(--accent-primary); /* AgriTech green accent */ +} - .nav-back:hover { - background: var(--accent-primary); - color: white; - } /* Animated Theme Toggle */ .theme-toggle { @@ -960,6 +976,9 @@ ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } + + + @@ -974,6 +993,10 @@ Back to Home + Home + Components + Pricing + Contact