/* ============================================ Red Mile Limousine — Get a Quote Page Styles Palette: charcoal #14110F · red #B3121A · gold #C9A24B · cream #FAF7F2 ============================================ */ /* Fonts are now loaded via tags in the HTML instead of @import here — @import inside a stylesheet blocks CSS parsing and can silently fail under some CDN/CSP configurations, which is likely why the typography wasn't rendering correctly. */ /* ---------- Compact shared header fix (unchanged from site) ---------- */ @media (min-width: 992px) { .main-header .header-upper .auto-container { max-width: 1830px !important; width: calc(100% - 46px) !important; padding-left: 0 !important; padding-right: 0 !important; } .main-header .header-upper .inner-container { position: relative !important; min-height: 118px !important; height: 118px !important; padding-right: 255px !important; background: #fff !important; overflow: visible !important; } .main-header .logo-outer { height: 118px !important; display: flex !important; align-items: center !important; padding-left: 34px !important; float: left !important; width: auto !important; } .main-header .logo-outer img { max-height: 76px !important; width: auto !important; } .main-header .logo-outer .title { line-height: 1.15 !important; } .main-header .nav-outer { position: static !important; min-height: 118px !important; height: 118px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; padding-left: 20px !important; float: none !important; } .main-header .main-menu { display: flex !important; align-items: center !important; justify-content: flex-end !important; min-height: 118px !important; height: 118px !important; float: none !important; margin-left: auto !important; } .main-header .navbar-collapse, .main-header .navigation { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; margin: 0 !important; } .main-header .navigation > li > a { padding: 0 13px !important; line-height: 118px !important; white-space: nowrap !important; } .main-header .outer-box { position: absolute !important; top: 0 !important; right: 0 !important; width: 255px !important; height: 118px !important; min-height: 118px !important; margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; z-index: 5 !important; } .main-header .outer-box .btn-box { height: 118px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .main-header .outer-box .vendor-btn, .main-header .outer-box .theme-btn.vendor-btn { height: 118px !important; min-height: 118px !important; width: 100% !important; padding: 0 24px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.2 !important; white-space: nowrap !important; position: static !important; } } @media (max-width: 1400px) and (min-width: 992px) { .main-header .header-upper .inner-container { padding-right: 205px !important; } .main-header .outer-box { width: 205px !important; } .main-header .navigation > li > a { padding: 0 8px !important; font-size: 14px !important; } } @media (max-width: 1180px) and (min-width: 992px) { .main-header .outer-box { display: none !important; } .main-header .header-upper .inner-container { padding-right: 0 !important; } } @media (max-width: 991px) { .main-header .outer-box { display: none !important; } } /* ---------- Design tokens ---------- */ :root{ --rml-charcoal:#14110F; --rml-red:#B3121A; --rml-red-dark:#8C0F16; --rml-gold:#C9A24B; --rml-cream:#FAF7F2; --rml-ink:#2A2622; --rml-mute:#6B655D; /* No custom font-family here on purpose — this page now inherits the site's own fonts (set globally in home.css) so it matches the rest of redmilelimousine.com instead of looking like a different site. Only color, spacing and sizing are customized below. */ /* Consistent vertical rhythm between sections */ --space-section:clamp(48px, 6vw, 84px); --space-section-sm:clamp(28px, 3.5vw, 44px); /* One type scale used everywhere, so every H2 on the page matches */ --h1-size:clamp(30px, 4.4vw, 46px); --h2-size:clamp(24px, 2.8vw, 30px); --h3-size:16.5px; --body-size:14.5px; --small-size:13px; } /* Shared section-heading pattern: eyebrow label + H2 + optional subhead, reused identically across every section so the rhythm reads as one system. */ .rml-eyebrow-label{ font-weight:700; font-size:12px; color:var(--rml-red); letter-spacing:1.4px; text-transform:uppercase; margin:0 0 10px; } .rml-section-title{ font-size:var(--h2-size); font-weight:700; color:var(--rml-ink); line-height:1.22; margin:0 0 10px; } .rml-section-sub{ color:var(--rml-mute); font-size:var(--body-size); line-height:1.6; margin:0; } /* ---------- Hero ---------- IMPORTANT: this section now uses the theme's own .page-title wrapper (background-image, .layer overlay, fixed-header clearance are all handled by the site's existing home.css / rml-header.css — do NOT re-declare position, padding-top, or background here, or the header will overlap the content again like it did before this fix. */ .page-title.rml-quote-hero .layer{ background:rgba(20,17,15,.78); /* darker tint so the new text stays readable over the photo */ } .rml-quote-hero .inner-box{ max-width:760px; margin:0 auto; text-align:center; } .rml-quote-eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--rml-gold); font-weight:700; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:16px; } .rml-quote-eyebrow::before, .rml-quote-eyebrow::after{ content:""; width:26px; height:1px; background:var(--rml-gold); opacity:.6; } .rml-quote-hero h1{ color:#fff; font-weight:700; font-size:var(--h1-size); line-height:1.14; letter-spacing:-0.3px; margin:0 0 16px; } .rml-quote-hero .lede{ color:#d8d3ca; font-size:16.5px; line-height:1.6; max-width:560px; margin:0 auto 26px; } .rml-hero-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:8px; } .rml-hero-trust span{ font-size:13px; font-weight:600; color:#efece5; display:flex; align-items:center; gap:7px; } .rml-hero-trust i{ color:var(--rml-gold); font-size:12px; } .rml-hero-google{ display:inline-flex; align-items:center; gap:8px; margin:0 auto 22px; background:rgba(255,255,255,.06); border:1px solid rgba(201,162,75,.35); border-radius:24px; padding:8px 18px; } .rml-hero-google .stars{ color:#F4B400; font-size:13px; letter-spacing:1px; } .rml-hero-google span{ color:#f2efe9; font-size:13px; font-weight:600; } .rml-quote-hero .bread-crumb{ margin-top:18px; } /* ---------- Booking widget wrapper ---------- */ section.rml-booking-section{ background:var(--rml-cream); padding:var(--space-section-sm) 20px var(--space-section-sm); border-bottom:1px solid #ece6da; } .rml-booking-heading{ text-align:center; max-width:640px; margin:0 auto 20px; } .rml-booking-heading h2{ font-size:var(--h2-size); font-weight:700; color:var(--rml-ink); line-height:1.22; letter-spacing:-0.2px; margin:0 0 8px; } .rml-booking-heading p{ color:var(--rml-mute); font-size:var(--body-size); line-height:1.6; margin:0 0 14px; } .rml-google-badge{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #e6ddc9; border-radius:24px; padding:7px 16px 7px 12px; font-size:13px; font-weight:600; color:var(--rml-ink); } .rml-google-badge .stars{ color:#F4B400; letter-spacing:1px; font-size:12px; } .rml-google-badge b{ color:var(--rml-ink); } .rml-booking-frame{ position:relative; max-width:1100px; margin:0 auto; background:#fff; border-radius:16px; padding:8px; box-shadow:0 12px 40px rgba(20,17,15,.08); border:1px solid #eee6d8; min-height:520px; /* reserves space so the page doesn't jump when the widget script loads */ } .rml-booking-frame .rml-loader{ position:absolute; inset:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#fff; border-radius:12px; z-index:1; transition:opacity .3s ease; color:var(--rml-mute); font-size:13.5px; } .rml-booking-frame .rml-loader .spin{ width:34px; height:34px; border-radius:50%; border:3px solid #eee6d8; border-top-color:var(--rml-red); animation:rml-spin .8s linear infinite; } .rml-booking-frame .rml-loader.rml-hide{ opacity:0; pointer-events:none; } @keyframes rml-spin{ to{ transform:rotate(360deg); } } /* ---------- Trust bar (below the form) ---------- */ .rml-trust-bar{ background:var(--rml-charcoal); padding:20px 24px; } .rml-trust-bar .auto-container{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; } .rml-trust-bar span{ color:#f2efe9; font-size:14px; font-weight:600; display:flex; align-items:center; gap:9px; letter-spacing:.2px; } .rml-trust-bar i{ color:var(--rml-gold); font-size:15px; } /* ---------- How it works ---------- */ .rml-howit{ padding:var(--space-section) 24px var(--space-section-sm); background:#fff; } .rml-howit .auto-container{ max-width:1000px; margin:0 auto; text-align:center; } .rml-howit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px; } .rml-howit-step{ position:relative; background:var(--rml-cream); border-radius:14px; padding:32px 24px 26px; text-align:left; border:1px solid #efe7d8; transition:transform .25s ease, box-shadow .25s ease; } .rml-howit-step:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(20,17,15,.09); } .rml-howit-step .num{ font-size:32px; color:var(--rml-gold); font-weight:700; line-height:1; margin-bottom:14px; display:block; letter-spacing:0.5px; } .rml-howit-step h3{ font-size:var(--h3-size); font-weight:700; color:var(--rml-ink); line-height:1.35; margin:0 0 8px; } .rml-howit-step p{ font-size:var(--body-size); color:var(--rml-mute); margin:0; line-height:1.6; } @media (max-width:820px){ .rml-howit-grid{ grid-template-columns:1fr; } } /* ---------- Services + service area ---------- */ .rml-services-area{ padding:var(--space-section-sm) 24px var(--space-section); background:#fff; } .rml-services-area .auto-container{ max-width:1160px; margin:0 auto; } .rml-services-area .head{ text-align:center; max-width:600px; margin:0 auto 36px; } .rml-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:900px){ .rml-two-col{ grid-template-columns:1fr; } } .rml-card-box{ background:var(--rml-cream); border-radius:14px; padding:28px; border:1px solid #efe7d8; } .rml-card-box h3{ font-size:var(--h3-size); font-weight:700; color:var(--rml-ink); line-height:1.3; margin:0 0 16px; display:flex; align-items:center; gap:10px; } .rml-card-box h3 i{ color:var(--rml-red); } /* kept harmless in case icons are re-added later */ .rml-chip-list{ display:flex; flex-wrap:wrap; gap:10px; } .rml-chip{ background:#fff; border:1px solid #e6ddc9; border-radius:20px; padding:8px 16px; font-size:var(--small-size); font-weight:500; color:var(--rml-ink); line-height:1.4; transition:all .2s ease; } .rml-chip a{ color:inherit; text-decoration:none; } .rml-chip:hover{ border-color:var(--rml-gold); background:#fff9ec; } /* ---------- FAQ ---------- */ .rml-quote-faq{ padding:var(--space-section-sm) 24px var(--space-section); background:var(--rml-cream); } .rml-quote-faq .auto-container{ max-width:780px; margin:0 auto; } .rml-quote-faq .head{ text-align:center; margin-bottom:30px; } .rml-quote-faq details{ background:#fff; border-radius:10px; padding:16px 22px; margin-bottom:12px; border:1px solid #efe7d8; transition:border-color .2s ease; } .rml-quote-faq details[open]{ border-color:var(--rml-gold); } .rml-quote-faq summary{ font-weight:700; cursor:pointer; font-size:15px; color:var(--rml-ink); line-height:1.4; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; } .rml-quote-faq summary::-webkit-details-marker{ display:none; } .rml-quote-faq summary::after{ content:"+"; color:var(--rml-red); font-size:20px; font-weight:400; flex-shrink:0; } .rml-quote-faq details[open] summary::after{ content:"–"; } .rml-quote-faq p{ margin:12px 0 0; color:var(--rml-mute); font-size:var(--body-size); line-height:1.65; } /* ---------- Sticky mobile CTA ---------- */ .rml-sticky-cta{ position:fixed; bottom:0; left:0; right:0; display:none; z-index:999; box-shadow:0 -4px 16px rgba(0,0,0,.18); } .rml-sticky-cta .row{ display:flex; } .rml-sticky-cta a{ flex:1; text-align:center; padding:15px 0; color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; } .rml-sticky-cta a.call{ background:var(--rml-red); } .rml-sticky-cta a.wa{ background:#25D366; } @media (max-width:768px){ .rml-sticky-cta{ display:block; } body{ padding-bottom:54px; } } /* ========================================================= ADDED — rules for sections in the current HTML that this CSS file didn't originally cover. Nothing above this line was changed from your version; everything below is new, only for classes with no styling above (route cards, final CTA, widget fallback, skip link, booking assurance, buttons). ========================================================= */ /* Skip-to-content link (accessibility) */ .rml-skip-link{ position:fixed; top:10px; left:10px; z-index:10000; transform:translateY(-160%); padding:11px 16px; background:var(--rml-charcoal); color:#fff; border-radius:6px; font-weight:700; text-decoration:none; transition:transform .2s ease; } .rml-skip-link:focus{ transform:translateY(0); color:#fff; } /* Booking assurance strip under the "Check Price and Availability" heading */ .rml-booking-assurance{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin:18px auto 0; padding:13px 20px; border:1px solid #e5d8bf; border-radius:12px; background:#fff; color:var(--rml-mute); font-size:12.5px; line-height:1.45; }.rml-booking-assurance strong{ color:var(--rml-ink); } .rml-booking-assurance span{ position:relative; padding-left:15px; } .rml-booking-assurance span::before{ content:""; position:absolute; top:.55em; left:0; width:6px; height:6px; border-radius:50%; background:var(--rml-gold); } /* Widget fallback box (shown if the booking script fails/times out) */ .rml-widget-fallback{ max-width:620px; margin:70px auto; padding:34px; border:1px solid #e5d8bf; border-radius:14px; background:var(--rml-cream); text-align:center; } .rml-widget-fallback[hidden]{ display:none !important; } .rml-widget-fallback h3{ margin:0 0 10px; color:var(--rml-ink); font-size:var(--h3-size); } .rml-widget-fallback p{ margin:0 0 20px; color:var(--rml-mute); line-height:1.65; } .rml-fallback-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; } /* Shared button style (used by widget fallback + final CTA) */ .rml-btn{ display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:11px 20px; border-radius:8px; font-size:14px; font-weight:800; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; } .rml-btn:hover{ transform:translateY(-2px); } .rml-btn-primary{ background:var(--rml-red); color:#fff; } .rml-btn-primary:hover{ background:var(--rml-red-dark); color:#fff; } .rml-btn-whatsapp{ background:#168a45; color:#fff; } .rml-btn-whatsapp:hover{ background:#11743a; color:#fff; } .rml-btn-light{ background:#fff; color:var(--rml-red-dark); box-shadow:0 8px 22px rgba(0,0,0,.12); } .rml-btn-light:hover{ background:var(--rml-cream); color:var(--rml-red-dark); } /* Privacy note under the booking form */ .rml-privacy-note{ max-width:850px; margin:18px auto 0; color:var(--rml-mute); font-size:12.5px; line-height:1.6; text-align:center; } .rml-privacy-note a{ color:var(--rml-red-dark); font-weight:700; } /* Popular Reservations route cards */ .rml-route-section{ padding:var(--space-section) 24px; background:var(--rml-cream); } .rml-route-section .auto-container{ max-width:1160px; margin:0 auto; } .rml-route-section .head{ max-width:720px; margin:0 auto 34px; text-align:center; } .rml-route-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; } .rml-route-card{ display:flex; flex-direction:column; min-height:250px; padding:25px; background:#fff; border:1px solid #efe7d8; border-radius:14px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .rml-route-card:hover{ border-color:#d9c59b; box-shadow:0 13px 32px rgba(20,17,15,.08); transform:translateY(-3px); } .rml-route-card h3{ margin:0 0 9px; color:var(--rml-ink); font-size:var(--h3-size); font-weight:700; line-height:1.3; } .rml-route-card p{ margin:0; color:var(--rml-mute); font-size:var(--body-size); line-height:1.68; } .rml-route-card a{ margin-top:auto; padding-top:20px; color:var(--rml-red-dark); font-size:13.5px; font-weight:800; line-height:1.4; text-decoration:none; } @media (max-width:1040px){ .rml-route-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:768px){ .rml-route-grid{ grid-template-columns:1fr; } .rml-route-card{ min-height:auto; } } /* Final CTA banner */ .rml-final-cta{ padding:44px 24px; background:linear-gradient(135deg, var(--rml-red-dark), var(--rml-red)); } .rml-final-cta .auto-container{ display:flex; max-width:1160px; align-items:center; justify-content:space-between; gap:30px; margin:0 auto; } .rml-final-cta .rml-eyebrow-label{ color:#f0cf88; } .rml-final-cta h2{ margin:0 0 8px; color:#fff; font-size:var(--h2-size); line-height:1.2; } .rml-final-cta p{ max-width:700px; margin:0; color:#f3dddf; font-size:15px; line-height:1.6; } .rml-final-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; } .rml-phone-link{ color:#fff; font-size:18px; font-weight:800; white-space:nowrap; text-decoration:none; } .rml-phone-link:hover{ color:#fff3ce; } @media (max-width:900px){ .rml-final-cta .auto-container{ flex-direction:column; align-items:flex-start; } .rml-final-actions{ justify-content:flex-start; } } @media (max-width:768px){ .rml-final-actions{ width:100%; align-items:stretch; flex-direction:column; } .rml-btn, .rml-phone-link{ width:100%; text-align:center; } } /* Accessible focus states */ a:focus-visible, button:focus-visible, summary:focus-visible{ outline:3px solid var(--rml-gold); outline-offset:3px; } /* Scroll-to-top button — fully self-styled (size/color/position all explicit) rather than relying on the theme's own CSS, since forcing the theme's default into view previously produced an oversized, wrong-colored block. Also hides the theme's separate floating WhatsApp icon on mobile since the sticky bar already covers it. */ @media (max-width:768px){ .whatsapp-icon{ display:none !important; } .scroll-to-top{ position:fixed !important; right:14px !important; bottom:70px !important; left:auto !important; top:auto !important; width:42px !important; height:42px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:var(--rml-red) !important; box-shadow:0 4px 14px rgba(0,0,0,.25) !important; z-index:9998 !important; } .scroll-to-top span, .scroll-to-top .fa{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; color:#fff !important; font-size:15px !important; line-height:1 !important; } } /* Smooth scroll for the #booking anchor links + reduced-motion respect */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }