/* ========================================================= Makkah2MadinahTaxi — v2 design system (built on Bootstrap 5) Palette: deep haram green + kiswah gold thread, warm parchment Display: Fraunces · Body: Inter · Data/mono: IBM Plex Mono Signature element: the "boarding pass" route ticket ========================================================= PERF NOTE: The Google Fonts @import that used to live here was removed. Importing fonts from inside a CSS file creates a serial network waterfall (browser must fetch this file, parse it, THEN discover and fetch the fonts stylesheet) which was the single biggest render-blocking cost in the Lighthouse report. The fonts are now loaded directly from tags in the of each HTML page, in parallel with this stylesheet. ========================================================= */ :root{ --bg: #FBF7EE; --bg-alt: #F1E7CE; --panel: #FFFFFF; --ink: #16211A; --ink-soft: #55645A; --ink-faint: #8A9187; --green-deep: #0C3A2C; --green-mid: #175A44; --green-line: #2E7A5D; --gold: #B98A34; --gold-soft: #EAD6A0; --gold-deep: #8C6420; --line: #E3D7B8; --whatsapp: #1F8A57; --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --shadow: 0 18px 40px -20px rgba(12,58,44,.35); /* Bootstrap variable overrides */ --bs-body-font-family: 'Inter', system-ui, sans-serif; --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-primary: #0C3A2C; --bs-primary-rgb: 12,58,44; --bs-border-radius: var(--radius-s); --bs-border-color: var(--line); --bs-link-color: var(--green-mid); --bs-link-hover-color: var(--gold-deep); } html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; } body{ overflow-x:hidden; max-width:100%; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; } ::selection{ background:var(--gold-soft); color:var(--green-deep); } h1,h2,h3,h4,.font-display{ font-family:'Fraunces', Georgia, serif; font-weight:600; line-height:1.1; color:var(--green-deep); letter-spacing:-.01em; } h1{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); } h2{ font-size:clamp(1.55rem, 3.1vw, 2.35rem); margin-bottom:.6em; } h3{ font-size:1.2rem; } p{ color:var(--ink-soft); } a{ text-decoration:none; } .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); font-weight:500; display:inline-flex; align-items:center; gap:.6em; margin-bottom:12px; } .eyebrow::before{ content:""; width:20px; height:1px; background:var(--gold-deep); display:inline-block; } .section-pad{ padding:96px 0; } .section-pad-sm{ padding:64px 0; } @media (max-width:768px){ .section-pad{ padding:56px 0; } .section-pad-sm{ padding:44px 0; } } :focus-visible{ outline:3px solid var(--gold-deep); outline-offset:3px; } /* ---------- Buttons ---------- */ .btn{ border-radius:100px; font-weight:600; padding:13px 26px; font-size:.95rem; } .btn-lg{ padding:15px 30px; } .btn-gold{ background:var(--gold); border-color:var(--gold); color:#241905; } .btn-gold:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; } .btn-forest{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; } .btn-forest:hover{ background:var(--green-mid); border-color:var(--green-mid); color:#fff; } .btn-outline-forest{ background:transparent; border:1.5px solid var(--green-deep); color:var(--green-deep); } .btn-outline-forest:hover{ background:var(--green-deep); color:#fff; } .btn-whatsapp{ background:var(--whatsapp); border-color:var(--whatsapp); color:#fff; box-shadow:0 12px 26px -12px rgba(31,138,87,.55); } .btn-whatsapp:hover{ background:#166b42; border-color:#166b42; color:#fff; } .btn svg,.btn i{ flex-shrink:0; } /* ---------- Topbar ---------- */ .topbar{ background:var(--green-deep); color:#EFE7D3; font-size:.82rem; } .topbar a{ color:#EFE7D3; } .topbar strong{ color:var(--gold-soft); } /* ---------- Navbar ---------- */ .navbar-m2m{ background:rgba(251,247,238,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-top:14px; padding-bottom:14px; } .navbar-m2m .navbar-brand{ font-family:'Fraunces', serif; font-weight:600; font-size:1.2rem; color:var(--green-deep); display:flex; align-items:center; gap:8px; } .navbar-m2m .navbar-brand .mark{ color:var(--gold-deep); } .navbar-m2m .nav-link{ font-weight:600; color:var(--ink); font-size:.92rem; border-bottom:2px solid transparent; padding:8px 12px !important; } .navbar-m2m .nav-link:hover, .navbar-m2m .nav-link.active{ color:var(--green-deep); border-color:var(--gold); } .navbar-toggler{ border-color:var(--line) !important; box-shadow:none !important; } /* ---------- Hero ---------- */ .hero{ background: radial-gradient(1000px 460px at 88% -8%, rgba(185,138,52,.16), transparent 60%), var(--bg); padding:60px 0 20px; } .hero .lede{ font-size:1.08rem; max-width:50ch; } .badge-check{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--ink); margin:0 20px 10px 0; } .badge-check i{ color:var(--green-mid); } /* ---------- Signature element: the Boarding Pass ---------- */ .boarding-pass{ background:var(--panel); border-radius:var(--radius-l); box-shadow:var(--shadow); border:1px solid var(--line); position:relative; overflow:hidden; } .bp-head{ display:flex; align-items:center; justify-content:space-between; background:var(--green-deep); color:var(--gold-soft); padding:14px 22px; font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; } .bp-head span:last-child{ color:#EFE7D3; opacity:.75; } .bp-body{ padding:26px 24px 20px; } .bp-route{ display:flex; align-items:center; gap:14px; } .bp-city{ flex:0 0 auto; text-align:center; } .bp-city .dome{ width:50px; height:50px; margin:0 auto 6px; } .bp-city span{ font-family:'Fraunces', serif; font-weight:600; color:var(--green-deep); font-size:1rem; display:block; } .bp-city small{ font-family:'IBM Plex Mono', monospace; font-size:.65rem; color:var(--ink-faint); letter-spacing:.08em; } .bp-track{ flex:1; position:relative; height:2px; } .bp-track svg{ width:100%; height:26px; overflow:visible; display:block; } .bp-track .plane{ color:var(--gold-deep); } /* ---------- Boarding-pass car: Makkah <-> Madinah loop ---------- One full lap = 13s: 5s Makkah -> Madinah (2s drive, 1s pause at the midpoint, 2s drive) 1.5s parked at Madinah 5s Madinah -> Makkah (2s drive, 1s pause at the midpoint, 2s drive) 1.5s parked at Makkah, then loops PERF NOTE: this animation used to animate the `left` property, which forces a layout recalculation on every single frame (a "non-composited animation" in Lighthouse). It has been rewritten to animate ONLY `transform`, using CSS container query units (cqw) so it still tracks the track's width responsively without ever touching layout. The browser can now run this entirely on the compositor thread (GPU), off the main thread, which also removes the associated long main-thread task. ------------------------------------------------------------------ */ .bp-track{ flex:1; position:relative; height:26px; container-type: inline-size; /* lets .bp-car use cqw units below */ } .bp-track svg{ width:100%; height:26px; overflow:visible; display:block; } .bp-car{ position:absolute; top:50%; left:0; width:100px; height:auto; transform: translate(-50%, -50%) scaleX(1); filter: drop-shadow(0 3px 4px rgba(12,58,44,.3)); animation: bp-car-move 13s linear infinite; will-change: transform; z-index: 5; pointer-events: none; } .bp-car img{ display:block; width:150px; height:auto; } /* ================================ CAR ANIMATION (transform-only, GPU-composited) ================================ */ @keyframes bp-car-move{ 0%{ transform: translate(calc(0cqw - 50%), -50%) scaleX(1); } 15.38%{ transform: translate(calc(50cqw - 50%), -50%) scaleX(1); } 23.08%{ transform: translate(calc(50cqw - 50%), -50%) scaleX(1); } 38.46%{ transform: translate(calc(100cqw - 50%), -50%) scaleX(1); } 49.99%{ transform: translate(calc(100cqw - 50%), -50%) scaleX(1); } 50%{ transform: translate(calc(100cqw - 50%), -50%) scaleX(-1); } 65.38%{ transform: translate(calc(50cqw - 50%), -50%) scaleX(-1); } 73.08%{ transform: translate(calc(50cqw - 50%), -50%) scaleX(-1); } 88.46%{ transform: translate(calc(0cqw - 50%), -50%) scaleX(-1); } 99.99%{ transform: translate(calc(0cqw - 50%), -50%) scaleX(-1); } 100%{ transform: translate(calc(0cqw - 50%), -50%) scaleX(1); } } /* Respect users who've asked for less motion */ @media (prefers-reduced-motion: reduce){ .bp-car{ animation:none; left:50%; transform:translate(-50%,-50%); } } /* ================================ MOBILE ================================ */ @media (max-width: 768px){ .bp-track{ position:relative; height:26px; min-width:0; } .bp-car{ width:100px; } .bp-car img{ width:100px; } } /* SMALL MOBILE */ @media (max-width: 480px){ .bp-car{ width:100px; } .bp-car img{ width:100px; } } /* VERY SMALL MOBILE */ @media (max-width: 360px){ .bp-car{ width:100px; } .bp-car img{ width:100px; } } .bp-perf{ position:relative; margin:20px -24px 0; border-top:2px dashed var(--line); } .bp-perf::before,.bp-perf::after{ content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--bg); border:1px solid var(--line); } .bp-perf::before{ left:-11px; } .bp-perf::after{ right:-11px; } .bp-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:18px 24px 4px; } .bp-fact{ padding:8px 0; } .bp-fact b{ display:block; font-family:'Fraunces', serif; color:var(--green-deep); font-size:1.15rem; } .bp-fact span{ font-size:.76rem; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace; letter-spacing:.03em; } /* ---------- Trust bar ---------- */ .trustbar{ background:var(--green-deep); color:#EFE7D3; padding:24px 0; } .trustbar .item{ display:flex; align-items:center; gap:10px; font-size:.87rem; font-weight:600; } .trustbar .item i{ color:var(--gold-soft); font-size:1.1rem; } /* ---------- Booking ---------- */ .booking-section{ background:var(--bg-alt); } .booking-intro ul{ list-style:none; padding:0; margin:20px 0 0; } .booking-intro li{ display:flex; gap:10px; margin-bottom:12px; font-size:.94rem; color:var(--ink-soft); } .booking-intro li i{ color:var(--gold-deep); margin-top:3px; } .booking-card{ background:var(--panel); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:32px; border:1px solid var(--line); width:100%; max-width:100%; } @media (max-width:480px){ .booking-card{ padding:22px 18px; } } .booking-card .form-label{ font-size:.82rem; font-weight:600; color:var(--green-deep); margin-bottom:6px; } .booking-card .form-control, .booking-card .form-select{ border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px; font-size:.95rem; background:#FCFAF4; color:var(--ink); width:100%; max-width:100%; min-width:0; } .booking-card .form-control:focus, .booking-card .form-select:focus{ border-color:var(--gold-deep); box-shadow:0 0 0 .2rem rgba(185,138,52,.18); } .form-note{ font-size:.78rem; color:var(--ink-faint); margin-top:14px; } .form-status{ margin-top:12px; font-size:.85rem; font-weight:600; min-height:1.3em; } .form-status.ok{ color:var(--whatsapp); } /* ---------- Route / fleet cards ---------- */ .route-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-l); padding:30px; box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column; gap:12px; transition:transform .18s ease, box-shadow .18s ease; } .route-card:hover{ transform:translateY(-4px); box-shadow:0 24px 46px -20px rgba(12,58,44,.4); } .route-dir{ font-family:'IBM Plex Mono', monospace; font-size:.74rem; color:var(--gold-deep); letter-spacing:.07em; } .route-fare{ font-family:'IBM Plex Mono', monospace; color:var(--green-mid); font-size:.95rem; margin-top:auto; } .route-fare b{ color:var(--green-deep); font-size:1.1rem; } .fleet-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; height:100%; display:flex; flex-direction:column; gap:8px; } .fleet-card .tag{ align-self:flex-start; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--bg-alt); color:var(--green-mid); padding:4px 10px; border-radius:100px; } .fleet-card ul{ list-style:none; margin:8px 0 0; padding:0; font-size:.86rem; color:var(--ink-soft); } .fleet-card li{ padding:3px 0; display:flex; gap:8px; } .fleet-card li::before{ content:"—"; color:var(--gold-deep); } .fleet-card .price{ margin-top:10px; font-family:'IBM Plex Mono', monospace; color:var(--green-deep); font-weight:600; font-size:1rem; } .table-wrap{ overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:6px 18px; } table.fare-table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:.92rem; } table.fare-table th, table.fare-table td{ padding:14px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } table.fare-table th{ font-family:'IBM Plex Mono', monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:500; } table.fare-table td.price{ font-family:'IBM Plex Mono', monospace; color:var(--green-deep); font-weight:600; } .fare-note{ font-size:.82rem; color:var(--ink-faint); margin-top:12px; } /* ---------- keyword / about strip ---------- */ .keyword-strip{ background:var(--bg-alt); } .keyword-strip p{ font-size:.96rem; } .keyword-strip strong{ color:var(--green-deep); } /* ---------- Why us ---------- */ .why-card{ height:100%; } .why-card .icon-wrap{ width:48px; height:48px; border-radius:14px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); margin-bottom:12px; font-size:1.3rem; } /* ---------- FAQ (Bootstrap accordion, restyled) ---------- */ .faq-accordion .accordion-item{ background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; } .faq-accordion .accordion-button{ background:transparent; font-family:'Fraunces', serif; font-weight:600; color:var(--green-deep); font-size:1.03rem; padding:20px 4px; box-shadow:none; } .faq-accordion .accordion-button:not(.collapsed){ background:transparent; color:var(--green-deep); box-shadow:none; } .faq-accordion .accordion-button::after{ filter:none; } .faq-accordion .accordion-body{ padding:0 4px 20px; color:var(--ink-soft); } /* ---------- Reviews ---------- */ .review-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; height:100%; display:flex; flex-direction:column; gap:14px; } .stars{ color:var(--gold-deep); letter-spacing:2px; } .review-avatar{ width:38px; height:38px; border-radius:50%; background:var(--green-mid); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:600; flex-shrink:0; } /* ---------- CTA band ---------- */ .cta-band{ background:var(--green-deep); color:#F4EEDD; text-align:center; } .cta-band h2{ color:#fff; } .cta-band p{ color:#D9CFB3; max-width:56ch; margin:0 auto; } /* ---------- Breadcrumb ---------- */ .breadcrumb-m2m{ font-size:.82rem; color:var(--ink-faint); padding:16px 0 0; } .breadcrumb-m2m a{ color:var(--green-mid); font-weight:600; } /* ---------- Footer ---------- */ footer.site-footer{ background:#0A2A20; color:#C9C0A4; padding:60px 0 26px; font-size:.9rem; } footer.site-footer h4{ color:#F4EEDD; font-family:'Fraunces', serif; font-size:1rem; margin-bottom:14px; } footer.site-footer a{ color:#C9C0A4; display:block; margin-bottom:8px; font-size:.88rem; } footer.site-footer a:hover{ color:var(--gold-soft); } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:22px; font-size:.8rem; color:#8E8968; } /* ---------- WhatsApp float ---------- */ .wa-float{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex; align-items:center; gap:10px; background:var(--whatsapp); color:#fff; padding:14px 20px; border-radius:100px; font-weight:600; font-size:.9rem; box-shadow:0 14px 28px -10px rgba(31,138,87,.6); } .wa-float:hover{ background:#166b42; color:#fff; } /* PERF NOTE: animating box-shadow is a "non-composited animation" in Lighthouse (it repaints every frame). The pulsing ring below is a separate layer animated with only transform + opacity, which the browser can run on the compositor thread instead. */ .wa-float::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--whatsapp); animation:wa-pulse 2.6s ease-in-out infinite; z-index:-1; } @keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.35); opacity:0; } } @media (max-width:560px){ .wa-float span{ display:none; } .wa-float{ padding:15px; border-radius:50%; } } @media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } html{ scroll-behavior:auto; } } /* ---------- Small screen refinements ---------- */ @media (max-width:480px){ .bp-facts{ grid-template-columns:1fr 1fr; } .cta-band .btn{ width:100%; } }