/* ===================================================================== PAIDAR premium layer: typography refinements, hero slider, finder bar, services ticker, vehicle options, scroll reveal. Loaded after main.css. ===================================================================== */ h1, h2, h3, .slide-title { text-wrap: balance; } .section-head h2, .why-copy h2, .cta-band h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.12; } html[lang^="ar"] .section-head h2, html[lang^="ar"] .why-copy h2, html[lang^="ar"] .cta-band h2 { font-weight: 700; letter-spacing: 0; line-height: 1.35; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; opacity: .8; } .section-head.center .eyebrow { justify-content: center; } .section-sub { font-size: 1.05rem; } .entry h2 { font-weight: 800; letter-spacing: -.015em; } html[lang^="ar"] .entry h2 { font-weight: 700; letter-spacing: 0; } .entry h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--brand); } .entry figure { margin: 1.6em 0; } .entry figure img { width: 100%; height: auto; border-radius: var(--radius); } .entry figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; } /* ---------- Hero slider ---------- */ .hero-slider { position: relative; isolation: isolate; height: clamp(560px, 86vh, 820px); background: #15161b; overflow: hidden; color: #fff; } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 1.1s; } .slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; z-index: -2; } .slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 12 16 / .72) 0%, rgb(12 12 16 / .42) 38%, rgb(12 12 16 / .08) 62%, rgb(12 12 16 / .55) 100%), linear-gradient(90deg, rgb(12 12 16 / .55) 0%, rgb(12 12 16 / 0) 60%); } html[dir="rtl"] .slide::before { background: linear-gradient(180deg, rgb(12 12 16 / .72) 0%, rgb(12 12 16 / .42) 38%, rgb(12 12 16 / .08) 62%, rgb(12 12 16 / .55) 100%), linear-gradient(270deg, rgb(12 12 16 / .55) 0%, rgb(12 12 16 / 0) 60%); } .slide-inner { height: 100%; display: flex; align-items: flex-start; padding-top: clamp(56px, 9vh, 104px); } .slide-copy { max-width: 680px; } .slide .eyebrow { color: #fff; } .slide-title { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.1rem); font-weight: 800; line-height: 1.06; letter-spacing: -.028em; color: #fff; margin: 0 0 .35em; text-shadow: 0 2px 24px rgb(0 0 0 / .25); } html[lang^="ar"] .slide-title { font-weight: 700; letter-spacing: 0; line-height: 1.3; } .slide-title span { display: block; color: var(--accent-on-dark); } .slide .lead { font-size: clamp(1rem, .95rem + .3vw, 1.18rem); color: rgb(255 255 255 / .92); max-width: 560px; margin-bottom: 1.6em; text-shadow: 0 1px 12px rgb(0 0 0 / .35); } .slider-controls { position: absolute; inset-inline: 0; bottom: 92px; z-index: 3; display: flex; align-items: center; gap: 14px; } .slider-dots { display: flex; gap: 8px; } .dot { width: 44px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .dot span { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; position: relative; } .dot span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; } html[dir="rtl"] .dot span::after { transform-origin: right; } .dot.is-active span::after { transform: scaleX(1); } .slider-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .45); background: rgb(0 0 0 / .2); color: #fff; cursor: pointer; display: grid; place-items: center; } .slider-toggle .i-pause { width: 10px; height: 12px; border-inline: 3px solid #fff; box-sizing: border-box; } .hero-slider.is-paused .slider-toggle .i-pause { width: 0; height: 0; border: 0; border-block: 6px solid transparent; border-inline-start: 10px solid #fff; margin-inline-start: 3px; } html[dir="rtl"] .hero-slider.is-paused .slider-toggle .i-pause { transform: scaleX(-1); } @media (prefers-reduced-motion: no-preference) { .slide.is-active .slide-bg { animation: paidar-kenburns 9s ease-out both; } .slide.is-active .slide-copy > * { animation: paidar-rise .9s cubic-bezier(.2,.7,.2,1) both; } .slide.is-active .slide-copy > :nth-child(2) { animation-delay: .12s; } .slide.is-active .slide-copy > :nth-child(3) { animation-delay: .24s; } .slide.is-active .slide-copy > :nth-child(4) { animation-delay: .36s; } .dot.is-active span::after { transform: scaleX(0); animation: paidar-progress var(--slide-ms, 6500ms) linear forwards; } .hero-slider.is-paused .dot.is-active span::after { animation-play-state: paused; } } @keyframes paidar-kenburns { from { transform: scale(1.09); } to { transform: scale(1.001); } } @keyframes paidar-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes paidar-progress { to { transform: scaleX(1); } } /* ---------- Finder bar overlapping the hero ---------- */ .finder-wrap { position: relative; z-index: 5; margin-top: -64px; } .finder-bar { display: grid; grid-template-columns: auto 1.2fr 1fr 1fr auto; gap: 18px; align-items: end; background: #fff; border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: 0 24px 60px rgb(20 20 30 / .16); border: 1px solid var(--line); } .finder-title { margin: 0; align-self: center; font-weight: 800; color: var(--ink); font-size: 1.05rem; line-height: 1.25; max-width: 110px; } .finder-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; } html[lang^="ar"] .finder-field label { text-transform: none; letter-spacing: 0; font-size: .9rem; } .finder-bar .btn { min-height: 46px; white-space: nowrap; } /* ---------- Services ticker (auto-scrolling, decorative) ---------- */ .ticker { overflow: hidden; padding-block: 26px; margin-top: 34px; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; width: max-content; gap: 44px; } .ticker-item { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); white-space: nowrap; font-size: 1rem; } .ticker-item .icon { width: 22px; height: 22px; color: var(--brand); } @media (prefers-reduced-motion: no-preference) { .ticker-track { animation: paidar-ticker 70s linear infinite; } html[dir="rtl"] .ticker-track { animation-name: paidar-ticker-rtl; } .ticker:hover .ticker-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .ticker { -webkit-mask-image: none; mask-image: none; } .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; gap: 16px 28px; padding-inline: 16px; } .ticker-track > :nth-child(n+20) { display: none; } } @keyframes paidar-ticker { to { transform: translateX(-50%); } } @keyframes paidar-ticker-rtl { to { transform: translateX(50%); } } /* ---------- Vehicle options ---------- */ .fleet { background: var(--bg-soft); } .fleet-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .fleet-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease; } .fleet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .fleet-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); } .fleet-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .fleet-card:hover .fleet-media img { transform: scale(1.05); } .fleet-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; } .fleet-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .08em; } html[lang^="ar"] .fleet-tag { text-transform: none; letter-spacing: 0; font-size: .88rem; } .fleet-tag .icon { width: 16px; height: 16px; } .fleet-body strong { font-size: 1.2rem; color: var(--ink); } .fleet-body > span:last-child { color: var(--muted); font-size: .93rem; } .fleet-note { text-align: center; color: var(--muted); font-size: .92rem; margin: 26px 0 0; } /* ---------- Card hover polish ---------- */ .svc-media img, .pilgrim-card > img { transition: transform .6s ease; } .svc-card a:hover .svc-media img { transform: scale(1.05); } /* ---------- Scroll reveal (only with JS and when motion is allowed) ---------- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } .js .cat-grid > [data-reveal]:nth-child(2), .js .fleet-grid > [data-reveal]:nth-child(3n+2), .js .pilgrim-grid > [data-reveal]:nth-child(2), .js .steps > [data-reveal]:nth-child(2) { transition-delay: .1s; } .js .cat-grid > [data-reveal]:nth-child(3), .js .fleet-grid > [data-reveal]:nth-child(3n), .js .pilgrim-grid > [data-reveal]:nth-child(3), .js .steps > [data-reveal]:nth-child(3) { transition-delay: .2s; } .js .steps > [data-reveal]:nth-child(4) { transition-delay: .3s; } } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .finder-bar { grid-template-columns: 1fr 1fr; } .finder-title { grid-column: 1 / -1; max-width: none; } .finder-bar .btn { grid-column: 1 / -1; } .fleet-grid { grid-template-columns: repeat(2, 1fr); } .slider-controls { bottom: 84px; } } @media (max-width: 700px) { .hero-slider { height: clamp(560px, 92vh, 720px); } .slide-bg { object-position: 38% 70%; } .slide::before, html[dir="rtl"] .slide::before { background: linear-gradient(180deg, rgb(12 12 16 / .8) 0%, rgb(12 12 16 / .58) 48%, rgb(12 12 16 / .2) 72%, rgb(12 12 16 / .6) 100%); } .slide .btn-row .btn { flex: 1 1 100%; } .finder-bar { grid-template-columns: 1fr; padding: 18px; } .finder-wrap { margin-top: -44px; } .slider-controls { bottom: 60px; } .fleet-grid { grid-template-columns: 1fr; } .ticker { padding-block: 18px; } } /* ===================================================================== Landing page v2: top bar, hero trust chips, about intro, Vision 2030 band with counters, sectors, two-column FAQ. ===================================================================== */ /* Top bar */ .topbar { background: #70272b; color: rgb(255 255 255 / .92); font-size: .84rem; } /* premium dark burgundy, matches the logo and the Get a Quote button */ .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12.5px; } /* about 44px, set by padding */ .topbar-tag { margin: 0; display: inline-flex; align-items: center; gap: 8px; } .topbar-tag .icon, .topbar-links .icon { width: 16px; height: 16px; color: #fff; } .topbar-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; } .topbar-links li, .topbar-tag { display: flex; align-items: center; line-height: 1.4; } /* exact vertical centring */ .topbar-links a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .topbar-links a:hover { color: var(--accent-on-dark); } @media (max-width: 700px) { .topbar-tag { display: none; } .topbar-inner { justify-content: center; padding-block: 11.5px; } } /* about 42px on phones */ /* Pill eyebrow */ .eyebrow.pill { padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(6px); } .eyebrow.pill::before { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-on-dark); opacity: 1; } /* Hero trust chips */ .trust-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .trust-chips li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(8px); } .trust-chips .icon { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--brand); color: #fff; } .trust-chips span { display: flex; flex-direction: column; font-size: .78rem; color: rgb(255 255 255 / .8); line-height: 1.3; } .trust-chips strong { color: #fff; font-size: .9rem; } @media (max-width: 700px) { .trust-chips { display: none; } } /* About intro */ .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .about-media { position: relative; } .about-media > img, .faq-media > img { width: 100%; height: auto; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .float-badge { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 34px rgb(20 20 30 / .16); font-size: .82rem; color: var(--muted); line-height: 1.3; } .float-badge strong { color: var(--ink); font-size: .95rem; display: block; } .float-badge > .icon { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--brand-50); color: var(--brand); } .fb-top { top: 18px; inset-inline-end: -18px; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--brand); color: rgb(255 255 255 / .85); } .fb-top strong { color: #fff; font-size: 1.8rem; line-height: 1; } .fb-bottom { bottom: -22px; inset-inline-start: 22px; max-width: 300px; } .about-copy h2 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.12; } html[lang^="ar"] .about-copy h2 { font-weight: 700; letter-spacing: 0; line-height: 1.35; } .accent { color: var(--brand); } .check-grid { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .check-grid li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--brand-50); font-weight: 600; font-size: .92rem; color: var(--ink); } .check-grid .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--brand); color: #fff; flex: none; } .approach-card { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 24px; } .approach-card > .icon { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--brand); color: #fff; } .approach-card p { margin: 4px 0 0; font-size: .92rem; color: var(--muted); } .approach-card strong { color: var(--ink); } /* Vision 2030 band + counters */ .vision { position: relative; overflow: hidden; color: #fff; padding-top: var(--space-section); background: radial-gradient(1200px 500px at 85% 0%, #7d2f34 0%, transparent 60%), linear-gradient(135deg, #2a1215 0%, #4f1c20 55%, #66262a 100%); } .vision::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 45%; background: repeating-linear-gradient(135deg, transparent 0 26px, rgb(255 255 255 / .04) 26px 38px); pointer-events: none; } .vision-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .vision h2 { color: #fff; font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; } html[lang^="ar"] .vision h2 { font-weight: 700; letter-spacing: 0; line-height: 1.35; } .vision-copy p { color: rgb(255 255 255 / .82); } .eyebrow.on-dark { color: #fff; } .vision-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .vision-pillars li { padding: 20px; border-radius: var(--radius); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); display: flex; flex-direction: column; gap: 6px; transition: background .3s, transform .3s; } .vision-pillars li:hover { background: rgb(255 255 255 / .12); transform: translateY(-3px); } .vision-pillars .icon { width: 34px; height: 34px; color: var(--accent-on-dark); margin-bottom: 6px; } .vision-pillars strong { font-size: 1.02rem; } .vision-pillars span { font-size: .88rem; color: rgb(255 255 255 / .75); } .counters { position: relative; z-index: 1; list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 30px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgb(255 255 255 / .15); } .counters li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-inline: 12px; } .counters li + li { border-inline-start: 1px solid rgb(255 255 255 / .15); } .counters .icon { width: 28px; height: 28px; color: var(--accent-on-dark); } .counters strong { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; line-height: 1.1; } .counters span { font-size: .88rem; color: rgb(255 255 255 / .75); } /* Sectors */ .sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .sectors li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; font-weight: 600; color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s; } .sectors li:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .sectors .icon { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--brand-50); color: var(--brand); flex: none; } /* Two-column FAQ */ .faq-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .faq-media { position: sticky; top: calc(var(--header-h) + 24px); } .still-card { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 18px 20px; border-radius: var(--radius); background: linear-gradient(120deg, var(--brand-700), var(--brand)); color: #fff; } .still-card > .icon { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: rgb(255 255 255 / .15); flex: none; } .still-card div { flex: 1; display: flex; flex-direction: column; font-size: .9rem; color: rgb(255 255 255 / .85); } .still-card strong { color: #fff; font-size: 1rem; } .entry details { background: #fff; } @media (max-width: 1080px) { .about-grid, .vision-grid, .faq-grid { grid-template-columns: 1fr; } .fb-top { inset-inline-end: 12px; } .sectors { grid-template-columns: repeat(2, 1fr); } .counters { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } .counters li:nth-child(3) { border: 0; } .faq-media { position: relative; top: 0; } } @media (max-width: 700px) { .check-grid { grid-template-columns: 1fr; } .vision-pillars { grid-template-columns: 1fr; } .sectors { grid-template-columns: 1fr; } .still-card { flex-wrap: wrap; } .fb-bottom { inset-inline: 12px; max-width: none; } } /* ===================================================================== v3: centred hero, hover dropdown menus, categorised main services. ===================================================================== */ /* Centred hero */ .slide-inner { justify-content: center; text-align: center; } .slide-copy { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .slide .lead { margin-inline: auto; max-width: 640px; } .slide .btn-row { justify-content: center; } .trust-chips { justify-content: center; } .trust-chips li { text-align: start; } .slide::before, html[dir="rtl"] .slide::before { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgb(12 12 16 / .55) 0%, rgb(12 12 16 / 0) 75%), linear-gradient(180deg, rgb(12 12 16 / .7) 0%, rgb(12 12 16 / .35) 40%, rgb(12 12 16 / .1) 62%, rgb(12 12 16 / .6) 100%); } .slider-controls { justify-content: center; } /* Main services: category filters + image grid */ .main-services { padding-top: clamp(64px, 8vw, 104px); } .svc-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 34px; } .svc-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer; transition: all .2s ease; } .svc-filter .icon { width: 20px; height: 20px; color: var(--brand); } .svc-filter .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: .78rem; } .svc-filter:hover { border-color: var(--brand); } .svc-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 10px 24px rgb(102 38 42 / .25); } .svc-filter.is-active .icon { color: #fff; } .svc-filter.is-active .count { background: rgb(255 255 255 / .2); color: #fff; } .svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .svc-tile[hidden] { display: none; } .svc-tile a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .svc-tile a:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgb(20 20 30 / .12); border-color: var(--brand-100); } .svc-tile-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); } .svc-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .svc-tile a:hover .svc-tile-media img { transform: scale(1.06); } .svc-tile-icon { position: absolute; bottom: -1px; inset-inline-start: 16px; transform: translateY(50%); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--brand); color: #fff; box-shadow: 0 8px 18px rgb(102 38 42 / .35); border: 3px solid #fff; z-index: 1; } .svc-tile-media { overflow: visible; } .svc-tile-media img, .svc-tile-media .media-fallback { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .svc-tile-icon .icon { width: 24px; height: 24px; } .svc-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 34px 20px 22px; flex: 1; } .svc-tile-cat { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); } html[lang^="ar"] .svc-tile-cat { letter-spacing: 0; font-size: .82rem; } .svc-tile-body strong { font-size: 1.12rem; color: var(--ink); line-height: 1.3; } .svc-tile-text { font-size: .9rem; color: var(--muted); flex: 1; } .svc-tile-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--brand); margin-top: 8px; } .svc-tile-more .icon { width: 16px; height: 16px; transition: transform .2s; } .svc-tile a:hover .svc-tile-more .icon { transform: translateX(4px); } html[dir="rtl"] .svc-tile a:hover .svc-tile-more .icon { transform: translateX(-4px); } @media (prefers-reduced-motion: no-preference) { .svc-tile.is-entering { animation: paidar-rise .5s cubic-bezier(.2,.7,.2,1) both; } } .center-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; } /* Centre more section heads for a formal look */ .section-head.center { text-align: center; } .section-head.center .section-sub { margin-inline: auto; } @media (max-width: 1180px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } .svc-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; } .svc-filter { flex: none; } .slide-title { font-size: clamp(2rem, 8vw, 2.6rem); } } /* Centre an incomplete last row of service cards; centre the mega menu under the header */ .svc-grid { display: flex; flex-wrap: wrap; justify-content: center; } .svc-tile { flex: 0 1 calc((100% - 66px) / 4); } @media (max-width: 1180px) { .svc-tile { flex-basis: calc((100% - 44px) / 3); } } @media (max-width: 1080px) { .svc-tile { flex-basis: calc((100% - 22px) / 2); } } @media (max-width: 600px) { .svc-tile { flex-basis: 100%; } } /* Mobile menu covers the page under the header. */ @media (max-width: 1080px) { .site-nav { inset: 0; top: 0; z-index: -1; padding-top: calc(var(--header-h) + 56px); } } /* No live blur over the animated hero photo (expensive to repaint every frame). */ .eyebrow.pill, .trust-chips li { backdrop-filter: none; -webkit-backdrop-filter: none; } .eyebrow.pill { background: rgb(20 20 26 / .45); } .trust-chips li { background: rgb(20 20 26 / .5); } /* Highlights strip (replaces the service-name ticker) */ .highlights { margin-top: 38px; overflow: hidden; background: linear-gradient(90deg, var(--brand-700), var(--brand) 50%, var(--brand-700)); color: #fff; padding-block: 16px; position: relative; } .highlights::before, .highlights::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; } .highlights::before { left: 0; background: linear-gradient(90deg, var(--brand-700), transparent); } .highlights::after { right: 0; background: linear-gradient(270deg, var(--brand-700), transparent); } .highlights .ticker-track { gap: 0; } .hl-set { list-style: none; margin: 0; padding: 0; display: flex; flex: none; } .hl-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700; font-size: .98rem; letter-spacing: .01em; padding-inline: 26px; position: relative; } .hl-item .icon { width: 22px; height: 22px; color: var(--accent-on-dark); } .hl-item::after { content: ""; position: absolute; inset-inline-end: -4px; top: 50%; width: 7px; height: 7px; background: var(--accent-on-dark); transform: translateY(-50%) rotate(45deg); opacity: .7; } @media (prefers-reduced-motion: no-preference) { .highlights .ticker-track { animation: paidar-ticker 55s linear infinite; } html[dir="rtl"] .highlights .ticker-track { animation-name: paidar-ticker-rtl; } .highlights:hover .ticker-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .highlights .ticker-track { flex-wrap: wrap; justify-content: center; width: auto; } .highlights .hl-set { flex-wrap: wrap; justify-content: center; row-gap: 10px; } .highlights .hl-set[aria-hidden] { display: none; } .highlights::before, .highlights::after { display: none; } } @media (max-width: 700px) { .highlights { margin-top: 28px; padding-block: 12px; } .hl-item { font-size: .9rem; padding-inline: 20px; } } .btn-wa { background: #1f9d55; color: #fff; } .btn-wa:hover { background: #17834a; color: #fff; } .btn-wa .icon { width: 20px; height: 20px; } .btn-wa.btn-lg { min-height: 58px; font-size: 1.08rem; box-shadow: 0 12px 26px rgb(31 157 85 / .3); } /* ===================================================================== v4 consistency pass: centred inner-page headers, reading layout for legal pages, quote/contact side panel, contact cards. Rule: single-column blocks are centred; text beside an image is start-aligned; long reading text is start-aligned. ===================================================================== */ /* Legal pages: one centred reading column, no sales box */ .page-body.is-reading { grid-template-columns: minmax(0, 1fr); max-width: 860px; } /* Side panel on the quote and contact pages */ .next-steps { list-style: none; counter-reset: ns; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; } .next-steps li { counter-increment: ns; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; } .next-steps li::before { content: counter(ns); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: .9rem; } .next-steps strong { color: var(--ink); font-size: .96rem; } .next-steps span { color: var(--muted); font-size: .88rem; line-height: 1.45; } .aside-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); } .aside-note .icon { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; } /* Contact cards */ .contact-cards { list-style: none; margin: 0 0 32px; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .contact-card { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: 0 !important; } .contact-card > .icon { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--brand-50); color: var(--brand); flex: none; } .contact-card.is-primary { border-color: #b7e2c6; background: #f3fbf6; } .contact-card.is-primary > .icon { background: #1f9d55; color: #fff; } .contact-card span { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; word-break: break-word; } .contact-card strong { color: var(--ink); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; } html[lang^="ar"] .contact-card strong { text-transform: none; letter-spacing: 0; font-size: .95rem; } .contact-card a { text-decoration: none; font-weight: 600; } /* Closing call-to-action band: centred like other single-column blocks */ .cta-inner { flex-direction: column; text-align: center; justify-content: center; } .cta-inner .btn-row { justify-content: center; } .cta-band p { margin-inline: auto; max-width: 620px; } .cta-band::after { width: 30%; } /* In-content photos: wide photos span the column; tall photos sit beside the text on larger screens */ .entry figure.wp-block-image { margin: 1.4em 0; } .entry figure.wp-block-image img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); } .entry figure.wp-block-image:not(.is-portrait) img { aspect-ratio: 16 / 9; object-fit: cover; } .entry figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; text-align: center; } @media (min-width: 701px) { .entry figure.is-portrait { float: inline-end; width: 36%; max-width: 300px; margin: .3em 0 1em 28px; margin-inline: 28px 0; } .entry figure.is-portrait img { aspect-ratio: 3 / 4; object-fit: cover; } .entry h2 { clear: both; } } @media (max-width: 700px) { .entry figure.is-portrait img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; } } .entry::after { content: ""; display: block; clear: both; } /* "Places you'll visit" photo grid (WordPress gallery block) */ .entry .wp-block-gallery.photo-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 1.2em 0 2em; padding: 0; } /* Gallery tiles share the service-card frame: same radius, border, lift and shadow on hover. */ .entry .photo-grid figure.wp-block-image { position: relative; margin: 0 !important; width: auto !important; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-50); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; } .entry .photo-grid figure.wp-block-image:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px rgb(42 18 21 / .55); border-color: var(--brand-100); } .entry .photo-grid figure.wp-block-image img { width: 100% !important; height: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .entry .photo-grid figure.wp-block-image:hover img { transform: scale(1.05); } .entry .photo-grid figcaption { position: absolute !important; inset: auto 0 0 0; margin: 0 !important; padding: 40px 16px 14px !important; background: linear-gradient(180deg, transparent, rgb(14 10 12 / .85)) !important; color: #fff !important; font-size: .95rem !important; font-weight: 750; line-height: 1.3; text-align: start !important; } @media (max-width: 700px) { .entry .wp-block-gallery.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .entry .photo-grid figcaption { font-size: .82rem !important; padding: 30px 12px 10px !important; } } .entry .wp-block-gallery.photo-grid.columns-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .entry .wp-block-gallery.photo-grid.columns-4 { grid-template-columns: repeat(2, 1fr); } } /* Pages built with Elementor: full width between header and footer */ .elementor-page-wrap { width: 100%; } .elementor-page-wrap .elementor-widget-text-editor p:last-child { margin-bottom: 0; } html[lang^="ar"] .elementor-page-wrap { font-family: var(--font-ar); } /* Ziyarah place cards: built like the homepage service cards (.svc-card). Same frame, 16:10 photo, number in the white badge where service cards show their icon, licence credit overlaid on the photo. */ .entry .place-grid { margin: 24px 0 32px; } /* Classic themes wrap group children in an inner container, so the grid goes on that wrapper. */ .entry .place-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; counter-reset: place; } .entry .place-card > .wp-block-group__inner-container { display: contents; } .entry .place-card { counter-increment: place; container-type: inline-size; position: relative; display: flex; flex-direction: column; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; } .entry .place-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px rgb(42 18 21 / .55); border-color: var(--brand-100); } .entry .place-card::before { content: counter(place); position: absolute; z-index: 2; inset-inline-start: 16px; top: calc(62.5cqw - 60px); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--brand); font-weight: 800; font-size: 1rem; box-shadow: 0 6px 16px rgb(0 0 0 / .18); } .entry .place-card figure.wp-block-image { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-50); border-radius: 0; } .entry .place-card figure.wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .entry .place-card:hover figure.wp-block-image img { transform: scale(1.05); } .entry .place-card figure.wp-block-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(14 10 12 / .35)); pointer-events: none; } .entry .place-card figcaption { position: absolute; z-index: 2; top: 0; inset-inline-end: 0; max-width: 100%; margin: 0; padding: 2px 8px; font-size: .66rem; line-height: 1.5; color: #fff; background: rgb(15 15 20 / .55); border-end-start-radius: 6px; text-align: start; } .entry .place-card figcaption a { color: inherit; } .entry .place-card h3 { margin: 24px 22px 6px; font-size: 1.12rem; font-weight: 750; line-height: 1.3; color: var(--ink); } .entry .place-card p { margin: 0 22px 22px; font-size: .93rem; line-height: 1.55; color: var(--muted); } html[lang^="ar"] .entry .place-card figcaption { direction: rtl; } @media (max-width: 560px) { .entry .place-grid > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; gap: 12px; } .entry .place-card::before { inset-inline-start: 10px; top: calc(62.5cqw - 44px); width: 34px; height: 34px; border-radius: 10px; font-size: .85rem; } .entry .place-card h3 { margin: 18px 12px 4px; font-size: .95rem; } .entry .place-card p { margin: 0 12px 14px; font-size: .84rem; } .entry .place-card figcaption { font-size: .6rem; padding: 2px 6px; } } @media (max-width: 380px) { .entry .place-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; } } /* ===================================================================== v5 refinement pass (self-review): calmer services grid, cleaner "Why PAIDAR" band, tighter rhythm, no empty gaps. ===================================================================== */ /* Services: eight key services first, the rest behind "Show all" */ .js .svc-grid.is-collapsed > .svc-tile:not([data-featured]) { display: none; } .svc-more { display: flex; justify-content: center; margin-top: 28px; } .svc-more[hidden], .no-js .svc-more { display: none; } html:not(.js) .svc-more { display: none; } .svc-more .btn .icon { width: 18px; height: 18px; } .main-services .center-actions { margin-top: 20px; } .main-services .section-sub { max-width: 560px; margin-inline: auto; } .svc-tile strong { margin-top: 2px; } /* Why PAIDAR: photo as a framed panel inside the grid, copy beside it, B2B card underneath */ .why { background: var(--bg-soft); } .why::before { display: none; } .why-inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto auto; column-gap: clamp(32px, 5vw, 72px); row-gap: 24px; align-items: center; padding-block: var(--space-section); padding-inline: var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; } .why-media { position: relative; inset: auto; width: auto; height: 100%; min-height: 460px; grid-row: 1 / span 2; clip-path: none !important; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 48px -24px rgb(42 18 21 / .45); background: linear-gradient(150deg, #3a1a1d, #66262a); } html[dir="rtl"] .why-media { clip-path: none !important; } .why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.02); } .why-media::after, .why-media.has-img::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(42 18 21 / 0) 35%, rgb(42 18 21 / .78) 100%), linear-gradient(0deg, rgb(102 38 42 / .18), rgb(102 38 42 / .18)); } .why-media-tag { position: absolute; z-index: 2; inset-inline-start: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgb(255 255 255 / .94); color: var(--ink); font-weight: 700; font-size: .88rem; } .why-media-tag .icon { width: 16px; height: 16px; color: var(--brand); } .why-copy { align-self: end; } .why .features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .corp-card { align-self: start; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 16px; padding: 20px 22px; border-color: var(--brand-100); background: #fff; } .corp-card > .icon { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 10px; margin: 0; border-radius: 12px; background: var(--brand-50); } .corp-card h3 { margin: 0; font-size: 1.05rem; } .corp-card p { grid-column: 2; margin: 2px 0 0; font-size: .88rem; } .corp-card .btn { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; } @media (max-width: 1080px) { .why-inner { grid-template-columns: 1fr; padding-inline: var(--gutter); } .why-media { grid-row: auto; min-height: 260px; height: 260px; } } @media (max-width: 640px) { .why .features { grid-template-columns: 1fr; } .corp-card { grid-template-columns: auto 1fr; } .corp-card .btn { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 14px; } } /* Balanced line breaks: no single orphan word under headings and intros */ .section-sub, .section-head h2, .cta-band p { text-wrap: balance; } /* Hero finder: keep the label on one line on desktop */ .finder-title { max-width: none; white-space: nowrap; } @media (max-width: 1200px) { .finder-title { white-space: normal; max-width: 110px; } } /* ===================================================================== v6 creative-direction pass: start-aligned editorial hero, grouped service tabs with larger cards. ===================================================================== */ /* ---- Hero ---- */ .hero-slider { height: clamp(600px, 88vh, 860px); } .slide-inner { justify-content: flex-start; align-items: center; text-align: start; padding-top: 0; padding-bottom: 150px; } .slide-copy { max-width: 700px; margin-inline: 0; align-items: flex-start; } .slide::before { background: linear-gradient(90deg, rgb(14 10 12 / .88) 0%, rgb(14 10 12 / .66) 34%, rgb(14 10 12 / .18) 64%, rgb(14 10 12 / .05) 100%), linear-gradient(180deg, rgb(14 10 12 / .45) 0%, rgb(14 10 12 / 0) 26%, rgb(14 10 12 / 0) 70%, rgb(14 10 12 / .55) 100%); } html[dir="rtl"] .slide::before { background: linear-gradient(270deg, rgb(14 10 12 / .88) 0%, rgb(14 10 12 / .66) 34%, rgb(14 10 12 / .18) 64%, rgb(14 10 12 / .05) 100%), linear-gradient(180deg, rgb(14 10 12 / .45) 0%, rgb(14 10 12 / 0) 26%, rgb(14 10 12 / 0) 70%, rgb(14 10 12 / .55) 100%); } .slide .eyebrow.pill { margin-bottom: 18px; } .slide-title { font-size: clamp(2.4rem, 1.2rem + 3.9vw, 4.6rem); line-height: 1.02; letter-spacing: -.034em; margin-bottom: .32em; text-shadow: none; } .slide-title span { display: block; color: #e9b8bb; } .slide .lead { max-width: 540px; font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.6; color: rgb(255 255 255 / .86); text-shadow: none; } .slide .btn-row { justify-content: flex-start; gap: 12px; } .slide .btn-lg { padding: 15px 26px; } .slide .btn-ghost { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .55); } .slide .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; } .hero-lines { list-style: none; margin: 30px 0 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 26px; border-top: 1px solid rgb(255 255 255 / .18); } .hero-lines a { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .9; transition: opacity .2s; } .hero-lines a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; } .hero-lines .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: rgb(255 255 255 / .12); color: #fff; } .slider-controls { justify-content: flex-start; bottom: 104px; } @media (max-width: 900px) { .slide-inner { align-items: flex-end; padding-bottom: 120px; } .slide::before, html[dir="rtl"] .slide::before { background: linear-gradient(180deg, rgb(14 10 12 / .35) 0%, rgb(14 10 12 / .45) 35%, rgb(14 10 12 / .86) 75%, rgb(14 10 12 / .92) 100%); } .hero-lines { gap: 10px 18px; } .hero-lines a { font-size: .86rem; } } @media (max-width: 560px) { .hero-lines { display: none; } .slider-controls { bottom: 70px; } } /* ---- Services: grouped tabs ---- */ .svc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 34px; } .svc-tab { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-align: start; cursor: pointer; font: inherit; transition: border-color .2s, box-shadow .2s, background .2s, color .2s; position: relative; } .svc-tab:hover { border-color: var(--brand-100); box-shadow: 0 8px 22px -14px rgb(42 18 21 / .5); } .svc-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .svc-tab-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); transition: background .2s, color .2s; } .svc-tab-icon .icon { width: 22px; height: 22px; } .svc-tab-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .svc-tab-text strong { font-size: .98rem; line-height: 1.25; } .svc-tab-text small { font-size: .8rem; color: var(--muted); } .svc-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 14px 30px -16px rgb(102 38 42 / .8); } .svc-tab.is-active .svc-tab-icon { background: rgb(255 255 255 / .16); color: #fff; } .svc-tab.is-active small { color: rgb(255 255 255 / .78); } .svc-tab.is-active::after { content: ""; position: absolute; inset-inline-start: 34px; bottom: -8px; width: 16px; height: 16px; background: var(--brand); transform: rotate(45deg); border-radius: 3px; } .js .svc-panel:not(.is-active) { display: none; } .svc-panel + .svc-panel { margin-top: 48px; } .js .svc-panel + .svc-panel { margin-top: 0; } .svc-panel.is-entering .svc-card { animation: paidar-rise .55s cubic-bezier(.2,.7,.2,1) both; } .svc-panel.is-entering .svc-card:nth-child(2) { animation-delay: .05s; } .svc-panel.is-entering .svc-card:nth-child(3) { animation-delay: .1s; } .svc-panel.is-entering .svc-card:nth-child(4) { animation-delay: .15s; } .svc-panel.is-entering .svc-card:nth-child(5) { animation-delay: .2s; } .svc-panel.is-entering .svc-card:nth-child(6) { animation-delay: .25s; } @media (prefers-reduced-motion: reduce) { .svc-panel.is-entering .svc-card { animation: none; } } .svc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .svc-panel-head h3 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; } .svc-panel-head p { margin: 0; max-width: 620px; color: var(--muted); font-size: .98rem; } .js .svc-panel-head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* With JS the group name is in the tab above, so its intro line sits centred under the tabs like the section heading. */ .js .svc-panel-head { justify-content: center; align-items: center; text-align: center; margin-bottom: 26px; } .js .svc-panel-head p { margin-inline: auto; max-width: 640px; text-wrap: balance; } .svc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .svc-card { margin: 0; } .svc-card a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; } .svc-card a:hover, .svc-card a:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 46px -28px rgb(42 18 21 / .55); border-color: var(--brand-100); } .svc-card a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .svc-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-50); } .svc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .svc-card a:hover .svc-card-media img { transform: scale(1.05); } .svc-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(14 10 12 / .35)); } .svc-card-icon { position: absolute; z-index: 1; inset-inline-start: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: 0 6px 16px rgb(0 0 0 / .18); } .svc-card-icon .icon { width: 22px; height: 22px; } .svc-card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1 0 auto; } .svc-card-body strong { font-size: 1.14rem; line-height: 1.3; color: var(--ink); font-weight: 750; } .svc-card-text { color: var(--muted); font-size: .93rem; line-height: 1.55; } .svc-card-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 700; font-size: .92rem; } .svc-card-more .icon { width: 16px; height: 16px; transition: transform .25s; } .svc-card a:hover .svc-card-more .icon { transform: translateX(4px); } html[dir="rtl"] .svc-card a:hover .svc-card-more .icon { transform: translateX(-4px); } .main-services .center-actions { margin-top: 36px; } @media (max-width: 1080px) { .svc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-tab.is-active::after { display: none; } .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-panel-head { flex-direction: column; gap: 6px; } } @media (max-width: 640px) { .svc-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scrollbar-width: none; } .svc-tabs::-webkit-scrollbar { display: none; } .svc-tab { flex: 0 0 auto; scroll-snap-align: start; padding: 12px 14px; } .svc-tab-icon { width: 38px; height: 38px; } .svc-cards { grid-template-columns: 1fr; gap: 16px; } } .slide .lead { margin-inline: 0; } /* ===================================================================== v7: process flow, FAQ accordion + contact panel, vehicle cards, Vision note. ===================================================================== */ /* ---- Four steps as a connected flow ---- */ .steps-flow { position: relative; gap: 24px; } .steps-flow::before { content: ""; position: absolute; top: 34px; inset-inline: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, var(--brand-100) 0 10px, transparent 10px 18px); z-index: 0; } .steps-flow li { position: relative; z-index: 1; text-align: center; padding: 0 10px; background: transparent; border: 0; } .steps-flow li::before { display: none; } .step-icon { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 20px; background: #fff; color: var(--brand); border: 1px solid var(--brand-100); box-shadow: 0 12px 24px -16px rgb(42 18 21 / .5); transition: background .3s, color .3s, transform .3s; } .step-icon .icon { width: 28px; height: 28px; } .step-num { position: absolute; top: -9px; inset-inline-end: -9px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 800; border: 3px solid var(--bg-soft); } .steps-flow li:hover .step-icon { background: var(--brand); color: #fff; transform: translateY(-3px); } .steps-flow h3 { font-size: 1.12rem; margin-bottom: 6px; } .steps-flow p { max-width: 250px; margin-inline: auto; } @media (max-width: 1080px) { .steps-flow::before { display: none; } .steps-flow { row-gap: 36px; } } @media (max-width: 640px) { .steps-flow li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: start; padding: 0; } .steps-flow .step-icon { grid-row: span 2; width: 56px; height: 56px; margin: 0; border-radius: 16px; } .steps-flow p { margin-inline: 0; max-width: none; } } /* ---- FAQ: calmer accordion ---- */ .faq-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } .entry .wp-block-details, .entry details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0; margin: 0 0 12px; transition: border-color .2s, box-shadow .2s; } .entry details[open] { border-color: var(--brand-100); box-shadow: 0 16px 34px -26px rgb(42 18 21 / .6); } .entry summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 1rem; color: var(--ink); } .entry summary::-webkit-details-marker { display: none; } .entry summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366262a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s, background-color .25s; } .entry details[open] summary::after { transform: rotate(45deg); background-color: var(--brand-100); } .entry summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 12px; } .entry details > :not(summary) { padding: 0 20px 18px; margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.7; } /* ---- FAQ contact panel ---- */ .faq-aside { position: sticky; top: 110px; color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px); background: radial-gradient(500px 260px at 100% 0%, rgb(255 255 255 / .12), transparent 60%), linear-gradient(150deg, #4f1c20 0%, #66262a 55%, #7a3035 100%); box-shadow: 0 30px 60px -36px rgb(42 18 21 / .8); overflow: hidden; } .faq-aside::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgb(255 255 255 / .05); } .faq-aside-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgb(255 255 255 / .14); margin-bottom: 16px; } .faq-aside-icon .icon { width: 26px; height: 26px; } .faq-aside h3 { color: #fff; font-size: 1.4rem; margin: 0 0 8px; } .faq-aside p { color: rgb(255 255 255 / .82); margin: 0 0 18px; } .faq-aside-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; } .faq-aside-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; } .faq-aside-list .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgb(255 255 255 / .16); } .faq-aside-actions { position: relative; z-index: 1; display: grid; gap: 10px; } .faq-aside-actions .btn .icon { width: 18px; height: 18px; } @media (max-width: 1080px) { .faq-aside { position: relative; top: auto; } } /* ---- Vehicle cards: label on the photo, cleaner body ---- */ .fleet-card { border-color: var(--line); box-shadow: 0 1px 2px rgb(15 15 20 / .04); } .fleet-card:hover { box-shadow: 0 26px 46px -28px rgb(42 18 21 / .5); } .fleet-media { position: relative; aspect-ratio: 4 / 3; } .fleet-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(14 10 12 / .28)); pointer-events: none; } .fleet-body { padding: 18px 22px 22px; } .fleet-tag { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: var(--brand-50); font-size: .72rem; } html[lang^="ar"] .fleet-tag { font-size: .82rem; } .fleet-body strong { font-size: 1.22rem; margin-top: 4px; } .fleet-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; color: var(--muted); font-size: .92rem; } /* ---- Vision note and steps on tinted background ---- */ .vision-note { font-size: .82rem; color: rgb(255 255 255 / .62); border-inline-start: 2px solid rgb(255 255 255 / .25); padding-inline-start: 12px; margin-top: -4px; } /* ---- Final CTA ---- */ .cta-band .btn .icon { width: 18px; height: 18px; } .cta-band p { max-width: 640px; } /* ---- v8 footer: brand / company / contact, then every service by group ---- */ .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); padding-bottom: 36px; border-bottom: 1px solid rgb(255 255 255 / .1); } .footer-brand p { max-width: 340px; } .footer-services { padding-block: 36px 8px; } .footer-svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .footer-sub { color: rgb(255 255 255 / .55); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; } html[lang^="ar"] .footer-sub { letter-spacing: 0; text-transform: none; font-size: .85rem; } .footer-links a { color: rgb(255 255 255 / .78); text-decoration: none; transition: color .2s; } .footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .footer-contact-note { color: rgb(255 255 255 / .7); margin-bottom: 12px; max-width: 260px; } .footer-contact .btn .icon { width: 16px; height: 16px; } @media (max-width: 1080px) { .footer-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer-svc-grid, .footer-grid { grid-template-columns: 1fr; } } /* ===================================================================== v9: highlights marquee, lighter and calmer. Slim chips on a soft band, faded edges, slower movement, a real pause control. ===================================================================== */ .highlights { position: relative; display: flex; align-items: center; margin-top: 40px; padding-block: 14px; background: #fff; color: var(--ink); border-block: 1px solid var(--line); overflow: hidden; } .highlights::before, .highlights::after { display: none; } .hl-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .highlights .ticker-track { gap: 0; } .hl-set { gap: 12px; padding-inline-end: 12px; } .hl-item { gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-weight: 600; font-size: .92rem; letter-spacing: 0; color: var(--ink-2); } html[dir="rtl"] .hl-item { padding: 7px 8px 7px 16px; } .hl-item::after { display: none; } .hl-item .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--brand); color: #fff; flex: none; } .hl-toggle { flex: none; position: relative; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin-inline: 10px 16px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; } .hl-toggle:hover { border-color: var(--brand); } .hl-toggle:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .hl-toggle .i-pause { width: 10px; height: 12px; border-inline: 3px solid var(--ink); } .highlights.is-paused .hl-toggle .i-pause { width: 0; height: 0; border: 0; border-block: 6px solid transparent; border-inline-start: 10px solid var(--ink); margin-inline-start: 3px; } html[dir="rtl"] .highlights.is-paused .hl-toggle .i-pause { transform: scaleX(-1); } @media (prefers-reduced-motion: no-preference) { .highlights .ticker-track { animation: paidar-ticker 75s linear infinite; } html[dir="rtl"] .highlights .ticker-track { animation-name: paidar-ticker-rtl; } .highlights:hover .ticker-track, .highlights:focus-within .ticker-track, .highlights.is-paused .ticker-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .hl-toggle { display: none; } .hl-viewport { -webkit-mask-image: none; mask-image: none; } .highlights .hl-set { row-gap: 10px; justify-content: center; padding-inline: 16px; } } @media (max-width: 700px) { .highlights { margin-top: 28px; padding-block: 10px; } .hl-item { font-size: .84rem; padding-block: 5px; } .hl-item .icon { width: 24px; height: 24px; padding: 5px; } .hl-toggle { width: 32px; height: 32px; margin-inline: 6px 12px; } } /* Licence credit for Wikimedia Commons photos on page headers and service cards. */ .photo-credit.hero-credit { position: absolute; inset-inline-end: 14px; bottom: 10px; z-index: 1; font-size: .72rem; color: rgb(255 255 255 / .78); } .photo-credit.hero-credit a { color: inherit; } .photo-credit.card-credit { position: absolute; inset-inline-end: 0; bottom: 0; z-index: 1; max-width: 100%; padding: 2px 8px; font-size: .66rem; line-height: 1.5; color: #fff; background: rgb(15 15 20 / .55); border-start-start-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================================================================== v11: inner pages in the homepage style. One hero for every page type (start-aligned like the homepage slider), editorial body text, branded lists, homepage accordions, burgundy side panel, photo-card hubs, card-style form, search and 404. ===================================================================== */ /* ---- Page hero ---- */ .page-hero { display: flex; align-items: center; padding-block: clamp(52px, 6.5vw, 96px); } .page-hero.has-photo { min-height: clamp(400px, 54vh, 540px); } .page-hero .hero-bg { object-position: center 55%; } .page-hero.has-photo::before { background: linear-gradient(90deg, rgb(14 10 12 / .9) 0%, rgb(14 10 12 / .72) 38%, rgb(14 10 12 / .3) 72%, rgb(14 10 12 / .12) 100%), linear-gradient(180deg, rgb(14 10 12 / .35) 0%, rgb(14 10 12 / 0) 30%, rgb(14 10 12 / 0) 70%, rgb(14 10 12 / .45) 100%); } html[dir="rtl"] .page-hero.has-photo::before { background: linear-gradient(270deg, rgb(14 10 12 / .9) 0%, rgb(14 10 12 / .72) 38%, rgb(14 10 12 / .3) 72%, rgb(14 10 12 / .12) 100%), linear-gradient(180deg, rgb(14 10 12 / .35) 0%, rgb(14 10 12 / 0) 30%, rgb(14 10 12 / 0) 70%, rgb(14 10 12 / .45) 100%); } .page-hero-inner { display: flex; flex-direction: column; align-items: flex-start; text-align: start; } .page-hero .eyebrow.pill { color: #fff; margin-bottom: 18px; } .eyebrow.pill.has-icon::before { display: none; } .eyebrow.pill .icon { width: 18px; height: 18px; color: var(--accent-on-dark); } .page-hero h1 { max-width: 820px; margin: 0 0 .32em; color: #fff; font-size: clamp(2.05rem, 1.2rem + 2.9vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; } html[lang^="ar"] .page-hero h1 { font-weight: 700; letter-spacing: 0; line-height: 1.3; } .page-hero .lead { max-width: 600px; margin: 0 0 1.6em; color: rgb(255 255 255 / .86); font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.6; text-wrap: pretty; } .page-hero .lead:last-child { margin-bottom: 0; } .page-hero .btn-row { gap: 12px; } .page-hero .btn-ghost { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .55); } .page-hero .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; } .page-hero .btn .icon { width: 18px; height: 18px; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0; margin: 0 0 22px; font-size: .85rem; } .breadcrumbs li { color: rgb(255 255 255 / .7); } .breadcrumbs li + li::before { content: "\203A"; margin-inline-end: 8px; opacity: .55; } html[dir="rtl"] .breadcrumbs li + li::before { content: "\2039"; } .breadcrumbs a { color: rgb(255 255 255 / .92); text-decoration: none; } .breadcrumbs a:hover { color: #fff; text-decoration: underline; } /* ---- Body ---- */ .page-body { padding-block: clamp(48px, 6vw, 88px); } .page-body.is-reading, .page-body.is-hub { grid-template-columns: minmax(0, 1fr); } .page-body.is-reading { max-width: 860px; } .entry { font-size: 1.02rem; color: var(--ink-2); } .entry p { line-height: 1.75; } .entry h2 { margin: 1.9em 0 .7em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); line-height: 1.2; } html[lang^="ar"] .entry h2 { line-height: 1.45; } .entry > h2:first-child { margin-top: 0; } .entry h3 { margin: 1.5em 0 .5em; font-size: 1.15rem; font-weight: 700; } .entry a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 3px; } .entry a:not(.btn):hover { text-decoration-thickness: 2px; } /* Lists: brand check circles and numbered circles, as on the homepage */ .entry ul.wp-block-list, .entry > ul:not([class]), .entry details ul { list-style: none; padding: 0; margin: 0 0 1.3em; } .entry ul.wp-block-list > li, .entry > ul:not([class]) > li, .entry details ul > li { position: relative; padding-inline-start: 34px; margin-bottom: .55em; } .entry ul.wp-block-list > li::before, .entry > ul:not([class]) > li::before, .entry details ul > li::before { content: ""; position: absolute; inset-inline-start: 0; top: .32em; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366262a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; } .entry ol.wp-block-list, .entry > ol:not([class]) { list-style: none; counter-reset: li; padding: 0; margin: 0 0 1.3em; } .entry ol.wp-block-list > li, .entry > ol:not([class]) > li { counter-increment: li; position: relative; padding-inline-start: 40px; margin-bottom: .7em; min-height: 28px; } .entry ol.wp-block-list > li::before, .entry > ol:not([class]) > li::before { content: counter(li); position: absolute; inset-inline-start: 0; top: .12em; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 800; line-height: 1; } .entry table { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); border-collapse: separate; border-spacing: 0; } .entry th, .entry td { border: 0; border-bottom: 1px solid var(--line); } .entry th { background: var(--brand-50); } .entry tr:last-child td { border-bottom: 0; } .entry .note, .entry .wp-block-group.note { border-radius: var(--radius); padding: 16px 20px; } /* Accordions use the homepage FAQ style everywhere (see "FAQ: calmer accordion" above) */ .page-body .entry details:hover { border-color: var(--brand-100); } .entry details ul { margin-top: .4em; } /* ---- Side panel ---- */ .page-aside { gap: 16px; } .aside-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; background: #fff; box-shadow: 0 1px 2px rgb(15 15 20 / .04); } .aside-card h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: .6em; } .aside-cta { position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0; padding: 28px 26px; background: radial-gradient(420px 220px at 100% 0%, rgb(255 255 255 / .12), transparent 60%), linear-gradient(150deg, #4f1c20 0%, #66262a 55%, #7a3035 100%); box-shadow: 0 30px 60px -36px rgb(42 18 21 / .8); } .aside-cta::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 26px solid rgb(255 255 255 / .05); } .aside-cta-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgb(255 255 255 / .14); margin-bottom: 14px; } .aside-cta-icon .icon { width: 24px; height: 24px; } .aside-cta h2 { color: #fff; font-size: 1.3rem; } .aside-cta p { color: rgb(255 255 255 / .82); font-size: .93rem; margin-bottom: 14px; } .aside-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; } .aside-checks li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; line-height: 1.35; } .aside-checks .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgb(255 255 255 / .16); } .aside-cta .btn .icon { width: 18px; height: 18px; } .aside-steps { border-color: var(--brand-100); position: relative; overflow: hidden; } .aside-steps::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--brand-700), var(--brand), var(--brand-700)); } .related { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .related li > a, .related li > span { display: flex; align-items: center; gap: 12px; margin-inline: -10px; padding: 9px 10px; border-radius: 12px; color: var(--ink-2); font-size: .92rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background .18s, color .18s; } .related-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand); transition: background .18s, color .18s; } .related-icon .icon { width: 20px; height: 20px; } .related-name { flex: 1 1 auto; min-width: 0; } .related .icon-arrow { flex: none; width: 15px; height: 15px; color: var(--brand); opacity: 0; transform: translateX(-6px); transition: opacity .18s, transform .18s; } html[dir="rtl"] .related .icon-arrow { transform: translateX(6px); } .related li > a:hover, .related li > a:focus-visible { background: var(--brand-50); color: var(--brand); } .related li > a:hover .related-icon { background: var(--brand); color: #fff; } .related li > a:hover .icon-arrow, .related li > a:focus-visible .icon-arrow { opacity: 1; transform: none; } .related .is-all { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); } /* ---- Services hub and category hubs: the homepage photo cards ---- */ .is-hub .entry { max-width: 760px; } .hub-groups { display: grid; gap: clamp(44px, 5vw, 64px); } .hub-group { scroll-margin-top: calc(var(--header-h) + 24px); } .hub-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .hub-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--brand); color: #fff; box-shadow: 0 12px 24px -14px rgb(102 38 42 / .7); } .hub-icon .icon { width: 26px; height: 26px; } .hub-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; } html[lang^="ar"] .hub-head h2 { font-weight: 700; letter-spacing: 0; } .hub-head small { display: inline-grid; place-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: .78rem; font-weight: 700; letter-spacing: 0; } .hub-head p { margin: 4px 0 0; color: var(--muted); font-size: .96rem; } .contact-card { border-radius: var(--radius-lg); padding: 20px; } /* ---- Search box, search results, 404 ---- */ .site-search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 620px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -26px rgb(20 20 30 / .35); } .site-search .input-icon { flex: 1 1 auto; min-width: 0; } .site-search input { min-height: 46px; border: 0; border-radius: 999px; background: transparent; } .site-search input:focus { outline: 0; box-shadow: none; } .site-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgb(102 38 42 / .14); } .site-search .btn { flex: none; } .site-search.on-dark { margin-top: 28px; border-color: transparent; } .site-search.is-center { margin: 0 auto 32px; } .group-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .group-links .svc-tab { height: 100%; text-decoration: none; } .group-links .svc-tab:hover { color: var(--brand); } .find-service { background: var(--bg-soft); } .result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .result-list a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; color: var(--ink-2); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; } .result-list a:hover { border-color: var(--brand-100); box-shadow: 0 20px 40px -30px rgb(42 18 21 / .55); transform: translateY(-2px); } .search-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .search-text strong { color: var(--ink); font-size: 1.05rem; line-height: 1.35; } .search-text span { color: var(--muted); font-size: .92rem; } .result-list .icon-arrow { flex: none; width: 18px; height: 18px; color: var(--brand); } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 600; text-decoration: none; } .pagination a.page-numbers:hover { border-color: var(--brand); color: var(--brand); } .pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; } .pagination .dots { border: 0; background: none; } /* ---- Responsive ---- */ @media (max-width: 1080px) { .group-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-aside { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } } @media (max-width: 900px) { .page-hero.has-photo { min-height: 0; padding-top: clamp(140px, 30vw, 220px); } .page-hero.has-photo::before, html[dir="rtl"] .page-hero.has-photo::before { background: linear-gradient(180deg, rgb(14 10 12 / .35) 0%, rgb(14 10 12 / .55) 30%, rgb(14 10 12 / .86) 62%, rgb(14 10 12 / .92) 100%); } } @media (max-width: 700px) { .page-hero { padding-block: 44px 48px; } .page-hero.has-photo { padding-top: 150px; } .page-hero .btn-row { width: 100%; } .page-hero .btn-row .btn { flex: 1 1 100%; } .breadcrumbs ol { margin-bottom: 16px; font-size: .8rem; } .hub-head { align-items: flex-start; } .hub-icon { width: 46px; height: 46px; } .site-search { border-radius: var(--radius-lg); flex-wrap: wrap; padding: 8px; } .site-search .btn { width: 100%; } .result-list a { padding: 16px; } .photo-credit.hero-credit { inset-inline-start: 12px; text-align: end; } } @media (max-width: 600px) { .group-links { grid-template-columns: 1fr; } } /* ===================================================================== v12: header navigation system (replaces the v3, v8 and v10 menu layers). - One open state: JS puts .is-open on the
  • (hover with a short grace period, click, tap, keyboard). CSS no longer opens panels on :hover/:focus-within, so two panels can never show at once. - Panels are always fully opaque. Opening only slides 6px; closing is instant. Nothing behind a panel can show through, even mid-switch. - One token set for the mega menu and the two small dropdowns. States: hover = burgundy text, open = soft burgundy pill + turned chevron, current page = underline, keyboard focus = outline ring. ===================================================================== */ :root { --dd-radius: 16px; --dd-shadow: 0 28px 60px -28px rgb(20 10 12 / .4), 0 2px 8px rgb(20 10 12 / .06); --dd-ease: cubic-bezier(.2, .7, .2, 1); --dd-bar: linear-gradient(90deg, var(--brand-700), var(--brand), var(--brand-700)); } /* ---- Header bar ---- */ .header-inner { gap: 28px; } .nav-list { gap: 2px; } .nav-list > li { position: relative; } .nav-list > li > a, .nav-dd { min-height: 42px; padding: 0 14px; border-radius: 999px; font-size: .93rem; font-weight: 600; color: var(--ink-2); transition: color .15s, background-color .15s; } .nav-dd { gap: 6px; } .nav-dd .icon { width: 15px; height: 15px; transition: transform .2s var(--dd-ease); } .nav-list > li > a:hover, .nav-dd:hover { color: var(--brand); } .nav-list > li > a[aria-current="page"], .has-dd.is-current > .nav-dd { color: var(--ink); } .nav-list > li > a[aria-current="page"]::after, .has-dd.is-current > .nav-dd::after { content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand); } .has-dd.is-current > .nav-dd::after { inset-inline-end: 35px; } .has-dd.is-open > .nav-dd { color: var(--brand); background: var(--brand-50); } .has-dd.is-open > .nav-dd .icon { transform: rotate(180deg); } .nav-list > li > a:focus-visible, .nav-dd:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .nav-actions { gap: 10px; } .lang-switch { min-height: 42px; padding: 0 14px; border-radius: 999px; transition: background-color .15s, color .15s; } .lang-switch:hover { background: var(--bg-soft); color: var(--brand); } .lang-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .nav-cta { min-height: 44px; padding: 0 20px; box-shadow: 0 10px 22px -12px rgb(102 38 42 / .7); } /* ---- Shared panel ---- */ .dd-panel { background: #fff; } @media (min-width: 1081px) { .header-inner { position: relative; } .has-dd.has-mega { position: static; } /* the mega menu is placed against the header, not its trigger */ .site-nav .dd-panel { display: block; position: absolute; z-index: 1; top: calc(100% + 10px); inset-inline-start: 50%; translate: -50% 0; visibility: hidden; pointer-events: none; transform: translateY(6px); border: 1px solid var(--line); border-radius: var(--dd-radius); box-shadow: var(--dd-shadow); overflow: hidden; } html[dir="rtl"] .site-nav .dd-panel { translate: 50% 0; } .site-nav .dd-panel::before { content: ""; display: block; height: 3px; background: var(--dd-bar); } .site-nav .has-dd.is-open > .dd-panel { visibility: visible; pointer-events: auto; transform: none; transition: transform .18s var(--dd-ease); } /* Without JavaScript the menus still open on hover and keyboard focus. */ html:not(.js) .site-nav .has-dd:hover > .dd-panel, html:not(.js) .site-nav .has-dd:focus-within > .dd-panel { visibility: visible; pointer-events: auto; transform: none; } /* Hover bridge: the gap between a trigger and its panel still counts as hovering the menu. */ .has-dd.is-open > .nav-dd::before { content: ""; position: absolute; inset-inline: -10px; top: 100%; height: 30px; } .site-nav .mega { top: calc(100% - 6px); width: min(1180px, calc(100vw - 32px)); } .dd-pilgrim { width: 384px; } .dd-compact { width: 268px; } } /* ---- Services mega menu ---- */ .mega-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, .9fr) minmax(0, 1.04fr); grid-template-rows: auto 1fr; padding: 24px 12px 20px; } .mega-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding-inline: 20px; min-width: 0; } .mega-col + .mega-col { border-inline-start: 1px solid var(--line); } .mega-title { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .95rem; font-weight: 800; line-height: 1.3; } .mega-title-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand); transition: background-color .15s, color .15s; } .mega-title-icon .icon { width: 20px; height: 20px; } .mega-col.has-current .mega-title-icon { background: var(--brand); color: #fff; } .mega-title-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; } .mega-title-text small { font-size: .76rem; font-weight: 500; line-height: 1.35; color: var(--muted); } .mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mega-col li a { display: flex; align-items: flex-start; gap: 10px; margin-inline: -10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-size: .9rem; font-weight: 500; line-height: 1.35; text-decoration: none; transition: background-color .15s, color .15s; } .mega-col li a > .icon:first-child { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); transition: color .15s; } .mega-col li a > span { flex: 1 1 auto; min-width: 0; text-wrap: pretty; } .mega-col li a > .icon-arrow { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--brand); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s var(--dd-ease); } html[dir="rtl"] .mega-col li a > .icon-arrow { transform: translateX(4px); } .mega-col li a:hover, .mega-col li a:focus-visible, .mega-col li a[aria-current="page"] { background: var(--brand-50); color: var(--brand); } .mega-col li a:hover > .icon:first-child, .mega-col li a:focus-visible > .icon:first-child, .mega-col li a[aria-current="page"] > .icon:first-child { color: var(--brand); } .mega-col li a:hover > .icon-arrow, .mega-col li a:focus-visible > .icon-arrow { opacity: 1; transform: none; } .mega-col li a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .mega-col li a[aria-current="page"] { font-weight: 700; } .mega-col .mega-extra { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); } .mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 32px; background: var(--brand-50); border-top: 1px solid var(--brand-100); color: var(--ink-2); font-size: .88rem; } .mega-foot-text { display: flex; align-items: center; gap: 12px; min-width: 0; } .mega-foot-text > .icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #fff; border: 1px solid var(--brand-100); color: var(--brand); } .mega-foot-text strong { color: var(--ink); font-weight: 700; } .mega-foot-actions { display: flex; gap: 10px; flex: none; } .mega-foot .btn { min-height: 40px; min-width: 156px; padding: 0 18px; font-size: .86rem; } .mega-foot .btn .icon { width: 15px; height: 15px; } /* ---- Small dropdowns (Hajj & Umrah, Company) ---- */ .dd-list ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; } .dd-list li a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: .84rem; line-height: 1.45; text-decoration: none; transition: background-color .15s; } .dd-list li a > .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--brand-50); color: var(--brand); transition: background-color .15s, color .15s; } .dd-list li a > span { min-width: 0; text-wrap: pretty; } .dd-list strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: .93rem; font-weight: 700; line-height: 1.35; transition: color .15s; } .dd-list li a:hover, .dd-list li a:focus-visible, .dd-list li a[aria-current="page"] { background: var(--brand-50); } .dd-list li a:hover > .icon, .dd-list li a:focus-visible > .icon, .dd-list li a[aria-current="page"] > .icon { background: var(--brand); color: #fff; } .dd-list li a:hover strong, .dd-list li a:focus-visible strong, .dd-list li a[aria-current="page"] strong { color: var(--brand); } .dd-list li a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .dd-compact li a { align-items: center; padding-block: 8px; } .dd-compact strong { margin: 0; } .dd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--brand-50); border-top: 1px solid var(--brand-100); color: var(--ink-2); font-size: .84rem; line-height: 1.4; text-decoration: none; transition: background-color .15s; } .dd-foot strong { display: block; color: var(--brand); font-weight: 700; } .dd-foot .icon { flex: none; width: 16px; height: 16px; color: var(--brand); } .dd-foot:hover { background: var(--brand-100); color: var(--ink); } .dd-foot:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* ---- Tablet and phone: full-screen menu with accordions ---- */ @media (max-width: 1080px) { .nav-list > li > a, .nav-dd { min-height: 54px; padding: 0 8px; border-radius: 10px; font-size: 1.05rem; } .nav-list > li > a[aria-current="page"]::after, .has-dd.is-current > .nav-dd::after { display: none; } .nav-list > li > a[aria-current="page"], .has-dd.is-current > .nav-dd { color: var(--brand); font-weight: 700; } .site-nav .dd-panel { display: none; padding: 0 0 14px; } .site-nav .has-dd.is-open > .dd-panel { display: block; } .mega-cols { display: block; padding: 0; } .mega-col { display: block; padding: 0; border: 0 !important; } .mega-col + .mega-col { border-top: 1px solid var(--line) !important; } .mega-title { align-items: center; min-height: 56px; margin: 0; padding: 8px 4px; border: 0; font-size: 1rem; } .js .mega-title { cursor: pointer; border-radius: 10px; } .js .mega-title::after { content: ""; flex: none; width: 9px; height: 9px; margin-inline: auto 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); /* physical borders: a down arrow in both directions */ transition: transform .2s var(--dd-ease); opacity: .6; } .js .mega-col.is-col-open .mega-title::after { transform: rotate(-135deg); } .js .mega-title:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .js .mega-col:not(.is-col-open) > ul { display: none; } .mega-col ul { padding: 0 0 12px; } .mega-col li a { margin-inline: 0; min-height: 46px; align-items: center; padding: 10px 12px; padding-inline-start: 52px; } .mega-col li a > .icon:first-child { margin-top: 0; } .mega-col li a > .icon-arrow { display: none; } .mega-col .mega-extra { margin-top: 4px; } .mega-foot { margin-top: 6px; padding: 14px; border: 0; border-radius: 12px; } .mega-foot-actions { width: 100%; } .mega-foot-actions .btn { flex: 1; min-width: 0; } .dd-list ul { padding: 0; } .dd-list li a { min-height: 52px; } .dd-foot { margin-top: 6px; border: 0; border-radius: 12px; } .nav-actions { gap: 12px; } .lang-switch { border: 1px solid var(--line); } .nav-cta { min-height: 50px; } } /* ---- Menu text wrapping and the compact Company width ---- */ .mega-title-text { text-wrap: balance; } @media (min-width: 1081px) { .dd-compact { width: max-content; min-width: 248px; max-width: 320px; } } /* ===================================================================== v12 hero refinements (homepage slider): a steadier reading zone behind the copy, tighter rhythm, and category shortcuts as clear pill links. ===================================================================== */ .slide::before { background: linear-gradient(90deg, rgb(14 10 12 / .9) 0%, rgb(14 10 12 / .76) 30%, rgb(14 10 12 / .38) 58%, rgb(14 10 12 / .06) 82%), linear-gradient(180deg, rgb(14 10 12 / .42) 0%, rgb(14 10 12 / 0) 24%, rgb(14 10 12 / 0) 66%, rgb(14 10 12 / .6) 100%); } html[dir="rtl"] .slide::before { background: linear-gradient(270deg, rgb(14 10 12 / .9) 0%, rgb(14 10 12 / .76) 30%, rgb(14 10 12 / .38) 58%, rgb(14 10 12 / .06) 82%), linear-gradient(180deg, rgb(14 10 12 / .42) 0%, rgb(14 10 12 / 0) 24%, rgb(14 10 12 / 0) 66%, rgb(14 10 12 / .6) 100%); } .slide-copy { width: 100%; max-width: 700px; } .slide .eyebrow.pill { margin-bottom: 22px; } .slide-title { line-height: 1.04; margin-bottom: .36em; } html[lang^="ar"] .slide-title { line-height: 1.32; } .slide .lead { max-width: 520px; margin-bottom: 1.9em; color: rgb(255 255 255 / .9); } .hero-lines { margin-top: 28px; padding-top: 0; border-top: 0; gap: 10px; } .hero-lines a { gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgb(14 10 12 / .5); border: 1px solid rgb(255 255 255 / .2); font-size: .9rem; opacity: 1; transition: background-color .15s, border-color .15s, color .15s; } html[dir="rtl"] .hero-lines a { padding: 6px 6px 6px 16px; } .hero-lines a:hover { text-decoration: none; background: #fff; border-color: #fff; color: var(--ink); } .hero-lines a:hover .icon { background: var(--brand); color: #fff; } .hero-lines a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hero-lines .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgb(255 255 255 / .14); transition: background-color .15s, color .15s; } @media (min-width: 1081px) { .slider-controls { bottom: 96px; } } @media (max-width: 900px) { .slide::before, html[dir="rtl"] .slide::before { background: linear-gradient(180deg, rgb(14 10 12 / .3) 0%, rgb(14 10 12 / .45) 32%, rgb(14 10 12 / .86) 70%, rgb(14 10 12 / .94) 100%); } .hero-lines { gap: 8px; } .hero-lines a { font-size: .84rem; min-height: 40px; } } /* ---- Slider: one title style for all three slides, category buttons that switch slides ---- */ .slide-title { font-size: clamp(2.3rem, 1.25rem + 3.5vw, 4.3rem); } .slider-controls { justify-content: center; gap: 12px; } .slide-nav { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgb(14 10 12 / .55); border: 1px solid rgb(255 255 255 / .16); } .slide-nav-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: transparent; color: rgb(255 255 255 / .86); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; } html[dir="rtl"] .slide-nav-btn { padding: 0 8px 0 18px; } .slide-nav-btn .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; transition: background-color .2s, color .2s; } .slide-nav-btn:hover { color: #fff; background: rgb(255 255 255 / .1); } .slide-nav-btn.is-active { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -12px rgb(102 38 42 / .9); } .slide-nav-btn.is-active .icon { background: rgb(255 255 255 / .18); } .slide-nav-btn:focus-visible, .slider-arrow:focus-visible, .slider-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .slide-nav-btn { white-space: nowrap; } .slider-controls .slider-dots, .slider-arrow { display: none; } @media (min-width: 761px) and (max-width: 1080px) { .slide-inner { padding-bottom: 180px; } .slide-nav-btn { padding-inline-end: 14px; font-size: .86rem; } } .slider-arrow { width: 40px; height: 40px; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .45); background: rgb(14 10 12 / .35); color: #fff; cursor: pointer; } .slider-arrow .icon { width: 18px; height: 18px; } .slider-toggle { width: 40px; height: 40px; background: rgb(14 10 12 / .45); } @media (max-width: 760px) { .slider-controls .slide-nav { display: none; } .slider-controls .slider-dots { display: flex; } .slider-arrow { display: grid; } .slide-inner { padding-bottom: 150px; } } /* Slide 1 photo (Riyadh, vehicles on the right): keep the coach in frame on wide screens, the cars on phones. */ #slide-0 .slide-bg { object-position: 74% 60%; } @media (max-width: 700px) { #slide-0 .slide-bg { object-position: 62% 60%; } } /* Slide 2 photo (Makkah coach terminal): on phones, centre on the Clock Tower. */ @media (max-width: 700px) { #slide-1 .slide-bg { object-position: 64% 50%; } } /* Airport Taxi header photo: keep the plane in frame. */ .page-key-airport-taxi .page-hero .hero-bg { object-position: center 18%; } /* School Transport header photo: show the students boarding, not just their heads. */ .page-key-school-transport .page-hero .hero-bg { object-position: center 80%; } /* Logistics Services header photo: keep the plane in frame. */ .page-key-logistics-services .page-hero .hero-bg { object-position: center 22%; } /* "Why Choose PAIDAR" photo: on tablets and phones the panel is a wide strip, so show the lower half (the vehicles), not the sky. */ @media (max-width: 1080px) { .why-media img { object-position: center 78%; } } /* ---- WhatsApp enquiry panel (Request a Quote and Contact pages) ---- */ .wa-panel { margin: 8px 0 24px; padding: clamp(20px, 3vw, 30px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgb(15 15 20 / .04), 0 22px 44px -36px rgb(42 18 21 / .45); } .wa-panel-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .wa-panel-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1f9d55; color: #fff; } .wa-panel-icon .icon { width: 26px; height: 26px; } .wa-panel-head h2 { margin: 0 0 6px; font-size: 1.3rem; } .entry .wa-panel-head h2::after { display: none; } .wa-panel-head p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; } .wa-panel-pick { margin-bottom: 16px; } .wa-panel-pick label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; color: var(--ink); } .wa-panel-pick select { border-radius: 10px; border-color: #d5d6dd; } .wa-panel-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: .9rem; } .wa-panel-note a { font-weight: 700; text-decoration: none; unicode-bidi: isolate; } /* B2B card on the homepage: the title links to the Corporate page, the button opens WhatsApp. */ .corp-card h3 a { color: inherit; text-decoration: none; } .corp-card h3 a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } /* Slide 3 photo (freight convoy, lead truck on the right): on phones, centre on the truck. */ @media (max-width: 700px) { #slide-2 .slide-bg { object-position: 68% 50%; } } /* About section photo: a wide fleet scene, so a 4:3 frame keeps the coach, truck and SUV whole. Soft burgundy wash at the foot sits under the badge. */ .about-media > img { aspect-ratio: 4 / 3; object-position: 50% 62%; } .about-media::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgb(42 18 21 / 0) 60%, rgb(42 18 21 / .28) 100%); pointer-events: none; } .about-media .float-badge { z-index: 1; } /* ===================================================================== v13 motion layer: one calm animation language for every page. - Page load: headings unveil from below a mask, then the lead text and buttons rise in on a short stagger (homepage slider and inner heroes). - Scroll: sections, cards and photos fade up as they enter; cards in a grid follow each other (JS sets --rd). Photos settle from a slight zoom. - Hover: nav underline grows, buttons lift, card photos zoom gently. Only opacity, transform and clip-path move, so it stays smooth and fast. Everything is off for visitors who ask for reduced motion. ===================================================================== */ :root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.2, .7, .2, 1); } /* Slightly larger, more confident inner-page headings. */ .page-hero h1 { font-size: clamp(2.15rem, 1.2rem + 3.1vw, 3.8rem); } @media (prefers-reduced-motion: no-preference) { @keyframes paidar-unveil { from { clip-path: inset(-0.3em -0.3em 100% -0.3em); transform: translateY(.35em); } to { clip-path: inset(-0.3em); transform: none; } } /* the margin keeps diacritics and descenders unclipped */ @keyframes paidar-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes paidar-settle { from { transform: scale(1.06); } to { transform: scale(1); } } /* ---- Page load: inner-page hero ---- */ .page-hero .hero-bg { animation: paidar-settle 1.6s var(--ease-out) both; } .page-hero-inner > * { animation: paidar-fade-up .8s var(--ease-out) both; } .page-hero-inner > .breadcrumbs { animation-delay: .05s; } .page-hero-inner > .eyebrow { animation-delay: .12s; } .page-hero-inner > h1 { animation: paidar-unveil 1s var(--ease-out) .18s both; } .page-hero-inner > .lead { animation-delay: .38s; } .page-hero-inner > .btn-row, .page-hero-inner > .site-search { animation-delay: .5s; } .page-hero-inner > .btn-row > .btn:nth-child(2) { animation: paidar-fade-up .8s var(--ease-out) .6s both; } /* ---- Page load: homepage slider (the slide already rises; the title now unveils) ---- */ .slide.is-active .slide-title { animation: paidar-unveil 1.05s var(--ease-out) .1s both; } .slide.is-active .btn-row > .btn:nth-child(2) { animation: paidar-fade-up .8s var(--ease-out) .5s both; } .slider-controls { animation: paidar-fade-up .8s var(--ease-out) .7s both; } /* ---- Scroll reveals (JS adds data-reveal below the fold and .is-visible on entry) ---- */ .js [data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--rd, 0s); } .js [data-reveal="zoom"] { transform: translateY(18px) scale(.97); } .js [data-reveal="zoom"].is-visible { transform: none; } /* ---- Hover: navigation underline grows from the start edge ---- */ .nav-list > li > a::after, .has-dd > .nav-dd::after { content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); } html[dir="rtl"] .nav-list > li > a::after, html[dir="rtl"] .has-dd > .nav-dd::after { transform-origin: right; } .has-dd > .nav-dd::after { inset-inline-end: 35px; } .nav-list > li > a:hover::after, .nav-list > li > a[aria-current="page"]::after, .has-dd > .nav-dd:hover::after, .has-dd.is-current > .nav-dd::after { transform: scaleX(1); } .has-dd.is-open > .nav-dd::after { transform: scaleX(0); } /* the open menu shows as a pill instead */ /* ---- Hover: buttons lift a little, arrows and icons nudge ---- */ .btn { transition: background-color .25s, color .25s, border-color .25s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out); } .btn:hover { transform: translateY(-2px); } .btn-primary:hover, .btn-wa:hover { box-shadow: 0 14px 28px -14px rgb(102 38 42 / .75); } .btn-light:hover { box-shadow: 0 14px 28px -14px rgb(0 0 0 / .45); } .btn:active { transform: translateY(0); transition-duration: .1s; } .btn .icon { transition: transform .3s var(--ease-out); } .btn:hover .icon-arrow { transform: translateX(3px); } html[dir="rtl"] .btn:hover .icon-arrow { transform: translateX(-3px); } /* ---- Hover: softer, slower photo zoom on cards everywhere ---- */ .svc-card-media img, .fleet-media img, .entry .place-card figure.wp-block-image img, .entry .photo-grid img { transition: transform 1.1s var(--ease-out); } .related-icon, .hub-icon, .svc-tab-icon, .step-icon, .sectors .icon { transition: transform .35s var(--ease-out), background-color .2s, color .2s; } .related li > a:hover .related-icon, .sectors li:hover .icon { transform: scale(1.08); } } @media (max-width: 1080px) { .nav-list > li > a::after, .has-dd > .nav-dd::after { display: none; } } /* ===================================================================== v14: floating WhatsApp button (one shared component, every page). Desktop: green pill with icon and "Chat With Us". Phones: 56px icon. Enters once after load, glows three times, then stays calm. ===================================================================== */ .wa-float { --wa: #25d366; --wa-dark: #1da851; position: fixed; z-index: 95; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 8px; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 700; font-size: .98rem; line-height: 1; text-decoration: none; box-shadow: 0 12px 28px -10px rgb(10 60 30 / .55), 0 2px 6px rgb(0 0 0 / .12); transition: transform .3s var(--ease-out, ease), box-shadow .3s var(--ease-out, ease), background-color .2s; } .wa-float-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / .18); } .wa-float-icon svg { width: 26px; height: 26px; } .wa-float:hover { background: var(--wa-dark); color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 36px -12px rgb(10 60 30 / .6), 0 3px 8px rgb(0 0 0 / .14); } .wa-float:active { transform: scale(.98); } .wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } html[lang^="ar"] .wa-float { font-family: var(--font-ar); } /* Room at the end of every page so the button never covers the last footer line. */ body.has-wa-float .site-footer { padding-bottom: 92px; } /* Phones: compact round icon. */ @media (max-width: 700px) { .wa-float { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; min-height: 56px; padding: 0; justify-content: center; } .wa-float-icon { width: 56px; height: 56px; background: transparent; } .wa-float-icon svg { width: 30px; height: 30px; } .wa-float-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.has-wa-float .site-footer { padding-bottom: 84px; } } @media (prefers-reduced-motion: no-preference) { @keyframes paidar-wa-in { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } } @keyframes paidar-wa-glow { 0% { box-shadow: 0 12px 28px -10px rgb(10 60 30 / .55), 0 0 0 0 rgb(37 211 102 / .55); } 70% { box-shadow: 0 12px 28px -10px rgb(10 60 30 / .55), 0 0 0 16px rgb(37 211 102 / 0); } 100% { box-shadow: 0 12px 28px -10px rgb(10 60 30 / .55), 0 0 0 0 rgb(37 211 102 / 0); } } .wa-float { animation: paidar-wa-in .7s var(--ease-out, ease) 1s both, paidar-wa-glow 2s ease-out 2.2s 3; } .wa-float:hover, .wa-float:focus-visible { animation: none; } } /* Floating button steps aside (never sits on another control); keyboard focus always brings it back. */ .wa-float { transition: opacity .25s, transform .3s var(--ease-out, ease), box-shadow .3s var(--ease-out, ease), background-color .2s; } .wa-float.is-tucked:not(:focus-visible) { opacity: 0 !important; transform: translateY(14px) scale(.9) !important; pointer-events: none; } /* !important beats the finished entrance animation without replaying it */ /* Phones: slider controls keep clear of the floating button corner; below 400px the dots alone switch slides (swipe works too). */ @media (max-width: 700px) { .slider-controls { padding-right: 88px; gap: 8px; } } @media (max-width: 400px) { .slider-controls .slider-arrow { display: none; } } /* ===================================================================== v15: page headers show the whole photo. Desktop: the header takes the photo's own shape (--ar from the image), capped so very tall photos do not push the page down; only the text side is darkened. Phones and tablets: the full photo as a strip on top, text on the dark band below. ===================================================================== */ @media (min-width: 901px) { /* One header size on every page, set by the screen (not the photo), so the title and button sit in the same place everywhere and the whole header fits in the first view. */ .page-hero.has-photo { width: 100%; aspect-ratio: auto; min-height: clamp(460px, calc(100svh - 190px), 620px); max-height: none; padding-block: clamp(40px, 7vh, 72px) 48px; align-items: flex-start; } /* Long titles stay on one line where they can; the lead keeps a readable width. */ .page-hero.has-photo .page-hero-inner > h1 { max-width: 920px; } .page-hero.has-photo .page-hero-inner > :first-child { max-width: none; } .page-hero.has-photo .hero-bg { object-position: center center; } .page-hero.has-photo::before { background: linear-gradient(90deg, rgb(14 10 12 / .86) 0%, rgb(14 10 12 / .66) 30%, rgb(14 10 12 / .22) 52%, rgb(14 10 12 / 0) 66%), linear-gradient(180deg, rgb(14 10 12 / .3) 0%, rgb(14 10 12 / 0) 22%); } html[dir="rtl"] .page-hero.has-photo::before { background: linear-gradient(270deg, rgb(14 10 12 / .86) 0%, rgb(14 10 12 / .66) 30%, rgb(14 10 12 / .22) 52%, rgb(14 10 12 / 0) 66%), linear-gradient(180deg, rgb(14 10 12 / .3) 0%, rgb(14 10 12 / 0) 22%); } .page-hero.has-photo .page-hero-inner { max-width: calc(var(--container) + 2 * var(--gutter)); } .page-hero.has-photo .page-hero-inner > * { max-width: 620px; } } /* Wide screens: the text column sits further in, so the shade reaches further too. */ @media (min-width: 1500px) { .page-hero.has-photo::before { background: linear-gradient(90deg, rgb(14 10 12 / .86) 0%, rgb(14 10 12 / .7) 40%, rgb(14 10 12 / .25) 60%, rgb(14 10 12 / 0) 74%), linear-gradient(180deg, rgb(14 10 12 / .3) 0%, rgb(14 10 12 / 0) 22%); } html[dir="rtl"] .page-hero.has-photo::before { background: linear-gradient(270deg, rgb(14 10 12 / .86) 0%, rgb(14 10 12 / .7) 40%, rgb(14 10 12 / .25) 60%, rgb(14 10 12 / 0) 74%), linear-gradient(180deg, rgb(14 10 12 / .3) 0%, rgb(14 10 12 / 0) 22%); } } @media (max-width: 900px) { .page-hero.has-photo { display: block; min-height: 0; padding: 0; } .page-hero.has-photo::before { display: none; } .page-hero.has-photo .hero-bg { position: relative; inset: auto; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.78); object-fit: cover; } .page-hero.has-photo .page-hero-inner { padding-block: 26px 36px; } } /* Ziyarah cards: the short "what the photo shows" note sits under the photo, not on it. */ .entry .place-card figcaption { position: static; display: block; margin: 0; padding: 12px 22px 0; background: none; color: var(--muted); font-size: .8rem; font-style: italic; line-height: 1.45; border-radius: 0; } .entry .place-card figcaption + * { margin-top: 0; } .entry .place-card figure.wp-block-image:has(figcaption) + h3 { margin-top: 6px; } @media (max-width: 560px) { .entry .place-card figcaption { padding: 10px 12px 0; font-size: .72rem; } } /* One small, readable credits note at the end of the place list (licence requirement). */ .entry .photo-credits { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; line-height: 1.8; } .entry .photo-credits a { color: inherit; text-decoration-color: rgb(92 96 107 / .4); } .entry .photo-credits strong { color: var(--ink-2); } /* Inner pages: scroll motion as noticeable as on the homepage. */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { transform: translateY(34px); transition-duration: 1s, 1s; } .js [data-reveal].is-visible { transform: none; } .js [data-reveal="zoom"] { transform: translateY(30px) scale(.94); } .page-hero .hero-bg { animation: paidar-settle 2.2s var(--ease-out) both; } @keyframes paidar-settle { from { transform: scale(1.1); } to { transform: scale(1); } } } /* The photo keeps its 16:10 shape; the figure grows so the note below it is not clipped. */ .entry .place-card figure.wp-block-image { aspect-ratio: auto; background: none; } .entry .place-card figure.wp-block-image img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10 !important; } .entry .place-card figure.wp-block-image::after { inset: 0 0 auto 0; aspect-ratio: 16 / 10; } /* ===================================================================== v16: Makkah and Madinah ziyarah places, special treatment. Every photo is shown whole (never cropped) in a 4:3 frame; any space around it is filled with a soft blurred copy of the same photo (JS sets --bg). The first place is a large featured card across the full width. ===================================================================== */ .entry .place-grid > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; } .entry .place-card figure.wp-block-image { position: relative; overflow: hidden; background: linear-gradient(135deg, #2a1215, #4f1c20); } .entry .place-card figure.wp-block-image::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto 0; aspect-ratio: 4 / 3; background: var(--bg, none) center / cover no-repeat; filter: blur(22px) saturate(1.15) brightness(.7); transform: scale(1.15); clip-path: inset(0); } .entry .place-card figure.wp-block-image img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3 !important; object-fit: contain; background: none; } .entry .place-card figure.wp-block-image::after { z-index: 2; inset: 0 0 auto 0; aspect-ratio: 4 / 3; background: linear-gradient(180deg, transparent 62%, rgb(14 10 12 / .3)); } .entry .place-card figcaption { position: relative; z-index: 3; background: #fff; } .entry .place-card::before { top: calc(75cqw - 60px); z-index: 4; } .entry .place-card h3 { font-size: 1.16rem; } /* Featured first place: photo and text side by side, across the grid. */ .entry .place-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; container-type: normal; } .entry .place-card:first-child figure.wp-block-image { height: 100%; } .entry .place-card:first-child figure.wp-block-image::before, .entry .place-card:first-child figure.wp-block-image::after { inset: 0; aspect-ratio: auto; } .entry .place-card:first-child figure.wp-block-image img { height: 100%; min-height: 340px; aspect-ratio: auto !important; } .entry .place-card:first-child::before { top: 18px; inset-inline-start: 18px; } .entry .place-card:first-child h3 { margin: 28px 32px 10px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; } .entry .place-card:first-child p { margin: 0 32px 30px; font-size: 1rem; line-height: 1.7; } @media (max-width: 760px) { .entry .place-card:first-child { display: flex; } .entry .place-card:first-child figure.wp-block-image img { min-height: 0; aspect-ratio: 4 / 3 !important; height: auto; } .entry .place-card:first-child figure.wp-block-image::before, .entry .place-card:first-child figure.wp-block-image::after { inset: 0 0 auto 0; aspect-ratio: 4 / 3; } .entry .place-card:first-child h3 { margin: 22px 20px 8px; } .entry .place-card:first-child p { margin: 0 20px 22px; } } /* Phones: one card per row so photos and text stay readable. */ @media (max-width: 560px) { .entry .place-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 16px; } .entry .place-card::before { inset-inline-start: 14px; top: calc(75cqw - 54px); width: 40px; height: 40px; font-size: .95rem; } .entry .place-card h3 { margin: 20px 18px 6px; font-size: 1.08rem; } .entry .place-card p { margin: 0 18px 18px; font-size: .92rem; } .entry .place-card figcaption { padding: 10px 18px 0; font-size: .76rem; } } /* ===================================================================== Consistent motion on inner pages: what is on screen at load rises in just after the header; everything further down reveals on scroll. ===================================================================== */ @media (prefers-reduced-motion: no-preference) { .page-body > .entry > :nth-child(-n+4), .page-aside > * { animation: paidar-fade-up .9s var(--ease-out) both; } .page-body > .entry > :nth-child(1) { animation-delay: .55s; } .page-body > .entry > :nth-child(2) { animation-delay: .65s; } .page-body > .entry > :nth-child(3) { animation-delay: .75s; } .page-body > .entry > :nth-child(4) { animation-delay: .85s; } .page-aside > :nth-child(1) { animation-delay: .7s; } .page-aside > :nth-child(2) { animation-delay: .82s; } .page-aside > :nth-child(3) { animation-delay: .94s; } } /* Featured place: photo spans both rows on the start side, title and text stacked beside it. */ @media (min-width: 761px) { .entry .place-card:first-child { grid-template-rows: 1fr auto; column-gap: 0; } .entry .place-card:first-child figure.wp-block-image { grid-row: 1 / span 2; grid-column: 1; height: clamp(320px, 30vw, 420px); } .entry .place-card:first-child figure.wp-block-image img { height: 100%; min-height: 0; } .entry .place-card:first-child h3 { grid-column: 2; grid-row: 1; align-self: end; } .entry .place-card:first-child p { grid-column: 2; grid-row: 2; align-self: start; } } /* Ziyarah cards: every photo fills its frame (no narrow strip with blurred sides for portrait photos); the focus sits a little above centre where the subject usually is. */ .entry .place-card figure.wp-block-image img { object-fit: cover; object-position: center 40%; } .entry .place-card figure.wp-block-image::before { display: none; } /* Service cards: every card the same size. A short last row is centred (3 + 2 on desktop, 2 + 1 on tablet). */ @media (min-width: 1081px) { .svc-cards[data-items="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .svc-cards[data-items="5"] > .svc-card { grid-column: span 2; } .svc-cards[data-items="5"] > .svc-card:nth-child(4) { grid-column: 2 / span 2; } } @media (min-width: 641px) and (max-width: 1080px) { .svc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .svc-cards > .svc-card { grid-column: span 2; } .svc-cards > .svc-card:last-child:nth-child(odd) { grid-column: 2 / span 2; } }