/* ============================================================ LUBES CENTRE — Main Stylesheet Mobile-first. Hindi + English bilingual. ============================================================ */ /* ── Design Tokens (inlined from variables.css) ────────── */ :root { --primary: #003087; --primary-dark: #002068; --secondary: #FFD100; --whatsapp: #25D366; --whatsapp-dark: #1da851; --cat-bike: #E84E0F; --cat-car: #1A5276; --cat-truck: #C0392B; --cat-auto: #1E8449; --cat-tractor: #B7770D; --cat-industrial: #5D6D7E; --black: #1A1A1A; --dark-gray: #444444; --mid-gray: #777777; --light-gray: #E8E8E8; --bg: #F4F4F4; --white: #FFFFFF; --success: #27AE60; --warning: #F39C12; --font-heading: 'Poppins', sans-serif; --font-body: 'Noto Sans', 'Noto Sans Devanagari', sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-hero: 3rem; --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; --w-black: 800; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-loose: 1.9; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; --shadow-sm: 0 1px 4px rgba(0,0,0,0.10); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --shadow-card: 0 2px 10px rgba(0,0,0,0.08); --nav-h: 64px; --transition: 0.2s ease; } /* Fonts and icons are loaded via tags in each HTML for better performance */ /* ── Reset & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 17px; overflow-x: hidden; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--black); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ul, ol { list-style: none; } /* ── Hindi text ─────────────────────────────────────────── */ .hi, [lang="hi"] { font-family: var(--font-body); line-height: var(--leading-loose); } /* ── Container ─────────────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); } /* ── Section spacing ─────────────────────────────────────────── */ .section { padding: var(--sp-16) 0; } .section-sm { padding: var(--sp-10) 0; } .section-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--w-bold); color: var(--black); text-align: center; margin-bottom: var(--sp-2); } .section-title-hi { font-size: var(--text-lg); color: var(--mid-gray); text-align: center; margin-bottom: var(--sp-8); font-weight: var(--w-regular); } .section-divider { width: 56px; height: 4px; background: var(--primary); border-radius: var(--r-full); margin: var(--sp-3) auto var(--sp-8); } /* ── Buttons ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-heading); font-weight: var(--w-semibold); font-size: var(--text-base); line-height: 1; padding: var(--sp-4) var(--sp-6); border-radius: var(--r-full); min-height: 52px; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); white-space: nowrap; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--primary-dark); } .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); } .btn-whatsapp { background: var(--whatsapp); color: var(--white); width: 100%; white-space: normal; text-align: center; line-height: 1.3; } .btn-whatsapp:hover { background: var(--whatsapp-dark); } .btn-call { background: var(--black); color: var(--white); } .btn-call:hover { background: var(--dark-gray); } .btn i { font-size: 1.2em; } /* ── Badges ─────────────────────────────────────────── */ .badge { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-full); line-height: 1.6; } .badge-primary { background: #E6EBF5; color: var(--primary); } .badge-success { background: #E9F7EF; color: var(--success); } .badge-orange { background: #FEF3E2; color: #C47D0E; } .badge-dark { background: var(--black); color: var(--white); } .badge-blue { background: #EAF0F8; color: var(--cat-car); } /* ── TOP BAR ─────────────────────────────────────────── */ .top-bar { background: var(--black); color: var(--white); font-size: var(--text-sm); padding: var(--sp-2) 0; } .top-bar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--sp-2); min-height: 32px; } .top-bar-left { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 1; min-width: 0; overflow: hidden; } .top-bar-left a { display: flex; align-items: center; gap: var(--sp-1); color: var(--white); opacity: 0.85; white-space: nowrap; } .top-bar-left a:hover { opacity: 1; } .top-bar-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } /* Language toggle */ .lang-toggle { display: flex; align-items: center; background: rgba(255,255,255,0.15); border-radius: var(--r-full); padding: 2px; gap: 2px; } .lang-toggle button { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--w-semibold); padding: 4px 12px; border-radius: var(--r-full); color: rgba(255,255,255,0.7); transition: all var(--transition); line-height: 1.4; } .lang-toggle button.active { background: var(--white); color: var(--black); } .lang-toggle button:hover:not(.active) { color: var(--white); } /* ── NAVIGATION ─────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: var(--shadow-sm); height: var(--nav-h); } .nav .container { display: flex; align-items: center; height: 100%; gap: var(--sp-6); } .nav-logo { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .nav-logo-icon { width: 40px; height: 40px; background: var(--primary); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.25rem; } .nav-logo-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .nav-logo-text { line-height: 1.15; } .nav-logo-text strong { display: block; font-family: var(--font-heading); font-size: 1rem; font-weight: var(--w-bold); color: var(--black); } .nav-logo-text span { font-size: var(--text-xs); color: var(--mid-gray); } .nav-links { display: none; align-items: center; gap: var(--sp-6); flex: 1; } .nav-links a { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: var(--w-medium); color: var(--dark-gray); transition: color var(--transition); position: relative; padding-bottom: 2px; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--primary); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-ctas { display: none; align-items: center; gap: var(--sp-3); margin-left: auto; } .nav-ctas .btn { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); } .nav-hamburger { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); font-size: 1.5rem; color: var(--black); transition: background var(--transition); } .nav-hamburger:hover { background: var(--bg); } /* Mobile drawer */ .nav-drawer { position: fixed; top: 0; right: -100%; width: min(300px, 85vw); height: 100vh; background: var(--white); box-shadow: var(--shadow-lg); z-index: 200; transition: right 0.3s ease; display: flex; flex-direction: column; overflow-y: auto; } .nav-drawer.open { right: 0; } .nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--light-gray); } .nav-drawer-links { display: flex; flex-direction: column; padding: var(--sp-4); gap: var(--sp-1); flex: 1; } .nav-drawer-links a { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-heading); font-weight: var(--w-medium); font-size: var(--text-lg); color: var(--dark-gray); padding: var(--sp-4) var(--sp-4); border-radius: var(--r-md); transition: all var(--transition); } .nav-drawer-links a:hover, .nav-drawer-links a.active { color: var(--primary); background: #FDECEA; } .nav-drawer-footer { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); border-top: 1px solid var(--light-gray); } .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 190; } .nav-overlay.visible { display: block; } /* ── HERO ─────────────────────────────────────────── */ .hero { background: linear-gradient(135deg, #001040 0%, var(--primary) 50%, #0050C8 100%); min-height: 88vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: var(--sp-16) 0; } .hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--sp-10); align-items: center; } .hero-eyebrow { display: inline-flex; align-items: flex-start; flex-wrap: nowrap; gap: var(--sp-2); background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); color: var(--white); font-size: var(--text-sm); font-weight: var(--w-semibold); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg); margin-bottom: var(--sp-4); backdrop-filter: blur(4px); max-width: 100%; } .hero-eyebrow i { margin-top: 2px; flex-shrink: 0; } .hero-eyebrow span { overflow-wrap: break-word; word-break: break-word; } .hero-title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--w-black); color: var(--white); line-height: var(--leading-tight); margin-bottom: var(--sp-2); } .hero-title-hi { font-size: var(--text-xl); font-weight: var(--w-semibold); color: rgba(255,255,255,0.80); margin-bottom: var(--sp-4); line-height: var(--leading-loose); } .hero-sub { font-size: var(--text-lg); color: rgba(255,255,255,0.80); margin-bottom: var(--sp-8); max-width: 520px; } .hero-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; } .hero-ctas .btn-whatsapp { flex: 1; min-width: 180px; } .hero-ctas .btn-outline { flex: 1; min-width: 150px; border-color: rgba(255,255,255,0.7); color: var(--white); } .hero-ctas .btn-outline:hover { background: var(--white); color: var(--primary); } .save-number-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: 10px 20px; border-radius: var(--r-full); border: 1.5px dashed rgba(255,255,255,0.5); color: rgba(255,255,255,0.85); font-size: var(--text-sm); font-weight: var(--w-semi); text-decoration: none; transition: border-color 0.2s, color 0.2s; } .save-number-btn:hover { border-color: var(--white); color: var(--white); } .save-number-btn i { font-size: 1rem; } /* ── PWA Install Bar ──────────────────────────────────────── */ #pwa-install-bar, #ios-install-tip { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--white); border-top: 2px solid var(--primary); box-shadow: 0 -4px 20px rgba(0,0,0,0.12); padding: var(--sp-3) var(--sp-4); } .pwa-install-inner { display: flex; align-items: center; gap: var(--sp-3); max-width: 640px; margin: 0 auto; } .pwa-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pwa-install-text strong { font-size: var(--text-sm); color: var(--black); } .pwa-install-text span { font-size: var(--text-xs); color: var(--mid-gray); } .pwa-install-btn { background: var(--primary); color: var(--white); border: none; border-radius: var(--r-full); padding: 8px 18px; font-weight: var(--w-bold); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; flex-shrink: 0; } .pwa-dismiss-btn { background: none; border: none; color: var(--mid-gray); font-size: 1.1rem; cursor: pointer; padding: 4px; flex-shrink: 0; } .hero-badges { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-8); } .hero-badge-item { display: flex; align-items: center; gap: var(--sp-2); color: rgba(255,255,255,0.85); font-size: var(--text-sm); } .hero-badge-item i { font-size: 1.2rem; color: var(--secondary); } /* ── VEHICLE SELECTOR ─────────────────────────────────────── */ .vehicles { background: var(--white); } .vehicles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .vehicle-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); border-radius: var(--r-lg); border: 2px solid var(--light-gray); background: var(--white); text-decoration: none; transition: all var(--transition); text-align: center; min-height: 110px; } .vehicle-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-3px); } .vehicle-tile-icon { width: 52px; height: 52px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--white); } .vehicle-tile-label { font-family: var(--font-heading); font-weight: var(--w-semibold); font-size: var(--text-sm); color: var(--black); line-height: 1.3; } .vehicle-tile-label-hi { font-size: var(--text-xs); color: var(--mid-gray); margin-top: 2px; } /* ── PRODUCT CARDS ─────────────────────────────────────────── */ .products-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } .product-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--transition), transform var(--transition); } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .product-card-img { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255,255,255,0.9); position: relative; flex-shrink: 0; } .product-card-img .product-grade-overlay { position: absolute; bottom: var(--sp-2); left: var(--sp-3); background: rgba(0,0,0,0.55); color: var(--white); font-size: var(--text-xs); font-weight: var(--w-semibold); padding: 2px 8px; border-radius: var(--r-full); } .product-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .product-card-name { font-family: var(--font-heading); font-weight: var(--w-bold); font-size: 1rem; color: var(--black); line-height: var(--leading-snug); } .product-card-name-hi { font-size: var(--text-sm); color: var(--mid-gray); line-height: var(--leading-loose); } .product-card-desc { font-size: var(--text-sm); color: var(--dark-gray); line-height: var(--leading-normal); } /* Size selector pills */ .size-selector { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .size-btn { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--w-semibold); padding: 5px 12px; border-radius: var(--r-full); border: 1.5px solid var(--light-gray); color: var(--dark-gray); background: var(--white); transition: all var(--transition); min-height: 44px; } .size-btn:hover { border-color: var(--primary); color: var(--primary); } .size-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); } .product-price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; } .price-col { display: flex; flex-direction: column; gap: 1px; } .price-mrp { font-size: var(--text-xs); color: var(--mid-gray); text-decoration: line-through; } .price-main-row { display: flex; align-items: baseline; gap: var(--sp-1); } .price-value { font-family: var(--font-heading); font-weight: var(--w-bold); font-size: var(--text-xl); color: var(--primary); } .price-unit { font-size: var(--text-sm); color: var(--mid-gray); } .price-save { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--w-bold); background: #E9F7EF; color: #1E8449; padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap; } .price-note { font-size: var(--text-xs); color: var(--mid-gray); margin-top: var(--sp-1); } /* ── BELOW-FOLD RENDERING HINT ────────────────────────────── */ /* Skips layout/paint for off-screen sections on weak CPUs */ .why-us, .legacy-section, .footer { content-visibility: auto; contain-intrinsic-size: 0 400px; } /* ── WHY CHOOSE US ─────────────────────────────────────────── */ .why-us { background: var(--black); color: var(--white); } .why-us .section-title { color: var(--white); } .why-us .section-title-hi { color: rgba(255,255,255,0.6); } .why-us .section-divider { background: var(--secondary); } .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } .why-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6); text-align: center; transition: background var(--transition); } .why-card:hover { background: rgba(255,255,255,0.10); } .why-icon { width: 64px; height: 64px; border-radius: var(--r-xl); background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--white); margin: 0 auto var(--sp-5); } .why-title { font-family: var(--font-heading); font-weight: var(--w-bold); font-size: var(--text-lg); color: var(--white); margin-bottom: var(--sp-2); } .why-title-hi { font-size: var(--text-base); color: rgba(255,255,255,0.7); margin-bottom: var(--sp-3); line-height: var(--leading-loose); } .why-desc { font-size: var(--text-sm); color: rgba(255,255,255,0.6); line-height: var(--leading-normal); } /* ── HOW TO ORDER (section) ─────────────────────────────────────────── */ .how-steps { background: var(--white); } .steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); position: relative; } .step-card { display: flex; gap: var(--sp-5); align-items: flex-start; background: var(--bg); border-radius: var(--r-lg); padding: var(--sp-6); width: 100%; box-sizing: border-box; overflow: hidden; } .step-number { font-family: var(--font-heading); font-weight: var(--w-black); font-size: 2.5rem; color: var(--primary); line-height: 1; flex-shrink: 0; width: 56px; text-align: center; } .step-content { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .step-icon { font-size: 1.75rem; color: var(--secondary); margin-bottom: var(--sp-2); } .step-title { font-family: var(--font-heading); font-weight: var(--w-bold); font-size: var(--text-lg); color: var(--black); margin-bottom: var(--sp-1); } .step-title-hi { font-size: var(--text-base); color: var(--mid-gray); margin-bottom: var(--sp-2); line-height: var(--leading-loose); } .step-desc { font-size: var(--text-sm); color: var(--dark-gray); } /* ── FILTER TABS ─────────────────────────────────────────── */ .filter-bar { display: flex; flex-wrap: nowrap; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filter-bar::-webkit-scrollbar { display: none; } .filter-btn { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--w-semibold); white-space: nowrap; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-full); border: 2px solid var(--light-gray); color: var(--dark-gray); background: var(--white); transition: all var(--transition); min-height: 44px; } .filter-btn i { font-size: 1.1em; } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); } /* ── NOTICE BANNER ─────────────────────────────────────────── */ .price-notice { background: #FEF9E7; border: 1px solid #F9E07A; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); font-size: var(--text-sm); color: #7D6608; display: flex; gap: var(--sp-2); align-items: flex-start; } .price-notice i { flex-shrink: 0; font-size: 1.1em; margin-top: 2px; } /* ── FOOTER ─────────────────────────────────────────── */ .footer { background: #0F0F0F; color: rgba(255,255,255,0.75); padding: var(--sp-16) 0 var(--sp-8); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); margin-bottom: var(--sp-10); } .footer-brand {} .footer-logo { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .footer-logo-icon { width: 44px; height: 44px; background: var(--primary); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.3rem; } .footer-logo-text strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--w-bold); color: var(--white); } .footer-logo-text span { font-size: var(--text-xs); color: rgba(255,255,255,0.5); } .footer-tagline { font-size: var(--text-sm); line-height: var(--leading-loose); margin-bottom: var(--sp-5); } .footer-contact-list { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-contact-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); } .footer-contact-item i { color: var(--secondary); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; } .footer-contact-item a { color: rgba(255,255,255,0.75); } .footer-contact-item a:hover { color: var(--white); } .footer-heading { font-family: var(--font-heading); font-weight: var(--w-bold); color: var(--white); margin-bottom: var(--sp-4); font-size: 1rem; } .footer-links { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.65); transition: color var(--transition); } .footer-links a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; text-align: center; } .footer-bottom p { font-size: var(--text-sm); color: rgba(255,255,255,0.45); } .footer-bpcl-badge { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--secondary); margin-top: var(--sp-4); } .footer-bpcl-badge img { border-radius: 50%; flex-shrink: 0; } .footer-bpcl-badge > div { display: flex; flex-direction: column; line-height: 1.3; } .footer-bpcl-label { font-size: var(--text-xs); color: rgba(255,255,255,0.55); font-weight: var(--w-regular); } .footer-bpcl-name { font-size: var(--text-sm); color: var(--white); font-weight: var(--w-semibold); } /* ── STICKY WHATSAPP CTA (mobile) ─────────────────────────── */ .sticky-wa { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); } .sticky-wa-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: var(--white); font-size: 1.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,0.45); transition: transform var(--transition), box-shadow var(--transition); } .sticky-wa-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.55); } .sticky-wa-label { background: var(--white); color: var(--black); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--w-semibold); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); box-shadow: var(--shadow-md); animation: pulse-label 2s infinite; } @keyframes pulse-label { 0%,100% { opacity:1; } 50% { opacity:0.7; } } /* ── PAGE HERO (inner pages) ─────────────────────────────── */ .page-hero { background: linear-gradient(135deg, var(--black) 0%, #3a0005 100%); padding: var(--sp-16) 0; color: var(--white); text-align: center; } .page-hero h1 { font-family: var(--font-heading); font-weight: var(--w-black); font-size: var(--text-3xl); margin-bottom: var(--sp-2); } .page-hero p { color: rgba(255,255,255,0.7); font-size: var(--text-lg); } /* ── ABOUT PAGE ─────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); align-items: center; } .about-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); } .about-stat { text-align: center; padding: var(--sp-6) var(--sp-4); background: var(--bg); border-radius: var(--r-lg); } .about-stat-num { font-family: var(--font-heading); font-weight: var(--w-black); font-size: var(--text-3xl); color: var(--primary); } .about-stat-label { font-size: var(--text-sm); color: var(--mid-gray); margin-top: var(--sp-1); } /* ── CONTACT PAGE ─────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); } .contact-info-card { background: var(--white); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-card); } .contact-info-item { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5) 0; border-bottom: 1px solid var(--light-gray); } .contact-info-item:last-child { border-bottom: none; } .contact-info-icon { width: 48px; height: 48px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .contact-info-icon.blue { background: #E6EBF5; color: var(--primary); } .contact-info-icon.green { background: #E9F7EF; color: var(--success); } .contact-info-icon.blue { background: #EAF0F8; color: var(--cat-car); } .contact-info-icon.amber { background: #FEF3E2; color: var(--warning); } .contact-info-label { font-size: var(--text-sm); color: var(--mid-gray); margin-bottom: var(--sp-1); } .contact-info-value { font-weight: var(--w-semibold); font-size: var(--text-base); color: var(--black); } .contact-info-value a { color: var(--black); } .contact-info-value-hi { font-size: var(--text-sm); color: var(--mid-gray); margin-top: 2px; line-height: var(--leading-loose); } .contact-ctas { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); } .map-container { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); height: 300px; background: var(--light-gray); } .map-container iframe { width: 100%; height: 100%; border: 0; } .map-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); color: var(--mid-gray); text-align: center; padding: var(--sp-8); } .map-placeholder i { font-size: 3rem; color: var(--primary); } .map-placeholder p { font-size: var(--text-sm); } /* ── HOW TO ORDER PAGE ─────────────────────────────────────── */ .order-steps-full .step-card { background: var(--white); border: 2px solid var(--light-gray); transition: border-color var(--transition), box-shadow var(--transition); } .order-steps-full .step-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); } .order-tip { background: #E9F7EF; border: 1px solid #A9DFBF; border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--text-sm); color: #1E8449; display: flex; gap: var(--sp-2); align-items: flex-start; } .order-tip p { min-width: 0; overflow-wrap: break-word; word-break: break-word; } /* ── UTILITIES ─────────────────────────────────────────── */ .text-center { text-align: center; } .text-red { color: var(--primary); } .text-gray { color: var(--mid-gray); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .hidden { display: none !important; } /* Language show/hide */ .lang-en, .lang-hi { display: block; } body.lang-en .lang-hi { display: none !important; } body.lang-hi .lang-en { display: none !important; } body.lang-en span.lang-hi, body.lang-hi span.lang-en { display: none !important; } body.lang-en span.lang-en, body.lang-hi span.lang-hi { display: inline !important; } /* ── RESPONSIVE ─────────────────────────────────────────── */ @media (min-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(3, 1fr); } .vehicles-grid { grid-template-columns: repeat(3, 1fr); } .steps-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .map-container { height: 400px; } } @media (min-width: 768px) { .hero-title { font-size: var(--text-hero); } } @media (min-width: 1024px) { .nav-links { display: flex; } .nav-ctas { display: flex; } .nav-hamburger { display: none; } .hero .container { grid-template-columns: 1fr 1fr; } .products-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .about-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr 1fr; } .steps-grid { grid-template-columns: repeat(3, 1fr); } .vehicles-grid { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1280px) { .products-grid { grid-template-columns: repeat(4, 1fr); } } /* ── Delivery info cards (how-to-order) ──────────────────── */ .delivery-cards { display: grid; gap: var(--sp-4); width: 100%; min-width: 0; } .delivery-card { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--sp-4); align-items: flex-start; background: var(--white); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-card); width: 100%; min-width: 0; box-sizing: border-box; } /* Icon inside delivery card — lock it to 48×48 so it never stretches */ .delivery-card > div:first-child { flex: 0 0 48px; width: 48px; height: 48px; } .delivery-card-text { min-width: 0; overflow-wrap: break-word; word-break: break-word; flex: 1; } /* ── PIN Code Checker ──────────────────────────────────────── */ .pin-checker { background: var(--white); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); margin-top: var(--sp-8); box-shadow: var(--shadow-card); } .pin-checker-title { font-family: var(--font-heading); font-weight: var(--w-bold); font-size: var(--text-lg); margin-bottom: var(--sp-2); text-align: center; overflow-wrap: break-word; word-break: break-word; } .pin-checker-sub { color: var(--mid-gray); font-size: var(--text-sm); text-align: center; margin-bottom: var(--sp-6); } .pin-input-row { display: flex; gap: var(--sp-3); max-width: 400px; margin: 0 auto; } .pin-input-row input { flex: 1; height: 52px; border: 2px solid var(--light-gray); border-radius: var(--r-md); padding: 0 var(--sp-4); font-size: var(--text-lg); font-family: var(--font-heading); font-weight: var(--w-semibold); letter-spacing: 0.08em; color: var(--black); background: var(--bg); transition: border-color 0.2s; -moz-appearance: textfield; appearance: textfield; } .pin-input-row input::-webkit-inner-spin-button, .pin-input-row input::-webkit-outer-spin-button { -webkit-appearance: none; } .pin-input-row input:focus { outline: none; border-color: var(--primary); background: var(--white); } .pin-check-btn { height: 52px; padding: 0 var(--sp-6); background: var(--primary); color: var(--white); font-family: var(--font-heading); font-weight: var(--w-bold); font-size: var(--text-base); border-radius: var(--r-md); white-space: nowrap; transition: background 0.2s; } .pin-check-btn:hover { background: var(--primary-dark); } .pin-result { margin-top: var(--sp-5); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); display: none; align-items: flex-start; gap: var(--sp-4); animation: fadeIn 0.25s ease; } .pin-result.visible { display: flex; } .pin-result-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .pin-result.ok { background: #ECFDF5; border: 1.5px solid #6EE7B7; } .pin-result.ok .pin-result-icon { background: #10B981; color: white; } .pin-result.ok .pin-result-title { color: #065F46; } .pin-result.outside { background: #FFF7ED; border: 1.5px solid #FCA572; } .pin-result.outside .pin-result-icon { background: #F97316; color: white; } .pin-result.outside .pin-result-title { color: #7C2D12; } .pin-result.error { background: #FEF2F2; border: 1.5px solid #FCA5A5; } .pin-result.error .pin-result-icon { background: #EF4444; color: white; } .pin-result.error .pin-result-title { color: #7F1D1D; } .pin-result-title { font-family: var(--font-heading); font-weight: var(--w-bold); font-size: var(--text-base); margin-bottom: 4px; } .pin-result-desc { font-size: var(--text-sm); color: var(--dark-gray); line-height: var(--leading-normal); } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── LEGACY PHOTO GALLERY ─────────────────────────────── */ .legacy-section { background: var(--black); padding-bottom: 0; } .legacy-section .section-title { color: var(--white); } .legacy-section .section-title-hi { color: rgba(255,255,255,0.55); } .legacy-section .section-divider { background: var(--secondary); } .legacy-scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; width: 100%; } .legacy-scroll:active { cursor: grabbing; } .legacy-scroll::-webkit-scrollbar { display: none; } .legacy-track { display: flex; gap: var(--sp-4); width: max-content; padding-inline: var(--sp-4); padding-bottom: var(--sp-8); } .legacy-slide { scroll-snap-align: start; flex-shrink: 0; width: 240px; border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,0.05); } .legacy-slide img { width: 100%; height: 340px; object-fit: cover; object-position: center top; display: block; } .legacy-slide figcaption { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .legacy-caption-en { font-family: var(--font-heading); font-weight: var(--w-semibold); font-size: var(--text-sm); color: var(--white); display: block; line-height: 1.35; } .legacy-caption-hi { font-size: var(--text-xs); color: rgba(255,255,255,0.5); margin-top: 3px; display: block; line-height: 1.5; } .legacy-hint { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); color: rgba(255,255,255,0.35); font-size: var(--text-sm); padding: 0 0 var(--sp-10); } .legacy-hint i { font-size: 1.1rem; } @media (min-width: 640px) { .legacy-slide { width: 340px; } .legacy-slide img { height: 400px; } } @media (min-width: 1024px) { .legacy-slide { width: 420px; } .legacy-slide img { height: 460px; } .legacy-hint { display: none; } } /* Heritage photos on About page */ .about-heritage-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-8); } .about-heritage-figure { border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,0.05); } .about-heritage-figure img { width: 100%; height: 360px; object-fit: cover; object-position: center top; display: block; } .about-heritage-figure figcaption { padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); color: rgba(255,255,255,0.6); text-align: center; } @media (min-width: 640px) { .about-heritage-grid { grid-template-columns: repeat(2, 1fr); } .about-heritage-figure img { height: 280px; } } /* Stack PIN input row on mobile phones */ @media (max-width: 520px) { .pin-input-row { flex-direction: column; } .pin-check-btn { width: 100%; } } /* ── Mobile-specific fixes ────────────────────────────── */ @media (max-width: 640px) { /* Hide address in top bar — keeps phone + toggle on one line */ .top-bar-left a:nth-child(2) { display: none; } /* Tighter lang toggle on mobile */ .lang-toggle button { padding: 3px 9px; font-size: 0.72rem; } /* Product card WA button: smaller padding so Hindi text fits */ .wa-order-btn { padding: var(--sp-3) var(--sp-4); font-size: var(--text-sm); min-height: 44px; } /* Ensure no element bleeds past viewport. !important overrides inline style="max-width:860px" on page containers */ section, .container, .hero, .nav, .top-bar { max-width: 100vw !important; } section { overflow-x: hidden; } /* Hero CTA buttons stack vertically so text doesn't overflow */ .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn-whatsapp, .hero-ctas .btn-outline { width: 100%; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.3; } } /* ── Skip to content (accessibility) ─────────────────────── */ .skip-to-content { position: absolute; top: -100px; left: var(--sp-4); background: var(--primary); color: var(--white); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md); font-weight: var(--w-semibold); z-index: 9999; text-decoration: none; transition: top 0.2s; } .skip-to-content:focus { top: var(--sp-3); } /* ── FAQ accordion icon animation ──────────────────────── */ details summary { user-select: none; } details summary .ri-add-circle-line { transition: transform 0.2s ease; } details[open] summary .ri-add-circle-line { transform: rotate(45deg); }