diff --git a/featured-car.html b/featured-car.html
index a2316665..657d3abe 100644
--- a/featured-car.html
+++ b/featured-car.html
@@ -80,15 +80,36 @@
.logo img{ height:36px; width:auto; }
/* Dark mode logo visibility - when not light theme */
- :not(.light) .logo img {
- filter: brightness(0) invert(0);
- opacity: 1;
- transition: opacity 0.3s ease;
- }
- :not(.light) .logo:hover img {
- opacity: 0.8;
- }
+ /* Logo only white in dark mode */
+/* Only in dark mode */
+/* Dark mode logo only */
+html:not(.light) .logo img,
+html:not(.light) .navbar-brand img {
+ filter: brightness(0) invert(1); /* makes the logo white */
+ opacity: 1;
+ transition: opacity 0.3s ease;
+}
+
+html:not(.light) .logo:hover img,
+html:not(.light) .navbar-brand:hover img {
+ opacity: 0.8;
+}
+
+/* Optional: reset logo in light mode */
+html.light .logo img,
+html.light .navbar-brand img {
+ filter: none;
+ opacity: 1;
+}
+
+html:not(.light) .navbar-link{
+ color:white;
+}
+
+
+
+
/* Footer Styles */
.footer-top {
@@ -287,287 +308,110 @@
text-decoration: underline;
}
- .footer-bottom {
- padding: 1.5rem 0;
- border-top: 1px solid var(--glass-brd);
- background: var(--bg-soft);
- }
-
- .footer-bottom-content {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
- gap: 1rem;
- }
-
- .copyright {
- opacity: 0.8;
- font-size: 0.9rem;
- }
-
- .footer-bottom-links {
- display: flex;
- gap: 2rem;
- flex-wrap: wrap;
- }
-
- .footer-bottom-links a {
- color: var(--muted);
- text-decoration: none;
- font-size: 0.9rem;
- transition: color 0.3s ease;
- }
-
- .footer-bottom-links a:hover {
- color: var(--brand);
- }
-
- /* Responsive Design */
- @media (max-width: 768px) {
- .footer-links-grid {
- grid-template-columns: repeat(2, 1fr);
- gap: 1.5rem;
- }
-
- .social-links {
- justify-content: center;
- }
-
- .footer-bottom-content {
- flex-direction: column;
- text-align: center;
- }
-
- .footer-bottom-links {
- justify-content: center;
- }
- }
-
- @media (max-width: 576px) {
- .footer-links-grid {
- grid-template-columns: 1fr;
- }
-
- .footer-top {
- padding: 2rem 0 1.5rem;
- }
-
- .social-link {
- width: 42px;
- height: 42px;
- }
-
- .footer-logo-with-text {
- flex-direction: column;
- align-items: flex-start;
- gap: 8px;
- }
-
- .footer-logo-text {
- font-size: 1.5rem;
- }
- }
-
- /* Floating elements animation */
- @keyframes float {
- 0%, 100% {
- transform: translateY(0px);
- }
- 50% {
- transform: translateY(-10px);
- }
- }
-
- .floating-icon {
- animation: float 3s ease-in-out infinite;
- }
-
- .floating-icon:nth-child(2) {
- animation-delay: 0.5s;
- }
-
- .floating-icon:nth-child(3) {
- animation-delay: 1s;
- }
-
- .floating-icon:nth-child(4) {
- animation-delay: 1.5s;
- }
-
- /* Enhanced footer logo styling */
- .footer-brand-section .footer-logo {
- display: block !important;
- width: auto !important;
- height: 40px !important;
- margin-bottom: 1rem !important;
- filter: none !important;
- transition: all 0.3s ease !important;
- max-width: 200px !important;
- object-fit: contain !important;
- }
-
- .footer-brand-section .footer-logo:hover {
- transform: scale(1.05) !important;
- filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.4)) !important;
- }
-
- /* Footer tagline enhancement */
- .footer-tagline {
- font-size: 1.1rem;
- font-weight: 600;
- margin-bottom: 0.5rem;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- color: var(--text);
- }
-
- .footer-tagline i {
- color: var(--brand);
- font-size: 1.2rem;
- }
-
- /* Footer description enhancement */
- .footer-description {
- opacity: 0.8;
- line-height: 1.6;
- max-width: 400px;
- color: var(--muted);
- }
-
- /* Debug and ensure logo visibility */
- .footer-brand-section {
- position: relative;
- }
-
- .footer-brand-section .footer-logo {
- background: var(--card-2);
- border-radius: 8px;
- padding: 8px;
- border: 1px solid var(--glass-brd);
- }
-
- /* Ensure logo container has proper dimensions */
- .footer-brand-section .col-lg-6:first-child {
- min-height: 120px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- }
-
- /* Logo container styling */
- .footer-logo-container {
- position: relative;
- display: inline-block;
- }
-
- .footer-logo-with-text {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 1rem;
- }
-
- .footer-logo-icon {
- width: 40px;
- height: 40px;
- background: linear-gradient(135deg, var(--brand), var(--brand-2));
- border-radius: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- font-size: 1.2rem;
- box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
- transition: all 0.3s ease;
- }
-
- .footer-logo-icon:hover {
- transform: scale(1.05);
- box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
- }
-
- .footer-logo-text {
- background: linear-gradient(135deg, var(--brand), var(--brand-2));
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
- font-family: 'Inter', sans-serif;
- letter-spacing: -0.02em;
- font-weight: 700;
- font-size: 1.8rem;
- }
-
- /* Additional footer utility classes */
- .container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 0 20px;
- }
-
- .row {
- display: flex;
- flex-wrap: wrap;
- margin: 0 -15px;
- }
-
- .col-lg-6 {
- flex: 0 0 50%;
- max-width: 50%;
- padding: 0 15px;
- }
-
- @media (max-width: 992px) {
- .col-lg-6 {
- flex: 0 0 100%;
- max-width: 100%;
- }
- }
-
- .mb-3 {
- margin-bottom: 1rem;
- }
-
- .position-fixed {
- position: fixed;
- }
-
- .d-inline-flex {
- display: inline-flex;
- }
-
- .align-items-center {
- align-items: center;
- }
-
- .justify-content-center {
- justify-content: center;
+ /* Footer */
+ .footer { background: #f4f7fb; color: #111827; }
+ html:not(.light) .footer { background: #0b0f14; color: #e5e7eb; }
+ html:not(.light) .footer-link { color: #cbd5e1; }
+ html:not(.light) .footer .footer-link:hover { color: #60a5fa; }
+ html:not(.light) .social-link { color: #cbd5e1; }
+ html:not(.light) .footer-text{color:#cbd5e1;}
+ html:not(.light) .footer-list-title{color:#cbd5e1;}
+ /* New Footer UI */
+ .footer {
+ padding: 60px 0 20px;
+ }
+ .footer .container { max-width: 1200px; margin-inline: auto; }
+ .footer-grid {
+ display: grid;
+ grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
+ gap: 32px;
+ align-items: start;
}
+ .footer-brand .logo { display: inline-flex; align-items: center; gap: 8px; }
+ .footer-brand .logo img { height: 44px; }
+ .footer-text { margin-top: 12px; color: #475569; }
+
+ .footer .social-list { display: flex; gap: 12px; margin-top: 14px; }
+ .footer .social-link { font-size: 22px; color: #1f2937; }
+ .footer .social-link:hover { color: #2563eb; }
+ html:not(.light) .footer .social-link { color: #cbd5e1; }
+ .footer-list-title { font-weight: 800; margin-bottom: 10px; color: #0f172a; }
+ html:not(.light) .footer-list-title { color: #e2e8f0; }
+ .footer-link { color: #374151; font-weight: 500; text-decoration: none; }
+ .footer-link:hover { color: #2563eb; transform: translateX(2px); }
+ .newsletter { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; }
+ html:not(.light) .newsletter { background: #111827; border-color: #263241; }
+ .newsletter h4 { margin-bottom: 8px; font-weight: 800; }
+ .newsletter p { font-size: 0.95rem; color: #475569; margin-bottom: 12px; }
+ html:not(.light) .newsletter p { color: #94a3b8; }
+ .newsletter .form { display: flex; gap: 8px; }
+ .newsletter input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb; outline: none; }
+ html:not(.light) .newsletter input { background: #0f1218; color: #e5e7eb; border-color: #263241; }
+ .newsletter button { padding: 10px 14px; border-radius: 10px; background: #2563eb; color: #fff; border: none; font-weight: 700; }
+ .newsletter button:hover { background: #1e40af; }
+ .footer-bottom { margin-top: 32px; border-top: 1px solid #e5e7eb; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
+ html:not(.light) .footer-bottom { border-color: #263241; }
+ .footer-bottom .mini-links { display: flex; gap: 12px; }
+ .footer-bottom .mini-links a { color: #475569; font-size: 0.95rem; }
+ .footer-bottom .mini-links a:hover { color: #2563eb; }
+ .footer-list{list-style-type: none;}
+ .social-list{list-style-type: none;}
.navbar-list{
display:flex; list-style:none; gap:14px; padding:0; margin:0; align-items:center;
+
}
.navbar-link, .nav-btn{
text-decoration:none; color:var(--text); padding:10px 12px; border-radius:10px; font-weight:600;
transition: all .25s ease;
+ color: #374151;
}
- .navbar-link:hover{ background: rgba(124,58,237,.12); }
+ .navbar-link:hover{ color: #2563eb !important;
+ transform: translateY(-1px) }
.nav-btn{
display:flex; align-items:center; gap:8px; border:1px solid var(--glass-brd); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
box-shadow: var(--shadow);
}
- .theme-switch{
- position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
- border:1px solid var(--glass-brd); padding:8px 10px; border-radius:999px;
- background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
+ .theme-switch {
+
+ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+ border: none !important;
+ border-radius: 25px !important;
+ margin-right: 5px;
+ padding: 10px 25px !important;
+ font-weight: 700 !important;
+ color: white !important;
+ transition: all 0.3s ease !important;
+ box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
}
+
+ .theme-toggle-switch:hover {
+ transform: translateY(-2px) !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
+ border-color: #2563eb !important;
+ }
+
.theme-switch input{ appearance:none; width:0; height:0; position:absolute; }
- .theme-switch .dot{
- width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
- background: var(--card); border:1px solid var(--glass-brd); transition:transform .25s ease, background .25s ease;
- box-shadow: var(--shadow);
+
+ .btn-vehigo {
+ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+ border: none !important;
+ border-radius: 25px !important;
+ margin-right: 5px;
+ padding: 10px 20px !important;
+ font-weight: 600 !important;
+ color: white !important;
+ transition: all 0.3s ease !important;
+ box-shadow: 0 2px 8px rgba(37, 100, 235, 0.3) !important;
+ text-decoration: none;
+ }
+
+ .btn-vehigo:hover {
+ transform: translateY(-2px) !important;
+ box-shadow: 0 4px 15px rgba(37, 100, 235, 0.4) !important;
+ background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
}
- .theme-switch .label{ font-weight:600; color:var(--muted); }
+
+
/* Hero */
.hero{
@@ -760,10 +604,14 @@
+
+
+ Login
+
+
@@ -975,6 +823,8 @@ Mahindra Scorpio
const root = document.documentElement;
const toggle = document.getElementById('theme-toggle');
const saved = localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+ const themeText = document.getElementById('theme-text');
+
root.classList.toggle('light', saved === 'light');
if(toggle) toggle.checked = saved === 'light';
@@ -982,6 +832,7 @@ Mahindra Scorpio
const isLight = toggle.checked;
root.classList.toggle('light', isLight);
localStorage.setItem('theme', isLight ? 'light' : 'dark');
+ if (themeText) themeText.textContent = isLight ? 'Dark' : 'Light';
});
})();
@@ -1092,146 +943,61 @@ Mahindra Scorpio
})();
-
-