/* ============================================================ PrivateRide — Front-page landing (v2: "Musa 2.0"). Most section layout is inline in front-page.php (clamp-based, faithful to the approved design). This file holds the globals, the responsive show/hide switches, and the header scroll state. ============================================================ */ :root { /* Aliases so the design's shorthand var names resolve to the theme tokens. */ --pr-display: var(--pr-font-display); --pr-body: var(--pr-font-body); } html { scroll-behavior: smooth; } .pr-root { font-family: var(--pr-font-body); color: var(--pr-ink); background: var(--pr-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } .pr-root * { box-sizing: border-box; } .pr-root img { display: block; max-width: 100%; } .pr-root p { margin: 0; } .pr-root [id] { scroll-margin-top: 68px; } /* ---- Header (fixed, transparent over hero → solid blur on scroll) ---- */ .app-header { transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; } .app-header.is-scrolled { background: rgba(20,19,15,.9); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--pr-border-dark); box-shadow: 0 8px 28px rgba(0,0,0,.3); } /* ---- Nav / burger visibility ---- */ .nav-links { display: flex; } .nav-burger { display: none; } .nav-phone { display: inline-flex; } /* On mobile the burger drawer + sticky bar already cover Book / Call, so the header drops its "Book now" button and phone — leaving just brand + burger. */ @media (max-width: 880px) { .nav-links { display: none; } /* show as a clean 44x44 square — reset Astra's default button padding/width */ .nav-burger { display: inline-flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; box-sizing: border-box !important; line-height: 1 !important; } .header-book { display: none !important; } /* beats the element's inline display */ .nav-phone { display: none !important; } } /* ---- Hero art-direction (separate desktop / mobile crops) ---- */ .hero-img--d { display: block; } .hero-img--m { display: none; } @media (max-width: 640px) { .hero-img--d { display: none; } .hero-img--m { display: block; } } /* ---- Sticky mobile bottom bar ---- */ .sticky-bar { display: none; } @media (max-width: 880px) { .sticky-bar { display: flex; } .pr-root { padding-bottom: 74px; } } /* ---- Drawer scroll-lock ---- */ body.pr-lock { overflow: hidden; } /* ---- FAQ accordion (native exclusive

) ---- */ .faq-item summary { list-style: none; cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .faq-minus { display: none; } .faq-item[open] .faq-plus { display: none; } .faq-item[open] .faq-minus { display: block; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pr-root *, .pr-root *::before, .pr-root *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================================================ Google Places autocomplete dropdown — appended to by Google for the CBS booking form pickup field, so styled globally. ============================================================ */ .pac-container { z-index: 100000; margin-top: 4px; background: var(--pr-bg); border: 1px solid var(--pr-border); border-radius: 12px; box-shadow: var(--pr-shadow-md); font-family: var(--pr-font-body); overflow: hidden; } .pac-item { padding: 9px 14px; font-size: 13.5px; color: var(--pr-muted); border-top: 1px solid var(--pr-surface); cursor: pointer; } .pac-item:first-child { border-top: none; } .pac-item:hover, .pac-item-selected { background: var(--pr-surface); } .pac-item-query { font-size: 13.5px; color: var(--pr-ink); } .pac-matched { color: var(--pr-accent-strong); } .pac-icon { display: none; } /* ---- Hero / CTA — mobile refinements ---- */ @media (max-width: 640px) { /* lift the copy block up (eyebrow sits higher) */ .prh-hero__in { justify-content: center !important; } /* full-width, stacked CTAs (hero + final CTA) */ .prh-hero__btns, .prh-cta__btns { flex-direction: column; } .prh-hero__btns > a, .prh-cta__btns > a { width: 100%; } /* trust row: tighter so it fits, and centered if it wraps */ .prh-hero__trust { justify-content: center; font-size: 12.5px !important; gap: 6px 12px !important; } } /* Sticky mobile CTA bar auto-hides while the booking form is on screen, so it never covers the form's controls (toggled by home.js via IntersectionObserver). */ .sticky-bar { transition: transform .28s ease; } .sticky-bar.is-hidden { transform: translateY(120%); pointer-events: none; }