/* ================================================================= [Your Business Name] — Stylesheet Design system: "Registration Plate" — graphite + plate-yellow for the Vehicles side of the business, ledger-green for the Land side. ================================================================= */ /* ---------- Language flash guard ---------- The HTML ships in Hinglish (the default). If the visitor has previously chosen हिन्दी, a tiny inline script in stamps data-lang="hi" before paint, and this rule keeps the page blank for the few milliseconds until i18n.js swaps the text in — so Hindi readers never see a flash of Hinglish. That same inline script adds .i18n-ready after 1.2s no matter what, so the page can never stay hidden if a script fails to load. */ html[data-lang="hi"]:not(.i18n-ready) body { visibility: hidden; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; } img, svg { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.08; font-weight: 700; color: var(--graphite-950); letter-spacing: 0.2px; } /* ---------- Design tokens ---------- */ :root { /* Colours */ --graphite-950: #1C1B1F; --graphite-800: #2D2B30; --graphite-700: #423F45; --graphite-100: #EDEBE9; --plate-yellow: #F2B705; --plate-yellow-deep: #C6960A; --plate-yellow-ink: #2B2200; --ledger-green: #1F5C43; --ledger-green-deep: #163F2E; --ledger-green-light: #E7F0EA; --whatsapp: #25D366; --whatsapp-deep: #1DA851; --paper: #F2EFE7; --paper-deep: #E8E3D6; --white: #FFFFFF; --ink: #201F1D; --muted: #6E6A60; --line: #DAD3C1; --danger: #B3401E; /* Type — the Devanagari face is listed after each Latin face, so Hindi glyphs fall through to it automatically, glyph by glyph. */ --font-head: 'Big Shoulders Display', 'Noto Sans Devanagari', 'Arial Narrow', sans-serif; --font-stencil: 'Big Shoulders Stencil', 'Noto Sans Devanagari', 'Arial Narrow', sans-serif; --font-body: 'Work Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-data: 'Space Mono', 'Noto Sans Devanagari', 'Courier New', monospace; /* Layout */ --container: 1180px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(28,27,31,0.10); --shadow-md: 0 10px 30px rgba(28,27,31,0.14); --header-h: 68px; } /* ---------- Base ---------- */ body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; padding-bottom: 62px; /* room for mobile sticky bar */ } @media (min-width: 901px) { body { padding-bottom: 0; } } h1 { font-size: clamp(2.4rem, 6vw, 4rem); text-transform: uppercase; } h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); text-transform: uppercase; } h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); } h4 { font-size: 1.05rem; } p { max-width: 62ch; } p.wide { max-width: none; } .lede { font-size: 1.15rem; color: var(--graphite-700); max-width: 58ch; } .muted { color: var(--muted); } .eyebrow { font-family: var(--font-data); text-transform: uppercase; letter-spacing: 2px; font-size: 0.78rem; color: var(--ledger-green); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; display: inline-block; } .eyebrow.amber { color: var(--plate-yellow-deep); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } .section { padding: 64px 0; } .section-tight { padding: 40px 0; } .section-alt { background: var(--white); } .section-dark { background: var(--graphite-950); color: var(--paper); } .section-dark h2, .section-dark h3 { color: var(--white); } .section-dark .muted { color: #B9B4AC; } .section-head { margin-bottom: 36px; max-width: 68ch; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* Skip link */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--plate-yellow); color: var(--plate-yellow-ink); padding: 10px 16px; z-index: 999; font-weight: 700; } .skip-link:focus { left: 12px; top: 12px; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--plate-yellow-deep); outline-offset: 2px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; min-height: 48px; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: var(--plate-yellow); color: var(--plate-yellow-ink); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--plate-yellow-deep); transform: translateY(-1px); } .btn-dark { background: var(--graphite-950); color: var(--white); } .btn-dark:hover { background: var(--graphite-800); transform: translateY(-1px); } .btn-outline { background: transparent; border: 2px solid currentColor; color: var(--graphite-950); } .btn-outline:hover { background: var(--graphite-950); color: var(--white); } .btn-outline.on-dark { color: var(--white); } .btn-outline.on-dark:hover { background: var(--white); color: var(--graphite-950); } .btn-whatsapp { background: var(--whatsapp); color: var(--white); } .btn-whatsapp:hover { background: var(--whatsapp-deep); transform: translateY(-1px); } .btn-green { background: var(--ledger-green); color: var(--white); } .btn-green:hover { background: var(--ledger-green-deep); transform: translateY(-1px); } .btn-block { width: 100%; } .btn-sm { padding: 9px 14px; min-height: 40px; font-size: 0.85rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Header ---------- */ .topbar { background: var(--graphite-950); color: var(--paper); font-family: var(--font-data); font-size: 0.78rem; letter-spacing: 0.3px; } .topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; } .topbar a { color: var(--plate-yellow); } .topbar-areas { color: #B9B4AC; } .topbar { display: none; } @media (min-width: 901px) { .topbar { display: block; } } .site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 3px solid var(--graphite-950); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); text-transform: uppercase; min-width: 0; } .brand-mark { width: 40px; height: 40px; flex: none; } .brand-name { font-size: 1.25rem; line-height: 1; min-width: 0; } /* The header carries brand + language switcher + menu button on a phone, so the brand gives up width first rather than pushing them off-screen. */ @media (max-width: 560px) { .site-header .container { gap: 10px; } .brand-mark { width: 34px; height: 34px; } .brand-name { font-size: 1.02rem; } .brand-name small { font-size: 0.56rem; } } @media (max-width: 400px) { .brand-name small { display: none; } } .brand-name small { display: block; font-family: var(--font-data); text-transform: none; font-size: 0.62rem; letter-spacing: 1px; color: var(--muted); font-weight: 400; margin-top: 3px; } .main-nav { display: none; } .main-nav ul { display: flex; gap: 26px; font-weight: 600; font-size: 0.95rem; } .main-nav a { padding: 6px 2px; border-bottom: 2px solid transparent; } .main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--plate-yellow-deep); } .header-cta { display: none; } @media (min-width: 901px) { .main-nav { display: block; } .header-cta { display: flex; gap: 10px; } } .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--graphite-950); border-radius: var(--radius-sm); } .nav-toggle svg { width: 22px; height: 22px; } @media (min-width: 901px) { .nav-toggle { display: none; } } .mobile-drawer { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper); z-index: 55; overflow-y: auto; padding: 20px; } .mobile-drawer.open { display: block; } .mobile-drawer ul { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; } .mobile-drawer a { display: block; padding: 16px 6px; font-family: var(--font-head); text-transform: uppercase; font-size: 1.3rem; border-bottom: 1px solid var(--line); } .mobile-drawer .btn-row { flex-direction: column; } /* ---------- Language switcher (Hinglish ⇄ हिन्दी) ---------- */ .lang-switch { display: flex; flex: none; border: 2px solid var(--graphite-950); border-radius: 999px; overflow: hidden; background: var(--white); } .lang-btn { font-family: var(--font-data); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; padding: 7px 12px; color: var(--graphite-700); min-height: 34px; } .lang-btn + .lang-btn { border-left: 2px solid var(--graphite-950); } .lang-btn[aria-pressed="true"] { background: var(--graphite-950); color: var(--plate-yellow); } .lang-btn[lang="hi"] { font-family: var(--font-body); font-size: 0.8rem; } .mobile-drawer .lang-switch { width: 100%; border-radius: var(--radius-sm); margin-bottom: 18px; } .mobile-drawer .lang-btn { flex: 1; padding: 12px; font-size: 0.85rem; min-height: 48px; } /* ---------- Pre-owned notice strip (site-wide) ---------- */ .preowned-strip { background: var(--plate-yellow); color: var(--plate-yellow-ink); border-bottom: 3px solid var(--graphite-950); } .preowned-strip .container { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 7px; padding-bottom: 7px; text-align: center; } .preowned-strip p { max-width: none; font-size: 0.82rem; line-height: 1.4; font-weight: 500; } .preowned-strip strong { font-weight: 800; letter-spacing: 0.3px; } .preowned-strip svg { width: 20px; height: 20px; flex: none; } @media (max-width: 600px) { .preowned-strip svg { display: none; } } /* ---------- Sticky mobile action bar ---------- */ .mobile-actionbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -6px 18px rgba(0,0,0,0.18); } .mobile-actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px; font-weight: 700; font-size: 0.95rem; } .mobile-actionbar a svg { width: 19px; height: 19px; } .mobile-actionbar .call { background: var(--graphite-950); color: var(--white); } .mobile-actionbar .wa { background: var(--whatsapp); color: var(--white); } @media (min-width: 901px) { .mobile-actionbar { display: none; } } /* ---------- Hero ---------- Three blocks in one grid. On a phone they stack copy → visual → buttons, so something to look at arrives before the reader has to wade through text. On a wide screen the visual moves to its own column. */ .hero { background: var(--graphite-950); color: var(--white); position: relative; overflow: hidden; padding: 40px 0 56px; } .hero::after { content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 18px 18px; } .hero .container { position: relative; display: grid; gap: 32px; } @media (min-width: 901px) { .hero { padding: 80px 0 92px; } .hero .container { grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "copy visual" "cta visual"; align-items: center; column-gap: 56px; row-gap: 30px; } .hero-copy { grid-area: copy; } .hero-visual { grid-area: visual; } .hero-cta { grid-area: cta; } } /* Breathing room between every element, rather than ad-hoc margins */ .hero-copy > * + * { margin-top: 18px; } .hero-kicker { font-family: var(--font-data); color: var(--plate-yellow); letter-spacing: 2px; text-transform: uppercase; font-size: 0.78rem; } .hero h1 { color: var(--white); font-size: clamp(2.5rem, 8vw, 4.2rem); } .hero h1 .accent { color: var(--plate-yellow); } .hero-sub { color: #D8D3C7; font-size: 1.12rem; max-width: 34ch; } .hero-cta .btn-row { gap: 12px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); font-family: var(--font-data); font-size: 0.8rem; color: #D8D3C7; } .hero-trust li { display: flex; align-items: center; gap: 8px; } .hero-trust svg { width: 16px; height: 16px; color: var(--plate-yellow); flex: none; } /* Hero visual: line art now, a photograph later (see .photo-frame) */ .hero-visual { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; } .hero-art { display: flex; align-items: flex-end; justify-content: center; gap: 6%; width: 100%; max-width: 460px; color: var(--plate-yellow); padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.16); } .hero-art svg { display: block; height: auto; } .hero-art .art-bike { width: 38%; } .hero-art .art-car { width: 54%; } @media (min-width: 901px) { .hero-art { max-width: 100%; } } /* Plate badge — signature element */ .plate-badge { justify-self: center; background: var(--white); color: var(--graphite-950); border-radius: var(--radius-md); padding: 22px 26px; width: min(280px, 100%); text-align: center; border: 3px solid var(--graphite-950); box-shadow: 8px 8px 0 var(--plate-yellow); position: relative; } .plate-badge .plate-flag { font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 3px; color: var(--white); background: var(--graphite-950); display: inline-block; padding: 3px 10px; border-radius: 3px; margin-bottom: 10px; } .plate-badge .plate-number { font-family: var(--font-stencil); font-size: 4.6rem; line-height: 0.9; letter-spacing: 2px; } .plate-badge .plate-caption { font-family: var(--font-data); text-transform: uppercase; letter-spacing: 2px; font-size: 0.78rem; margin-top: 8px; color: var(--graphite-700); } .plate-badge .plate-loc { font-family: var(--font-data); font-size: 0.72rem; letter-spacing: 1px; color: var(--muted); margin-top: 4px; } .plate-badge-sm { width: 150px; padding: 14px 16px; box-shadow: 5px 5px 0 var(--plate-yellow); } .plate-badge-sm .plate-number { font-size: 2.4rem; } /* In the hero the plate is a caption under the artwork, so it sits smaller and quieter than when it was the only visual element. */ .plate-badge-hero { width: min(200px, 100%); padding: 14px 18px; box-shadow: 6px 6px 0 var(--plate-yellow); } .plate-badge-hero .plate-number { font-size: 3rem; } .plate-badge-hero .plate-caption { font-size: 0.7rem; margin-top: 4px; } /* ---------- Photo frame ---------- One shape for every real photograph on the site. Drop an inside and it is cropped to fit without distorting, on the same graphite border the rest of the design uses. See SETUP_GUIDE.md §5. */ .photo-frame { width: 100%; margin: 0; overflow: hidden; background: var(--graphite-800); border: 3px solid var(--graphite-950); border-radius: var(--radius-md); box-shadow: 8px 8px 0 var(--plate-yellow); } .photo-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; } .hero-visual.photo-frame { display: block; } .vehicle-media > img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Category cards (the two verticals) ---------- */ .category-grid { display: grid; gap: 22px; } @media (min-width: 761px) { .category-grid { grid-template-columns: 1fr 1fr; } } .category-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--line); border-top: 6px solid var(--cat-color, var(--plate-yellow)); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; transition: transform .18s ease, box-shadow .18s ease; } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .category-card.vehicles { --cat-color: var(--plate-yellow-deep); } .category-card.land { --cat-color: var(--ledger-green); } .category-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cat-tint, var(--paper)); } .category-card.vehicles .category-icon { background: #FBF0CC; color: var(--plate-yellow-ink); } .category-card.land .category-icon { background: var(--ledger-green-light); color: var(--ledger-green); } .category-icon svg { width: 30px; height: 30px; } .category-card h3 { text-transform: uppercase; font-family: var(--font-head); font-size: 1.5rem; } .category-card p { color: var(--graphite-700); } .category-card .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .tag { font-family: var(--font-data); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--graphite-700); } /* ---------- Steps (genuine sequence) ---------- */ .steps { display: grid; gap: 18px; counter-reset: step; } @media (min-width: 761px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 20px; position: relative; } .step .step-num { font-family: var(--font-stencil); font-size: 2.6rem; color: var(--plate-yellow-deep); line-height: 1; } .step h4 { margin-top: 8px; text-transform: uppercase; } .step p { font-size: 0.92rem; color: var(--graphite-700); } .steps.green .step .step-num { color: var(--ledger-green); } /* ---------- Feature list (why choose us) ---------- */ .feature-grid { display: grid; gap: 20px; } @media (min-width: 641px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } .feature { display: flex; gap: 14px; } .feature-icon { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--graphite-950); color: var(--plate-yellow); display: flex; align-items: center; justify-content: center; } .feature-icon svg { width: 22px; height: 22px; } .feature h4 { text-transform: uppercase; margin-bottom: 4px; } .feature p { font-size: 0.92rem; color: var(--graphite-700); } /* ---------- Filter bar ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .filter-btn { font-family: var(--font-data); font-size: 0.82rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--graphite-950); background: var(--white); font-weight: 700; } .filter-btn[aria-pressed="true"] { background: var(--graphite-950); color: var(--plate-yellow); } /* ---------- Vehicle cards ---------- */ .vehicle-grid { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 641px) { .vehicle-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1001px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } } .vehicle-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .vehicle-media { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--graphite-100), var(--paper-deep)); display: flex; align-items: center; justify-content: center; position: relative; color: var(--graphite-700); } .vehicle-media svg { width: 46%; height: 46%; opacity: 0.85; } .vehicle-badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-data); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; background: var(--graphite-950); color: var(--white); padding: 4px 10px; border-radius: 4px; } .vehicle-badge.four { background: var(--ledger-green); } .sample-flag { position: absolute; bottom: 10px; right: 10px; font-family: var(--font-data); font-size: 0.62rem; text-transform: uppercase; background: rgba(255,255,255,0.9); color: var(--muted); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; } .vehicle-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .vehicle-body h3 { font-size: 1.2rem; text-transform: none; font-family: var(--font-body); font-weight: 700; } .vehicle-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-data); font-size: 0.78rem; color: var(--muted); } .vehicle-price { font-family: var(--font-data); font-weight: 700; font-size: 1.35rem; color: var(--graphite-950); } .vehicle-price span { font-size: 0.7rem; color: var(--muted); font-weight: 400; display: block; } .vehicle-actions { display: flex; gap: 8px; margin-top: auto; } .vehicle-actions .btn { flex: 1; padding: 10px 12px; font-size: 0.85rem; } /* ---------- Forms ---------- */ .form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); } .form-grid { display: grid; gap: 16px; } @media (min-width: 641px) { .form-grid.two-col { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 700; font-size: 0.88rem; } .field .req { color: var(--danger); } .field input, .field select, .field textarea { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font-size: 1rem; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--graphite-950); background: var(--white); } .field textarea { resize: vertical; min-height: 100px; } .field-note { font-size: 0.8rem; color: var(--muted); } .form-foot { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .form-status { font-size: 0.9rem; font-weight: 600; } .form-status.ok { color: var(--ledger-green); } .form-status.err { color: var(--danger); } .form-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; margin: 22px 0; } .form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Honeypot field — off-screen rather than display:none, because some bots skip hidden inputs but happily fill positioned ones. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- FAQ ---------- */ .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; text-align: left; font-weight: 700; font-size: 1.02rem; } .faq-q .plus { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--graphite-950); display: flex; align-items: center; justify-content: center; position: relative; } .faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--graphite-950); } .faq-q .plus::before { width: 12px; height: 2px; } .faq-q .plus::after { width: 2px; height: 12px; transition: transform .2s ease; } .faq-item[data-open="true"] .plus::after { transform: rotate(90deg); scale: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; } /* Generous ceiling: Hindi answers run longer than the Hinglish ones and wrap to many lines on a narrow phone — 400px was close enough to clip. */ .faq-item[data-open="true"] .faq-a { max-height: 640px; } .faq-a p { padding: 0 4px 20px; color: var(--graphite-700); max-width: 68ch; } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-family: var(--font-data); font-size: 0.8rem; color: var(--muted); padding: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--graphite-700); } .breadcrumb a:hover { text-decoration: underline; } /* ---------- CTA banner ---------- */ .cta-banner { background: var(--plate-yellow); border-radius: var(--radius-lg); padding: 40px; display: grid; gap: 22px; align-items: center; } @media (min-width: 761px) { .cta-banner { grid-template-columns: 1fr auto; padding: 48px; } } .cta-banner h2 { color: var(--plate-yellow-ink); } .cta-banner p { color: var(--graphite-800); } .cta-banner-green { background: var(--ledger-green); } .cta-banner-green h2, .cta-banner-green p { color: var(--white); } /* ---------- Area list ---------- */ .area-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 20px; } @media (min-width: 641px) { .area-grid { grid-template-columns: repeat(4,1fr); } } .area-grid li { font-family: var(--font-data); font-size: 0.9rem; padding: 8px 0; border-bottom: 1px dashed var(--line); } /* ---------- Footer ---------- */ .site-footer { background: var(--graphite-950); color: #C9C4BA; padding: 52px 0 26px; } .footer-grid { display: grid; gap: 34px; } @media (min-width: 761px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .footer-brand { font-family: var(--font-head); text-transform: uppercase; color: var(--white); font-size: 1.4rem; margin-bottom: 10px; } .footer-col h4 { color: var(--white); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 14px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; } .footer-col a:hover { color: var(--plate-yellow); } .footer-nap { font-family: var(--font-data); font-size: 0.88rem; line-height: 1.9; } .footer-bottom { border-top: 1px solid #3A383C; margin-top: 40px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.8rem; } /* ---------- Misc ---------- */ .divider-plate { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 30px; } .divider-plate::before, .divider-plate::after { content: ""; flex: 1; max-width: 120px; height: 3px; background: repeating-linear-gradient(90deg, var(--graphite-950) 0 8px, transparent 8px 14px); } .map-frame { border: 3px solid var(--graphite-950); border-radius: var(--radius-md); overflow: hidden; } .map-frame iframe { width: 100%; height: 340px; border: 0; display: block; } .notice { background: #FBF0CC; border: 1.5px solid var(--plate-yellow-deep); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.9rem; color: var(--plate-yellow-ink); } .notice.green { background: var(--ledger-green-light); border-color: var(--ledger-green); color: var(--ledger-green-deep); } /* ---------- Hindi (Devanagari) typography adjustments ---------- Devanagari needs more vertical room for matras, and ALL-CAPS means nothing in the script — so we relax both in Hindi mode. */ html[data-lang="hi"] h1, html[data-lang="hi"] h2, html[data-lang="hi"] h3, html[data-lang="hi"] h4, html[data-lang="hi"] .brand, html[data-lang="hi"] .category-card h3, html[data-lang="hi"] .step h4, html[data-lang="hi"] .feature h4, html[data-lang="hi"] .footer-brand, html[data-lang="hi"] .footer-col h4, html[data-lang="hi"] .mobile-drawer a { text-transform: none; line-height: 1.32; letter-spacing: 0; } html[data-lang="hi"] h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); } html[data-lang="hi"] h2 { font-size: clamp(1.45rem, 3.2vw, 2.1rem); } html[data-lang="hi"] .eyebrow, html[data-lang="hi"] .tag, html[data-lang="hi"] .filter-btn, html[data-lang="hi"] .vehicle-badge, html[data-lang="hi"] .plate-badge .plate-caption, html[data-lang="hi"] .topbar { letter-spacing: 0.4px; } html[data-lang="hi"] .plate-badge .plate-number { letter-spacing: 0; } html[data-lang="hi"] .hero-trust, html[data-lang="hi"] .vehicle-specs, html[data-lang="hi"] .area-grid li, html[data-lang="hi"] .footer-nap { line-height: 1.9; } /* Reveal-on-scroll (respectful of reduced motion) */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .category-card, .btn { transition: none; } }