/* ============================================================ KARTHIKA TRAVELS — Design System Palette drawn from the logo: deep highway navy, signal green, and a light sky-blue & white canvas. v3 — mobile rebuild: • Sidebar: SOLID navy panel (can never fall back to white) • Backdrop: moved to so it actually renders • Header: properly sized "Book a Cab" button • Spacing: one consistent gap scale used everywhere ============================================================ */ :root { --navy: #12386F; /* logo blue */ --navy-deep: #0C2A55; --blue: #1B62B5; --sky: #EAF4FD; /* light blue canvas */ --sky-deep: #D6E9FA; --green: #14803F; /* logo green */ --green-dk: #0E6330; --green-lt: #6FCF97; --ink: #212E40; --muted: #5C6B80; --line: #CFE1F2; --white: #FFFFFF; --shadow: 0 12px 32px rgba(18, 56, 111, .12); --radius: 16px; --font-body: 'Poppins', 'Segoe UI', sans-serif; --font-display: 'Archivo', 'Poppins', sans-serif; /* ---- One spacing scale, used everywhere ---- */ --gap-xs: .5rem; --gap-sm: .8rem; --gap-md: 1.4rem; --gap-lg: 2.4rem; --gap-xl: clamp(2.6rem, 7vw, 5.5rem); /* section padding */ /* ---- Layer order (no more z-index guesswork) ---- */ --z-header: 900; --z-backdrop: 950; --z-nav: 1000; --z-toggle: 1001; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* fallback for older browsers */ overflow-x: clip; /* modern: clips the off-screen menu without side-scroll */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; width: 100%; max-width: 100%; } img { max-width: 100%; display: block; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--navy); } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .container { width: min(1180px, 92%); margin-inline: auto; } /* ---------- Type ---------- */ h1, h2, h3, .display { font-family: var(--font-display); color: var(--navy); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; } h1 { font-size: clamp(1.85rem, 4.5vw, 3.3rem); } h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); } h3 { font-size: 1.15rem; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: repeating-linear-gradient(90deg, var(--green) 0 5px, transparent 5px 9px); } /* ---------- Consistent section rhythm ---------- */ .section { padding: var(--gap-xl) 0; } .section.alt { background: var(--sky); } .section-head { max-width: 640px; margin-bottom: var(--gap-lg); } .section-head p { color: var(--muted); margin-top: .6rem; } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow::before { display: none; } /* ---------- Signature: the route line ---------- */ .route-line { position: relative; height: 26px; margin: var(--gap-sm) 0; display: flex; align-items: center; } .route-line::before { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--sky-deep); } .route-line .dot-a, .route-line .dot-b { width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 2px currentColor; } .route-line .dot-a { color: var(--green); background: var(--green); } .route-line .dot-b { color: var(--navy); background: var(--navy); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: .95rem; font-family: var(--font-body); border: 0; cursor: pointer; text-align: center; line-height: 1.3; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(20,128,63,.28); } .btn-primary:hover { background: var(--green-dk); color: #fff; transform: translateY(-2px); } .btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--navy-deep); color: #fff; transform: translateY(-2px); } .btn-outline { background: #fff; color: var(--navy); border: 2px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: #fff; } .btn-wa { background: #1EBE5D; color: #fff; } .btn-wa:hover { background: #17A34E; color: #fff; } .btn-group { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } /* ---------- Top bar ---------- */ .topbar { background: var(--navy-deep); color: #CFE1F5; font-size: .82rem; padding: .45rem 0; } .topbar .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .topbar a { color: #fff; font-weight: 600; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; gap: 1rem; } .brand { display: flex; align-items: center; gap: .7rem; } .brand img { height: 54px; width: auto; } .brand-text { line-height: 1.15; } .brand-text .b1 { font-family: var(--font-display); font-weight: 900; font-style: italic; color: var(--navy); font-size: 1.25rem; letter-spacing: .02em; display: block; } .brand-text .b2 { font-size: .68rem; font-weight: 700; letter-spacing: .34em; color: var(--green); text-transform: uppercase; } /* Desktop nav */ .main-nav { display: flex; align-items: center; gap: 1.5rem; } .main-nav a { color: var(--ink); font-weight: 500; font-size: .93rem; position: relative; padding: .3rem 0; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--green); transition: width .2s ease; } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .main-nav a.active { color: var(--navy); font-weight: 600; } .nav-cta { display: flex; gap: .6rem; align-items: center; } /* Hamburger — hidden on desktop */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; border-radius: 10px; position: relative; z-index: var(--z-toggle); -webkit-tap-highlight-color: transparent; } .nav-toggle span { display: block; width: 26px; height: 3px; background: var(--navy); margin: 5px 0; border-radius: 3px; transition: transform .25s ease, opacity .2s ease, background .2s ease; } /* ============================================================ MOBILE HEADER + SIDEBAR (<= 960px) ============================================================ */ /* Backdrop lives on , NOT inside the nav. A nav::before with z-index:-1 paints BEHIND the panel's own background and is therefore invisible — that was the bug. Degrades gracefully: if :has() is unsupported you simply get no dim layer, but the panel is still fully solid navy. */ @media (max-width: 960px) { body::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(8, 26, 52, .58); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; z-index: var(--z-backdrop); pointer-events: none; } body:has(.main-nav.open)::before { opacity: 1; visibility: visible; } } @media (max-width: 960px) { /* --- Compact header row --- */ .nav-wrap { padding: .5rem 0; gap: var(--gap-xs); } .brand { gap: var(--gap-xs); } .brand img { height: 42px; } .brand-text .b1 { font-size: 1rem; } .brand-text .b2 { font-size: .55rem; letter-spacing: .22em; } /* --- "Book a Cab" button, properly sized --- */ .nav-cta { gap: .4rem; } .nav-cta .btn-outline { display: none; } /* number already sits in the topbar */ .nav-cta .btn { padding: .52rem 1rem; font-size: .8rem; font-weight: 600; border-radius: 999px; white-space: nowrap; box-shadow: none; /* heavy glow looks clumsy when small */ min-height: 38px; /* still an easy tap target */ } .nav-cta .btn:hover { transform: none; } /* no hover lift on touch devices */ /* --- SIDEBAR: solid navy, never white --- */ .main-nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: 100vh; height: 100dvh; /* true height on mobile browsers */ width: min(300px, 82vw); /* Solid colour FIRST as the fallback, gradient layered on top. If the gradient fails to parse anywhere, it stays navy — it can never fall back to white. */ background-color: #0C2A55; background-image: linear-gradient(165deg, #0C2A55 0%, #12386F 60%, #16528F 100%); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 4.8rem 1.5rem 2rem; box-shadow: -16px 0 44px rgba(8, 26, 52, .4); transform: translateX(105%); transition: transform .28s ease; z-index: var(--z-nav); overflow-y: auto; -webkit-overflow-scrolling: touch; } .main-nav.open { transform: translateX(0); visibility: visible; } /* Closed panel is fully out of play — cannot be tabbed to or scrolled into */ .main-nav:not(.open) { visibility: hidden; } /* Green road stripe down the panel edge — logo echo */ .main-nav::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: repeating-linear-gradient(180deg, var(--green-lt) 0 22px, transparent 22px 40px); opacity: .85; } /* Sidebar links: light text on navy, even spacing */ .main-nav a { color: #DCEAF9; font-size: 1rem; font-weight: 500; width: 100%; padding: .95rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: color .15s ease, padding-left .15s ease; } .main-nav a::after { display: none; } .main-nav a:last-child { border-bottom: 0; } .main-nav a:hover { color: #fff; padding-left: .5rem; } .main-nav a.active { color: #fff; font-weight: 700; } .main-nav a.active::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-lt); margin-right: .6rem; vertical-align: middle; } /* --- Hamburger: visible, above the panel, becomes an X --- */ .nav-toggle { display: block; } .main-nav.open ~ .nav-cta .nav-toggle span { background: #fff; } .main-nav.open ~ .nav-cta .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .main-nav.open ~ .nav-cta .nav-toggle span:nth-child(2) { opacity: 0; } .main-nav.open ~ .nav-cta .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } } @media (max-width: 560px) { .nav-cta .btn { padding: .5rem .9rem; font-size: .78rem; } .topbar { font-size: .72rem; text-align: center; } .topbar .container { justify-content: center; gap: .1rem var(--gap-sm); } } @media (max-width: 380px) { .brand-text { display: none; } /* logo alone — the button gets room */ .brand img { height: 40px; } .nav-cta .btn { padding: .5rem .8rem; } } /* ---------- Hero ---------- */ .hero { background: radial-gradient(900px 420px at 85% -10%, var(--sky-deep), transparent 60%), linear-gradient(180deg, var(--sky) 0%, #F6FBFF 100%); overflow: hidden; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; padding: clamp(2.4rem, 7vw, 5rem) 0; } .hero h1 .accent { color: var(--green); font-style: italic; } .hero p.lead { color: var(--muted); margin: 1.1rem 0 1.8rem; max-width: 34rem; } .hero-badges { display: flex; gap: var(--gap-md); flex-wrap: wrap; margin-top: 2rem; } .hero-badges .hb { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--navy); } .hb svg { flex: none; } /* Booking card */ .booking-card { background: var(--white); border-radius: 20px; box-shadow: var(--shadow); padding: 1.8rem; border-top: 5px solid var(--green); } .booking-card h2 { font-size: 1.25rem; margin-bottom: .2rem; } .booking-card .sub { font-size: .85rem; color: var(--muted); margin-bottom: 1.1rem; } .trip-tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .trip-tabs label { flex: 1; min-width: 92px; text-align: center; cursor: pointer; border: 1.5px solid var(--line); border-radius: 10px; padding: .5rem .4rem; font-size: .82rem; font-weight: 600; color: var(--muted); transition: all .15s ease; } .trip-tabs input { position: absolute; opacity: 0; } .trip-tabs input:checked + label, .trip-tabs label:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); } .form-grid .full { grid-column: 1 / -1; } .field label { display: block; font-size: .78rem; font-weight: 600; color: var(--navy); margin-bottom: .3rem; } .field input, .field select, .field textarea { width: 100%; padding: .68rem .85rem; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 16px; /* 16px = no iOS zoom-on-focus */ color: var(--ink); background: #FBFDFF; transition: border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; } .booking-card .btn { width: 100%; justify-content: center; margin-top: 1rem; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; } } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .booking-card { padding: 1.3rem; } .trip-tabs label { min-width: 0; font-size: .78rem; } } /* ---------- Cards ---------- */ .grid { display: grid; gap: var(--gap-md); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } /* Vehicle card */ .vehicle-card { display: flex; flex-direction: column; } .vehicle-card .v-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--sky); display: grid; place-items: center; margin-bottom: 1rem; color: var(--navy); } .vehicle-card .v-cat { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .vehicle-card h3 { margin: .15rem 0 .4rem; } .vehicle-card .v-feat { font-size: .84rem; color: var(--muted); flex: 1; } .vehicle-rates { display: flex; gap: 1rem; margin: 1rem 0; padding: var(--gap-sm) 1rem; background: var(--sky); border-radius: 12px; } .vehicle-rates div { flex: 1; } .vehicle-rates .r-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .vehicle-rates .r-val { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 1.15rem; } .vehicle-rates .r-val span { font-size: .75rem; font-weight: 600; color: var(--muted); } /* Route card */ .route-card { display: block; color: var(--ink); } .route-card .rc-cities { display: flex; justify-content: space-between; font-weight: 700; font-family: var(--font-display); color: var(--navy); font-size: 1.02rem; gap: .6rem; } .route-card .rc-meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); margin-top: .5rem; } .route-card .rc-go { margin-top: .9rem; font-size: .85rem; font-weight: 600; color: var(--green); } .route-card:hover .rc-go { text-decoration: underline; } /* Feature card */ .feature-card { text-align: left; } .feature-card .f-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; margin-bottom: 1rem; } .feature-card p { font-size: .88rem; color: var(--muted); margin-top: .35rem; } /* Testimonials */ .testimonial-card { background: var(--white); border-radius: var(--radius); padding: 1.7rem; border: 1px solid var(--line); position: relative; } .testimonial-card::before { content: "\201C"; position: absolute; top: .4rem; right: 1.2rem; font-family: Georgia, serif; font-size: 4.4rem; color: var(--sky-deep); line-height: 1; } .stars { color: #F4A825; letter-spacing: 2px; font-size: .95rem; } .testimonial-card p.msg { font-size: .92rem; color: var(--ink); margin: .7rem 0 1rem; } .testimonial-card .t-who { font-weight: 700; color: var(--navy); font-size: .92rem; } .testimonial-card .t-loc { font-size: .8rem; color: var(--muted); } /* Steps */ .steps { counter-reset: step; } .step-card { position: relative; padding-top: 2.1rem; } .step-card::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 1rem; right: 1.3rem; font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; color: var(--sky-deep); } /* CTA band */ .cta-band { background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #16528F); color: #E7F1FC; border-radius: 22px; padding: clamp(1.6rem, 5vw, 3.4rem); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); flex-wrap: wrap; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: auto -60px -110px auto; width: 300px; height: 300px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.22); } .cta-band h2 { color: #fff; } .cta-band p { max-width: 34rem; opacity: .85; font-size: .95rem; } .cta-band > div { position: relative; z-index: 1; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { background: linear-gradient(180deg, var(--sky), #F6FBFF); padding: clamp(2rem, 5vw, 3.6rem) 0; border-bottom: 1px solid var(--line); } .breadcrumb { font-size: .8rem; color: var(--muted); margin-bottom: .6rem; } .breadcrumb a { color: var(--green); font-weight: 600; } /* ---------- Prose (blog / seo content) ---------- */ .prose { max-width: 760px; } .prose h2 { margin: 1.8rem 0 .6rem; font-size: 1.4rem; } .prose h3 { margin: var(--gap-md) 0 .5rem; } .prose p { margin-bottom: 1rem; color: #33415A; } .prose ul, .prose ol { margin: 0 0 1rem 1.4rem; color: #33415A; } .prose li { margin-bottom: .4rem; } .prose img { border-radius: var(--radius); margin: 1.2rem 0; } /* Blog cards */ .blog-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; } .blog-card .b-img { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--sky-deep), var(--sky)); display: grid; place-items: center; color: var(--navy); } .blog-card .b-img img { width: 100%; height: 100%; object-fit: cover; } .blog-card .b-body { padding: var(--gap-md); flex: 1; display: flex; flex-direction: column; } .blog-card .b-date { font-size: .76rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .blog-card h3 { margin: .4rem 0 .5rem; } .blog-card h3 a { color: var(--navy); } .blog-card p { font-size: .88rem; color: var(--muted); flex: 1; } .blog-card .b-more { margin-top: 1rem; font-weight: 600; font-size: .86rem; color: var(--green); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; } table.pretty { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; } table.pretty th { background: var(--navy); color: #fff; text-align: left; padding: var(--gap-sm) 1rem; font-weight: 600; white-space: nowrap; } table.pretty td { padding: .75rem 1rem; border-top: 1px solid var(--line); } table.pretty tr:nth-child(even) td { background: var(--sky); } /* ---------- Alerts ---------- */ .alert { padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem; font-size: .92rem; font-weight: 500; } .alert-success { background: #E4F6EC; color: var(--green-dk); border: 1px solid #BCE5CD; } .alert-error { background: #FDECEC; color: #A32020; border: 1px solid #F3C2C2; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-deep); color: #B9CFE8; margin-top: 4rem; } .footer-road { height: 8px; background: repeating-linear-gradient(90deg, var(--green) 0 42px, var(--navy) 42px 84px); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--gap-lg); padding: 3.2rem 0 var(--gap-lg); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; padding: var(--gap-lg) 0 1.8rem; } } .site-footer h4 { color: #fff; font-family: var(--font-display); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; } .site-footer a { color: #B9CFE8; font-size: .88rem; } .site-footer a:hover { color: #fff; } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: .55rem; } .footer-brand .b1 { font-family: var(--font-display); font-weight: 900; font-style: italic; color: #fff; font-size: 1.35rem; display: block; } .footer-brand .b2 { color: var(--green-lt); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; } .footer-brand p { font-size: .86rem; margin-top: .9rem; max-width: 26rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.1rem 0; font-size: .8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; } /* ---------- Floating WhatsApp ---------- */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: #1EBE5D; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(30,190,93,.4); transition: transform .18s ease; } .wa-float:hover { transform: scale(1.08); } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- Pagination ---------- */ .pagination { display: flex; gap: .5rem; margin-top: 2rem; flex-wrap: wrap; } .pagination a, .pagination span { padding: .5rem .95rem; border-radius: 10px; border: 1.5px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--navy); } .pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); } /* ============================================================ PHONE POLISH (<= 560px) ============================================================ */ @media (max-width: 560px) { .btn { padding: .75rem 1.3rem; font-size: .9rem; white-space: nowrap; } .btn-group { flex-direction: column; align-items: stretch; } .btn-group .btn { width: 100%; } .cta-band { text-align: center; justify-content: center; } .cta-band > div { width: 100%; } .cta-band p { margin-inline: auto; } .hero-badges { gap: var(--gap-sm) 1.2rem; margin-top: var(--gap-md); } .pagination a, .pagination span { padding: .42rem .8rem; font-size: .84rem; } .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; } .site-footer { margin-top: var(--gap-lg); } .footer-bottom { justify-content: center; text-align: center; } .card { padding: 1.3rem; } } /* ============================================================ FLEET CARDS WITH IMAGES — 2 columns on desktop AND mobile ============================================================ */ .fleet-grid { display: grid; /* Auto-fit compact cards: 4 across on desktop, dropping to 3/2 as space shrinks */ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap-md); } .fleet-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .fleet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--sky-deep); } /* Image panel — kept shallow so cards stay compact */ .fc-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--sky) 0%, #F7FBFF 100%); display: grid; place-items: center; color: var(--navy); overflow: hidden; border-bottom: 1px solid var(--line); } .fc-media img { width: 100%; height: 100%; object-fit: contain; /* show the whole car, not a cropped zoom */ padding: .5rem; transition: transform .35s ease; } .fleet-card:hover .fc-media img { transform: scale(1.03); } .fc-seats { position: absolute; top: .6rem; right: .6rem; background: var(--navy); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: .22rem .6rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(12,42,85,.28); } .fc-body { padding: 1rem 1.05rem 1.1rem; display: flex; flex-direction: column; flex: 1; } .fc-body .v-cat { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .fc-body h3 { margin: .15rem 0 .35rem; font-size: 1rem; line-height: 1.25; } .fc-body .v-feat { font-size: .8rem; color: var(--muted); flex: 1; line-height: 1.55; } .fc-actions { display: flex; gap: .5rem; margin-top: .9rem; } .fc-actions .btn { flex: 1; padding: .55rem .8rem; font-size: .8rem; } /* Tablet: 3 then 2 across, handled by auto-fit; just tighten spacing */ @media (max-width: 900px) { .fleet-grid { gap: 1rem; } } /* Phone: exactly two compact cards per row */ @media (max-width: 620px) { .fleet-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } .fc-media { aspect-ratio: 4 / 3; } .fc-body { padding: .75rem .8rem .85rem; } .fc-body h3 { font-size: .9rem; line-height: 1.25; } .fc-body .v-cat { font-size: .6rem; letter-spacing: .06em; } .fc-body .v-feat { font-size: .72rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fc-seats { font-size: .58rem; padding: .16rem .45rem; top: .4rem; right: .4rem; } .vehicle-rates { gap: .5rem; padding: .5rem .6rem; margin: .65rem 0; flex-direction: column; } .vehicle-rates .r-label { font-size: .56rem; letter-spacing: .04em; } .vehicle-rates .r-val { font-size: .88rem; } .vehicle-rates .r-val span { font-size: .6rem; } .fc-actions { flex-direction: column; gap: .4rem; margin-top: .65rem; } .fc-actions .btn { width: 100%; padding: .5rem .6rem; font-size: .74rem; } } /* Very narrow phones: one clean column beats two cramped ones */ @media (max-width: 340px) { .fleet-grid { grid-template-columns: 1fr; } .fc-media { aspect-ratio: 16 / 9; } } /* ============================================================ SERVICE AREA + GOOGLE MAP ============================================================ */ .area-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap-lg); align-items: stretch; } @media (max-width: 900px) { .area-split { grid-template-columns: 1fr; gap: var(--gap-md); } } .area-map { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--white); min-height: 340px; display: flex; } .area-map iframe { flex: 1; } .map-fallback { flex: 1; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--sky) 0 14px, #F5FAFF 14px 28px); color: var(--muted); font-size: .88rem; text-align: center; padding: 1.4rem; } .map-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } .area-list { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; } .chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; } .area-chip { display: inline-flex; align-items: center; gap: .45rem; background: var(--sky); color: var(--navy); border: 1px solid var(--sky-deep); border-radius: 999px; padding: .42rem .9rem; font-size: .84rem; font-weight: 600; transition: background .15s ease, color .15s ease, transform .15s ease; } .area-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; } .area-chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); } .area-chip:hover .dot { background: var(--green-lt); } @media (max-width: 560px) { .area-list { padding: 1.2rem; } .area-chip { font-size: .78rem; padding: .36rem .75rem; } .area-map { min-height: 260px; } .map-wrap iframe { height: 300px; } }