/* ========================================================================== NOBLE AUTO INSTRUMENTS - MODERN REDESIGN SYSTEM (Netlify Ready) ========================================================================== */ :root { --primary-navy: #0f172a; --secondary-navy: #1e293b; --accent-red: #d81324; --accent-red-hover: #ff2a3b; --accent-cyan: #06b6d4; --dark-bg: #090d16; --card-bg: #ffffff; --text-dark: #0f172a; --text-muted: #64748b; --text-light: #f8fafc; --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.2); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.05); --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08); --shadow-hover: 0 16px 40px rgba(216, 19, 36, 0.15); --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* IMPORTANT: overflow-x:hidden must be on , NOT . Setting it on body breaks position:fixed children (CSS spec issue) — fixed elements get clipped/scroll with the body instead of the viewport. */ html { overflow-x: hidden; } /* Base Body Styles */ body { font-family: 'Ubuntu', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-dark); background-color: #f8fafc; /* NO overflow-x:hidden here — would break the fixed header */ } /* ============================================================ FIXED HEADER WRAPPER Both topbar + navbar live inside #site-header which is fixed. They move together — no overlap, no blank strip. ============================================================ */ #site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1030; /* No padding-bottom needed — body padding handled by JS */ } /* Topbar - collapses on scroll */ .topbar-redesign { transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease; max-height: 60px; overflow: hidden; } .topbar-redesign.topbar-hidden { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none; } /* Navbar - sits naturally inside the fixed #site-header wrapper */ .navbar.sticky-top { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100%; z-index: auto; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease; } /* Topbar Styling */ .topbar-redesign { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: var(--text-light); font-size: 0.875rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .topbar-redesign a { color: #cbd5e1; transition: var(--transition-fast); } .topbar-redesign a:hover { color: #ffffff; } .topbar-redesign i { color: var(--accent-red); } /* Navbar Brand & Links */ .navbar { box-sizing: border-box; } .navbar-brand { height: 85px !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; min-width: 180px; margin-right: 2.5rem !important; } .navbar-brand img, .header-logo-img { height: 60px !important; max-height: 65px !important; width: auto !important; object-fit: contain !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); transition: transform 0.3s ease; } .navbar-brand:hover img { transform: scale(1.04); } /* Header Enquiry Button styling */ .header-enquiry-btn { white-space: nowrap !important; flex-shrink: 0 !important; font-weight: 600; border-radius: var(--radius-sm); box-shadow: 0 4px 14px rgba(216, 19, 36, 0.25); transition: var(--transition-fast); } .header-enquiry-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(216, 19, 36, 0.4); } .navbar-light .navbar-nav .nav-link { font-family: 'Barlow', sans-serif; font-weight: 600; color: #334155 !important; letter-spacing: 0.3px; position: relative; transition: var(--transition-fast); white-space: nowrap; margin-right: 0 !important; margin-left: 0 !important; } .navbar-light .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 0; height: 3px; background: var(--accent-red); border-radius: 2px; transition: var(--transition-fast); transform: translateX(-50%); } .navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link.active::after { width: 60%; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active { color: var(--accent-red) !important; } /* Responsive Header Typography & Spacing Scaling */ @media (min-width: 992px) and (max-width: 1199.98px) { .navbar-brand { height: 75px !important; min-width: 150px; margin-right: 1.5rem !important; } .navbar-brand img, .header-logo-img { height: 52px !important; } .navbar-light .navbar-nav .nav-link { font-size: 0.82rem !important; padding: 0.75rem 0.35rem !important; } .header-enquiry-btn { font-size: 0.82rem !important; padding: 0.45rem 0.85rem !important; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .navbar-brand { height: 80px !important; min-width: 170px; margin-right: 2.25rem !important; } .navbar-brand img, .header-logo-img { height: 58px !important; } .navbar-light .navbar-nav .nav-link { font-size: 0.88rem !important; padding: 0.85rem 0.55rem !important; } .header-enquiry-btn { font-size: 0.88rem !important; padding: 0.5rem 1rem !important; } } @media (min-width: 1400px) { .navbar-brand { height: 88px !important; min-width: 190px; margin-right: 3rem !important; } .navbar-brand img, .header-logo-img { height: 65px !important; } .navbar-light .navbar-nav .nav-link { font-size: 0.95rem !important; padding: 1rem 0.85rem !important; } .header-enquiry-btn { font-size: 0.95rem !important; padding: 0.55rem 1.25rem !important; } } /* Mobile Collapse Navigation Drawer (<992px) */ @media (max-width: 991.98px) { .navbar-collapse { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-top: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .navbar-light .navbar-nav .nav-link { padding: 0.65rem 0.5rem !important; border-bottom: 1px solid rgba(226, 232, 240, 0.6); } .navbar-light .navbar-nav .nav-link::after { display: none; } .header-enquiry-btn { display: flex !important; width: 100%; justify-content: center; margin-top: 1rem; margin-left: 0 !important; } } /* Dropdown Menus */ .dropdown-menu { border: none; border-radius: var(--radius-md); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); padding: 0.75rem 0; background: #ffffff; overflow: hidden; } .dropdown-item { font-weight: 500; padding: 0.6rem 1.5rem; color: #334155; transition: var(--transition-fast); } .dropdown-item:hover { background-color: rgba(216, 19, 36, 0.06); color: var(--accent-red); padding-left: 1.75rem; } /* Modern Hero / Carousel Styling */ .hero-section { position: relative; background-color: #07111f; background-image: linear-gradient(90deg, rgba(5, 13, 25, 0.96) 0%, rgba(5, 13, 25, 0.82) 38%, rgba(5, 13, 25, 0.36) 70%, rgba(5, 13, 25, 0.58) 100%), url('../img/noble-auto-hero-workshop.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; color: #ffffff; overflow: hidden; padding: 5rem 0; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 78% 32%, rgba(216, 19, 36, 0.2) 0%, transparent 38%), linear-gradient(180deg, rgba(15, 23, 42, 0.04) 45%, rgba(5, 13, 25, 0.5) 100%); pointer-events: none; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 50px; background: rgba(216, 19, 36, 0.15); border: 1px solid rgba(216, 19, 36, 0.3); color: #ff4d5e; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.25rem; } .hero-title { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: calc(2.2rem + 1.5vw); line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 1.5rem; color: #ffffff; } .hero-subtitle { font-size: 1.15rem; color: #94a3b8; max-width: 650px; margin-bottom: 2rem; line-height: 1.6; } /* Homepage About Section */ .about-home-section { padding: 6rem 0; background: #fff; } .about-home-image-wrap { position: relative; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(15, 23, 42, .16); } .about-home-image-wrap::before { content: ''; position: absolute; inset: 14px; z-index: 1; border: 1px solid rgba(255,255,255,.55); border-radius: calc(var(--radius-lg) - 8px); pointer-events: none; } .about-home-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); } .about-experience-badge { position: absolute; right: -24px; bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; border-radius: var(--radius-md) 0 0 var(--radius-md); background: linear-gradient(135deg, var(--accent-red), #a60d19); color: #fff; box-shadow: 0 14px 30px rgba(216,19,36,.32); } .about-experience-badge strong { font: 700 3rem/.9 'Barlow', sans-serif; } .about-experience-badge span { font: 600 .8rem/1.25 'Ubuntu', sans-serif; letter-spacing: .08em; text-transform: uppercase; } .about-eyebrow { margin-bottom: .75rem; color: var(--accent-red); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .about-home-title { margin-bottom: 1.25rem; color: var(--primary-navy); font: 700 clamp(2rem, 3vw, 3rem)/1.12 'Barlow', sans-serif; } .about-home-title span { color: var(--accent-red); } .about-home-copy { margin-bottom: 1.75rem; color: var(--text-muted); line-height: 1.75; } .about-service-list { display: grid; gap: .85rem; } .about-service-item { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: var(--radius-md); background: #f8fafc; } .about-service-number { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(216,19,36,.1); color: var(--accent-red); font: 700 1rem 'Barlow', sans-serif; } .about-service-item h3 { margin-bottom: .25rem; color: var(--primary-navy); font-size: 1.05rem; } .about-service-item p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; } /* Modern Action Buttons */ .btn-modern-primary { background: linear-gradient(135deg, var(--accent-red) 0%, #b91c1c 100%); color: #ffffff !important; font-weight: 600; padding: 0.85rem 2rem; border-radius: var(--radius-sm); border: none; box-shadow: 0 4px 15px rgba(216, 19, 36, 0.35); transition: var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; } .btn-modern-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(216, 19, 36, 0.5); background: linear-gradient(135deg, #ff2a3b 0%, #d81324 100%); } .btn-modern-outline { background: transparent; color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.25); font-weight: 600; padding: 0.8rem 1.8rem; border-radius: var(--radius-sm); transition: var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; } .btn-modern-outline:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } /* Feature & Service Cards */ .feature-card { background: #ffffff; border-radius: var(--radius-md); padding: 2.25rem 1.75rem; box-shadow: var(--shadow-sm); border: 1px solid #f1f5f9; transition: var(--transition-smooth); height: 100%; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background: var(--accent-red); transition: var(--transition-fast); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(216, 19, 36, 0.15); } .feature-card:hover::before { height: 100%; } .feature-icon-wrapper { width: 64px; height: 64px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(216, 19, 36, 0.1) 0%, rgba(216, 19, 36, 0.02) 100%); color: var(--accent-red); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1.5rem; transition: var(--transition-fast); } .feature-card:hover .feature-icon-wrapper { background: var(--accent-red); color: #ffffff; transform: scale(1.08); } .feature-card h4 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.75rem; color: var(--primary-navy); } .feature-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; } /* Product Cards */ .product-card-redesign { background: #ffffff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; transition: var(--transition-smooth); height: 100%; display: flex; flex-direction: column; } .product-card-redesign:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); border-color: rgba(216, 19, 36, 0.3); } .product-card-thumb { position: relative; background: #f8fafc; padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 220px; overflow: hidden; } .product-card-thumb img { max-height: 180px; object-fit: contain; transition: transform 0.4s ease; } .product-card-redesign:hover .product-card-thumb img { transform: scale(1.06); } .product-card-badge { position: absolute; top: 12px; left: 12px; background: var(--accent-red); color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .product-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .product-card-body h3 { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--primary-navy); margin-bottom: 0.5rem; } .product-card-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.25rem; flex-grow: 1; } /* Contact / Enquiry Cards */ .contact-info-card { background: #ffffff; border-radius: var(--radius-md); padding: 2rem; box-shadow: var(--shadow-sm); border: 1px solid #e2e8f0; transition: var(--transition-fast); height: 100%; } .contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(216, 19, 36, 0.2); } .contact-info-card i { font-size: 2rem; color: var(--accent-red); margin-bottom: 1rem; } /* Netlify Contact Form */ .enquiry-form-card { background: #ffffff; border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-md); border: 1px solid #e2e8f0; } .enquiry-form-card .form-control { border: 1.5px solid #cbd5e1; border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; font-size: 0.95rem; transition: var(--transition-fast); } .enquiry-form-card .form-control:focus { border-color: var(--accent-red); box-shadow: 0 0 0 4px rgba(216, 19, 36, 0.12); outline: none; } .enquiry-form-card label { color: #475569; font-weight: 500; } /* Quick Contact Floating Bar */ .quick-floating-bar { position: fixed; bottom: 24px; left: 24px; z-index: 999; display: flex; flex-direction: column; gap: 10px; } .quick-contact-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-navy); color: #ffffff !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25); font-size: 1.25rem; transition: var(--transition-fast); text-decoration: none; } .quick-contact-btn.whatsapp { background: #25d366; } .quick-contact-btn.phone { background: var(--accent-red); } .quick-contact-btn.email { background: #0284c7; } .quick-contact-btn:hover { transform: scale(1.12); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } /* Footer Styling */ .footer-redesign { background: #090d16; color: #94a3b8; padding-top: 5rem; padding-bottom: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-redesign h4, .footer-redesign h5 { color: #ffffff; font-family: 'Barlow', sans-serif; font-weight: 700; margin-bottom: 1.5rem; } .footer-redesign a { color: #94a3b8; transition: var(--transition-fast); text-decoration: none; } .footer-redesign a:hover { color: #ffffff; padding-left: 4px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 3.5rem; padding-top: 1.75rem; text-align: center; font-size: 0.875rem; } /* Form Alert Notice */ .form-response-alert { display: none; border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1.5rem; font-size: 0.95rem; } .form-response-alert.success { display: block; background-color: #dcfce7; border: 1px solid #86efac; color: #166534; } .form-response-alert.error { display: block; background-color: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; } /* Netlify form spam protection */ .spam-trap { position: absolute !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } .netlify-captcha { min-height: 78px; overflow: hidden; } /* Responsive adjustments */ @media (max-width: 991.98px) { .about-home-section { padding: 4.5rem 0; } .about-experience-badge { right: 16px; } .hero-section { background-position: 62% center; } .hero-section::before { content: ''; position: absolute; inset: 0; background: rgba(5, 13, 25, 0.62); pointer-events: none; } .hero-title { font-size: 2.2rem; } .navbar-light .navbar-nav .nav-link::after { display: none; } .quick-floating-bar { bottom: 80px; left: 16px; } }