Skip to content

Fix/add navbar sustainable farming #1838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
omroy07 merged 3 commits into from
Jun 2, 2026
Merged

Fix/add navbar sustainable farming #1838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dedead0
feat: added responsive footer to Sustainable Farming Page
Muskankr May 31, 2026
43010fc
feat: improved Terms of Service page UI with banner, TOC, and respons…
Muskankr May 31, 2026
29eeccf
feat: added navbar with Back to Home + links (Home, Components, Prici…
Muskankr May 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 61 additions & 38 deletions sustainable-farming.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -960,6 +976,9 @@
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}



</style>
</head>

Expand All @@ -974,6 +993,10 @@
<a href="index.html" class="nav-back">
<i class="fas fa-arrow-left"></i> Back to Home
</a>
<a href="index.html">Home</a>
<a href="components.html">Components</a>
<a href="pricing.html">Pricing</a>
<a href="contact.html">Contact</a>
</div>
<div>
<!-- Animated Sun/Moon Toggle -->
Expand Down
50 changes: 23 additions & 27 deletions terms-and-service.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,9 @@ body {
/* Back to Home button */
.back-bar-inner {
max-width: 1200px;
margin: 0 auto 1rem auto;
margin: 0 auto 0.5rem auto; /* reduced bottom margin */
display: flex;
justify-content: flex-start;
position: relative;
z-index: 10;
}

/* base styling stays the same */
Expand Down Expand Up @@ -188,12 +186,12 @@ body {

/* Page Header */
.page-header {
background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
color: white;
padding: 3rem 0;
background: linear-gradient(135deg, #22c55e, #16a34a);
padding: 6px 10px; /* reduced from 60px+ */
border-radius: 8px;
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.page-header::before {
Expand All @@ -207,12 +205,9 @@ body {
opacity: 0.3;
}

.header-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
.header-content h1 {
font-size: clamp(22px, 5vw, 32px); /* smaller heading */
margin-bottom: 8px;
}

.page-header h1 {
Expand All @@ -222,20 +217,14 @@ body {
}

.subtitle {
font-size: 1.125rem;
margin-bottom: 1.5rem;
opacity: 0.9;
font-size: 16px;
margin-bottom: 4px;
color: rgba(255,255,255,.85);
}

.last-updated {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
backdrop-filter: blur(10px);
font-size: 13px;
color: rgba(255,255,255,.7);
}

/* Main Content Layout */
Expand Down Expand Up @@ -809,10 +798,13 @@ body {
================================ */

.navbar {
width: 100%;
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
padding: 0.6rem 0; /* reduced from 1rem */
position: sticky;
top: 0;
z-index: 999;
z-index: 100;
backdrop-filter: blur(12px);
}

.navbar-content {
Expand Down Expand Up @@ -973,3 +965,7 @@ body {
font-size: 1.4rem;
letter-spacing: 0.5px;
}

.brand .logo {
font-size: 1.3rem; /* instead of 1.5rem */
}
Loading