diff --git a/farm_dashboard.html b/farm_dashboard.html index a7ec8355..cbba375c 100644 --- a/farm_dashboard.html +++ b/farm_dashboard.html @@ -204,10 +204,177 @@ opacity: 0.9; transform: translateY(-1px); } + +.site-footer { + background: linear-gradient(135deg, #1e293b, #065f46); /* dark blue → green */ + color: #fff; + margin-top: auto; + padding: 2.5rem 1.5rem; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + + +.footer-inner { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.5rem; + align-items: flex-start; +} + +.footer-brand { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.footer-logo { + width: 48px; + height: 48px; + border-radius: 8px; + object-fit: cover; + background: #fff; + padding: 4px; +} + +.site-footer h3, +.site-footer h4 { + margin: 0 0 0.5rem 0; +} + +.site-footer p { + margin: 0; + opacity: 0.9; +} + +.site-footer ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.site-footer a { + color: #fff; + text-decoration: none; + opacity: 0.9; + transition: opacity 0.2s; +} + +.site-footer a:hover { + opacity: 1; + text-decoration: underline; +} + +.footer-bottom { + max-width: 1200px; + margin: 1rem auto 0; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.25); + text-align: center; + font-size: 0.9rem; + opacity: 0.9; +} + +.social-media { + display: flex; + gap: 1rem; + margin-top: 0.5rem; +} + +.social-media a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + transition: all 0.3s ease; + font-size: 1.2rem; +} + +.social-media a:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +/* Navbar styling */ +.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: 1.5rem; + position: sticky; + top: 0; + 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; +} + +.top-nav a { + color: #f1f5f9; + text-decoration: none; + font-weight: 600; + margin-right: 1.5rem; + transition: color 0.3s ease; +} + +.top-nav a:hover { + color: var(--accent-primary); +} + +.nav-logo { + font-size: 1.1rem; + font-weight: 700; + margin-right: 2rem; +} + +.nav-right { + display: flex; + align-items: center; + gap: 1rem; +} + +/* Hide on scroll effect */ +.nav-hidden { + transform: translateY(-150%); +} + + + +
+ + + diff --git a/smart_loan.html b/smart_loan.html index f60bb6da..abda0ac8 100644 --- a/smart_loan.html +++ b/smart_loan.html @@ -143,34 +143,85 @@ [data-theme="dark"] .loan-result-box strong { color: #e0ffe0; } - .navbar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 20px; - background: #2e7d32; - color: #fff; + /* Navbar container */ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 24px; + background: linear-gradient(90deg, #2e7d32, #43a047); /* green gradient */ + color: #fff; + border-radius: 0 0 12px 12px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} + +/* Logo + title */ +.nav-left { + display: flex; + align-items: center; + gap: 10px; +} + +.nav-logo { + width: 36px; + height: 36px; + border-radius: 6px; + background: #fff; + object-fit: cover; + padding: 3px; } .nav-title { - font-size: 18px; - font-weight: bold; - color: #fff; - margin-left: 40px; + font-size: 20px; + font-weight: 700; + letter-spacing: 1px; +} + +/* Links */ +.nav-links { + display: flex; + gap: 1.5rem; } .nav-link { - color: #fff; - text-decoration: none; - font-weight: 500; + color: #fff; + text-decoration: none; + font-weight: 600; + position: relative; + transition: color 0.3s ease; +} + +.nav-link::after { + content: ""; + position: absolute; + bottom: -4px; + left: 0; + width: 0%; + height: 2px; + background: #fff; + transition: width 0.3s ease; } .nav-link:hover { - text-decoration: underline; - color: #e0ffe0; - + color: #e0ffe0; +} + +.nav-link:hover::after { + width: 100%; +} + +/* Responsive */ +@media (max-width: 768px) { + .nav-links { + flex-direction: column; + gap: 0.8rem; + background: rgba(0,0,0,0.2); + padding: 10px; + border-radius: 8px; + } } + /* Floating Chatbot Button */ #chatbotBtn { position: fixed; @@ -744,15 +795,21 @@ -