@charset "UTF-8"; /* ══════════════════════════════════════════════════════════════════════════ HOME PAGE — Rafedeen 2026 Scoped to `.hp`. Consumes the tokens defined in style.css and defines no colours of its own. Logical properties throughout, so AR-RTL and EN-LTR share one ruleset. ══════════════════════════════════════════════════════════════════════════ */ .hp { overflow-x: clip; /* The page rises under the transparent header so the hero video starts at the very top of the viewport. `overflow-x: clip` makes this element a BFC, so the margin cannot collapse out through . The bar itself is sticky at z-index 900 and keeps painting over the media. See "OVERLAY HEADER" in style.css. */ margin-block-start: calc(var(--header-h) * -1); } /* ───────────────────────────────────────────── Shared section furniture ───────────────────────────────────────────── */ .hp .sh-head { max-width: 720px; margin-inline: auto; margin-block-end: var(--sp-8); text-align: center; } .hp .sh-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.4rem 1rem; margin-block-end: var(--sp-3); border: 1px solid var(--brand-200); border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-xs); font-weight: 700; } .hp .sh-badge i { color: var(--brand-500); } .hp .sh-title { font-size: var(--fs-2xl); color: var(--ink); margin-block-end: var(--sp-3); } .hp .sh-title .accent { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .hp .sh-sub { color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-snug); margin: 0; } /* Start-aligned variant. Needs `.hp` on it too, otherwise the base `.hp .sh-head` centring wins on specificity. */ .hp .sh-head--start { margin-inline: 0; max-width: 760px; text-align: start; } .hp .sh-head--start .sh-title::after { margin-inline: 0; } /* Scroll-reveal hook — the page script adds `.vis` via IntersectionObserver */ .hp .fu { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .hp .fu.vis { opacity: 1; transform: none; } .hp .fu:nth-child(2) { transition-delay: 0.07s; } .hp .fu:nth-child(3) { transition-delay: 0.14s; } .hp .fu:nth-child(4) { transition-delay: 0.21s; } .hp .fu:nth-child(5) { transition-delay: 0.28s; } .hp .fu:nth-child(6) { transition-delay: 0.35s; } @media (prefers-reduced-motion: reduce) { .hp .fu { opacity: 1; transform: none; transition: none; } } /* Outline link-button used under the CV sliders */ .hp .btn-out { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.85rem 1.9rem; border: 1.5px solid var(--brand-300); border-radius: var(--r-pill); color: var(--brand-700); font-size: var(--fs-sm); font-weight: 700; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp .btn-out:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-brand); } .hp .btn-pp { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.95rem 2rem; border: 0; border-radius: var(--r-pill); background: var(--grad-brand); color: #fff; font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .hp .btn-pp:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); } .hp .btn-pp:disabled { opacity: 0.6; transform: none; cursor: not-allowed; } .hp .btn-pp--block { width: 100%; padding-block: 1rem; font-size: var(--fs-base); } /* ═════════════════════════════════════════════ 1. HERO — full-width cinematic video ═════════════════════════════════════════════ */ .vh-hero { position: relative; display: flex; /* Exactly one screen. `dvh` first for mobile browsers, where `vh` counts a toolbar that is not there and the hero ends up taller than the screen. */ min-height: 100vh; min-height: 100dvh; /* The top padding carries the header the section now sits under, so the title clears the bar however short the window is; the bottom padding leaves room for the trust rail pinned near the fold. */ padding-block: calc(clamp(3rem, 7vh, 6rem) + var(--header-h)) clamp(8.5rem, 15vh, 11rem); overflow: hidden; isolation: isolate; background: var(--brand-900); } .vh-hero__media, .vh-hero__veil { position: absolute; inset: 0; } .vh-hero__media { z-index: -2; } .vh-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .vh-hero__veil { z-index: -1; background: linear-gradient(90deg, rgba(19, 8, 48, 0.9) 0%, rgba(30, 13, 70, 0.65) 48%, rgba(21, 8, 48, 0.22) 100%), linear-gradient(0deg, rgba(12, 4, 30, 0.72) 0%, transparent 45%, rgba(12, 4, 30, 0.2) 100%); } [dir="rtl"] .vh-hero__veil { background: linear-gradient(270deg, rgba(19, 8, 48, 0.9) 0%, rgba(30, 13, 70, 0.65) 48%, rgba(21, 8, 48, 0.22) 100%), linear-gradient(0deg, rgba(12, 4, 30, 0.72) 0%, transparent 45%, rgba(12, 4, 30, 0.2) 100%); } .vh-hero__inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; } .vh-hero__content { max-width: 760px; transform: translateY(clamp(0.75rem, 2vh, 1.5rem)); } .vh-hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.45rem 1.05rem; margin-block-end: var(--sp-5); border: 1px solid rgba(255, 255, 255, 0.26); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: #fff; font-size: var(--fs-xs); font-weight: 700; } .vh-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: vh-dot 2s var(--ease-out) infinite; } @keyframes vh-dot { 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .vh-hero__h1 { color: #fff; font-size: clamp(2.4rem, 5.3vw, 5rem); line-height: 1.06; margin-block-end: var(--sp-4); text-wrap: balance; text-shadow: 0 4px 30px rgba(12, 4, 30, 0.3); animation: vh-rise 0.9s var(--ease-out) both; } .vh-hero__sub { max-width: 58ch; margin: 0; color: rgba(255, 255, 255, 0.84); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: var(--lh-snug); animation: vh-rise 0.9s var(--ease-out) 0.1s both; } @keyframes vh-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ── The three service calls to action ── One per service, and deliberately three different weights rather than three identical pills: the eye should land on the recruitment request first, then the rental, then the transfer. */ .vh-hero__cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); width: min(100%, 760px); margin-block-start: clamp(var(--sp-5), 4vh, var(--sp-7)); animation: vh-rise 0.9s var(--ease-out) 0.2s both; } .vh-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 60px; padding: 0.85rem 1.4rem; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 800; text-decoration: none; line-height: 1.35; white-space: normal; text-align: center; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .vh-cta:hover, .vh-cta:focus-visible { transform: translateY(-3px); } .vh-cta__ico { font-size: 1.05rem; } .vh-cta__arrow { margin-inline-start: auto; font-size: 0.72rem; opacity: 0.75; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } [dir="ltr"] .vh-cta__arrow { transform: scaleX(-1); } .vh-cta:hover .vh-cta__arrow { opacity: 1; transform: translateX(-4px); } [dir="ltr"] .vh-cta:hover .vh-cta__arrow { transform: scaleX(-1) translateX(-4px); } /* 1 — the primary: filled, and the only element on the hero that glows */ .vh-cta--solid { background: var(--grad-brand); color: #fff; box-shadow: 0 14px 32px rgba(122, 70, 219, 0.42); } /* A light sweep passes across it once per hover */ .vh-cta--solid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 112deg, transparent 36%, rgba(255, 255, 255, 0.32) 50%, transparent 64% ); background-repeat: no-repeat; background-size: 250% 100%; background-position: 150% 0; opacity: 0; pointer-events: none; } .vh-cta--solid:hover { box-shadow: 0 20px 44px rgba(122, 70, 219, 0.55); } .vh-cta--solid:hover::after, .vh-cta--solid:focus-visible::after { animation: vh-cta-sheen 0.85s var(--ease-out); } @keyframes vh-cta-sheen { 0% { opacity: 0; background-position: 150% 0; } 16% { opacity: 1; } 100% { opacity: 0; background-position: -150% 0; } } /* 2 — the glass one: frosted over the video, inverts to solid white on hover */ .vh-cta--glass { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); color: #fff; } .vh-cta--glass:hover, .vh-cta--glass:focus-visible { border-color: transparent; background: #fff; color: var(--brand-800); box-shadow: 0 16px 34px rgba(10, 3, 26, 0.35); } /* 3 — the quiet one: an outline that fills only on hover */ .vh-cta--line { border-color: rgba(255, 255, 255, 0.28); background: transparent; color: rgba(255, 255, 255, 0.86); } .vh-cta--line .vh-cta__ico { color: var(--accent-400); } .vh-cta--line:hover, .vh-cta--line:focus-visible { border-color: var(--accent-400); background: rgba(224, 169, 60, 0.14); color: #fff; } @media (max-width: 620px) { .vh-hero__cta { grid-template-columns: 1fr; gap: var(--sp-2); } .vh-cta { justify-content: space-between; padding: 0.8rem 1.1rem; } } @media (prefers-reduced-motion: reduce) { .vh-hero__cta { animation: none; } .vh-cta, .vh-cta__arrow { transition: none; } .vh-cta:hover, .vh-cta:focus-visible { transform: none; } .vh-cta--solid:hover::after, .vh-cta--solid:focus-visible::after { animation: none; } } .vh-hero__rail { position: absolute; inset-inline: 0; /* Sits inside the hero now. It used to hang below the section, which was right when the hero was ~700px and the next band started above the fold — at a full screen it would have dropped out of sight entirely. */ inset-block-end: clamp(1.25rem, 3.5vh, 2.75rem); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5); width: 100%; margin-block-start: 0; padding: var(--sp-4) var(--sp-5); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-xl); background: rgba(22, 9, 53, 0.58); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); box-shadow: 0 18px 46px rgba(12, 4, 30, 0.28); animation: vh-rise 0.9s var(--ease-out) 0.2s both; } .vh-hero__partner { display: flex; align-items: center; gap: var(--sp-3); padding-inline-end: var(--sp-5); border-inline-end: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: var(--fs-sm); font-weight: 700; } .vh-hero__partner img { width: auto; height: 32px; padding: 4px 8px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.95); } .vh-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-5); margin: 0; } .vh-hero__trust li { display: inline-flex; align-items: center; gap: var(--sp-2); color: rgba(255, 255, 255, 0.72); font-size: var(--fs-xs); font-weight: 600; } .vh-hero__trust i { color: var(--accent-400); font-size: 1rem; } .vh-hero__stat { display: flex; flex-direction: column; align-items: flex-start; min-width: max-content; padding-inline-start: var(--sp-5); border-inline-start: 1px solid rgba(255, 255, 255, 0.18); } .vh-hero__stat strong { color: #fff; font-size: var(--fs-xl); line-height: 1.1; font-variant-numeric: tabular-nums; } .vh-hero__stat span { color: rgba(255, 255, 255, 0.66); font-size: var(--fs-xs); font-weight: 600; } @media (max-width: 980px) { .vh-hero__content { max-width: 620px; } .vh-hero__rail { grid-template-columns: auto 1fr; } .vh-hero__trust { justify-content: flex-start; } .vh-hero__stat { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: var(--sp-2); padding-block-start: var(--sp-3); padding-inline-start: 0; border-block-start: 1px solid rgba(255, 255, 255, 0.14); border-inline-start: 0; } } @media (max-width: 620px) { .vh-hero { /* Still a full screen, but the rail is in flow here so the bottom padding no longer has to reserve space for it. */ padding-block: calc(2.5rem + var(--header-h)) 3rem; } .vh-hero__veil, [dir="rtl"] .vh-hero__veil { background: linear-gradient(0deg, rgba(15, 5, 38, 0.9) 0%, rgba(23, 9, 55, 0.58) 64%, rgba(15, 5, 38, 0.3) 100%); } .vh-hero__video { object-position: 58% center; } /* A phone has no room for the title, three stacked buttons AND a pinned rail: absolute positioning would let them overlap, so it flows instead. */ .vh-hero__rail { position: static; margin-block-start: var(--sp-5); grid-template-columns: 1fr auto; gap: var(--sp-3); padding: var(--sp-3); } .vh-hero__partner { padding-inline-end: var(--sp-3); } .vh-hero__partner span { display: none; } .vh-hero__trust { display: grid; grid-template-columns: 1fr; gap: 0.35rem; } .vh-hero__trust li { font-size: 0.68rem; } .vh-hero__stat strong { font-size: var(--fs-lg); } } /* ═════════════════════════════════════════════ 2. SERVICES The cards used to be full-bleed photographs under a 72–94% tone gradient, so each one read as a solid block of violet, indigo or grey and the row of three shouted. Now the card is a light surface: the photograph keeps its own colours, the text sits on white, and the cycled tone is spent only where it carries meaning — the icon tile, a whisper over the photo, and the border that lights up on hover. The layout also stops repeating itself. The lead tile is portrait with the photo above the copy; the two stacked tiles are landscape with the photo beside it, and their call to action is a text link rather than a filled pill, so three cards do not fight for the same emphasis. ═════════════════════════════════════════════ */ .hp-svc { padding-block: var(--section-y); background: var(--canvas); } .hp-svc__bento { display: grid; grid-template-columns: 1.05fr 1fr; grid-auto-rows: minmax(200px, auto); gap: clamp(16px, 1.6vw, 22px); } .hp-svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--sh-1); } .hp-svc-card:hover { color: var(--ink); border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); } @supports not (color: color-mix(in srgb, red 50%, blue)) { .hp-svc-card:hover { border-color: var(--brand-200); } } .hp-svc-card--lead { grid-column: 1; grid-row: span 2; min-height: 460px; } .hp-svc-card--stack { grid-column: 2; /* Photo beside the copy, not above it */ flex-direction: row; } /* ── Media ── In flow now rather than an absolute background layer, which is what lets the two card shapes place it differently. */ .hp-svc-card__img { position: relative; inset: auto; z-index: auto; overflow: hidden; background: var(--mist-200); } .hp-svc-card--lead .hp-svc-card__img { flex: 0 0 auto; height: clamp(190px, 21vw, 250px); } .hp-svc-card--stack .hp-svc-card__img { flex: 0 0 38%; width: 38%; align-self: stretch; } .hp-svc-card__img img { width: 100%; height: 100%; object-fit: cover; } /* Just enough tone to tie the photograph to the card it belongs to. The old veil was the same idea at four times the strength. */ .hp-svc-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--tone) 30%, transparent) 0%, transparent 58% ); opacity: 0.85; transition: opacity var(--dur-base) var(--ease-out); } @supports not (color: color-mix(in srgb, red 50%, blue)) { .hp-svc-card__img::after { background: linear-gradient( to top, rgba(47, 11, 105, 0.28) 0%, transparent 58% ); } } .hp-svc-card:hover .hp-svc-card__img::after { opacity: 0.55; } /* The veil element the old design needed has nothing left to do */ .hp-svc-card__bg { display: none; } /* A small marker over the photo instead of a 2.6rem numeral bleached into the gradient. The photo is at the inline start of both card shapes, so one position works for each. */ .hp-svc-card__index { position: absolute; z-index: 2; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); inset-inline-end: auto; display: grid; place-items: center; min-width: 30px; padding: 0.2rem 0.45rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--brand-800); font-size: 0.72rem; font-weight: 800; letter-spacing: 0; line-height: 1.4; } .hp-svc-card__inner { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: auto; padding: clamp(var(--sp-4), 1.8vw, var(--sp-5)); } .hp-svc-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-block-end: var(--sp-3); border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--tone) 11%, var(--surface)); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--tone-deep); font-size: 1.15rem; } @supports not (color: color-mix(in srgb, red 50%, blue)) { .hp-svc-icon { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-700); } } /* `fx-ico` fills the tile with the brand gradient on hover, so the icon only needs to hand over its own colour. */ .hp-svc-card:hover .hp-svc-icon { background: var(--grad-brand); border-color: transparent; color: #fff; } .hp-svc-card--stack .hp-svc-icon { width: 38px; height: 38px; margin-block-end: var(--sp-2); font-size: 0.95rem; } .hp-svc-card__title { color: var(--ink); margin-block-end: var(--sp-2); } .hp-svc-card--lead .hp-svc-card__title { font-size: var(--fs-lg); } .hp-svc-card--stack .hp-svc-card__title { font-size: var(--fs-base); } .hp-svc-card__desc { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin-block-end: var(--sp-4); } /* Only the lead tile has room for the full description and every pill */ .hp-svc-card--stack .hp-svc-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-block-end: var(--sp-3); font-size: var(--fs-xs); } .hp-svc-card__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-4); } .hp-svc-card--stack .hp-svc-card__pills { flex-wrap: nowrap; overflow: hidden; margin-block-end: var(--sp-3); } .hp-svc-card--stack .hp-svc-card__pills .svc-pill:nth-child(n + 3) { display: none; } .svc-pill { padding: 0.28rem 0.7rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--mist-100); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } /* ── Calls to action, weighted by card size ── The lead gets the only filled button in the section; the small cards get a text link, so the eye is told where to start. */ .hp-svc-card__cta { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; margin-block-start: auto; padding: 0.6rem 1.15rem; border-radius: var(--r-pill); background: var(--brand-700); color: #fff; font-size: var(--fs-xs); font-weight: 700; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp-svc-card:hover .hp-svc-card__cta { background: var(--brand-800); box-shadow: var(--sh-brand); } .hp-svc-card--stack .hp-svc-card__cta { padding: 0; border-radius: 0; background: none; color: var(--brand-700); box-shadow: none; } .hp-svc-card--stack:hover .hp-svc-card__cta { background: none; box-shadow: none; color: var(--brand-800); } [dir="ltr"] .hp-svc-card__cta .fx-arrow { transform: scaleX(-1); } @media (max-width: 900px) { .hp-svc__bento { grid-template-columns: 1fr; } .hp-svc-card--lead, .hp-svc-card--stack { grid-column: 1; grid-row: auto; } .hp-svc-card--lead { min-height: 0; } .hp-svc-card--stack { min-height: 190px; } } @media (max-width: 520px) { /* Below this the side photo leaves the copy about 180px, which breaks the title over four lines. Stack it like the lead card instead. */ .hp-svc-card--stack { flex-direction: column; min-height: 0; } .hp-svc-card--stack .hp-svc-card__img { flex: 0 0 auto; width: 100%; height: 170px; } .hp-svc-card--stack .hp-svc-card__desc { font-size: var(--fs-sm); } } @media (prefers-reduced-motion: reduce) { .hp-svc-card__img::after, .hp-svc-card__cta { transition: none; } } /* ═════════════════════════════════════════════ 3. LATEST CVs ═════════════════════════════════════════════ */ .hp-latest { padding-block: var(--section-y); } .hp-latest--recruitment { background: var(--surface); } .hp-latest--rental { background: var(--surface-alt); } .hp-latest--combined { background: var(--surface); } .hp-latest__slider-wrap { position: relative; padding-inline: clamp(0px, 2vw, 56px); } .hp-latest .swiper { padding-block-end: var(--sp-6); } .hp-latest .swiper-slide { height: auto; } .hp-latest-nav { position: absolute; inset-block-start: 42%; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand-700); cursor: pointer; box-shadow: var(--sh-2); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp-latest-nav:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); } .hp-latest-nav--left { left: 0; } .hp-latest-nav--right { right: 0; } .hp-latest-nav.swiper-button-disabled { opacity: 0.35; pointer-events: none; } @media (max-width: 1100px) { .hp-latest-nav { display: none; } .hp-latest__slider-wrap { padding-inline: 0; } } .hp-latest-pagination { display: flex; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-2); } .hp-latest-pagination .swiper-pagination-bullet, .hp-partners .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--brand-200); opacity: 1; transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .hp-latest-pagination .swiper-pagination-bullet-active, .hp-partners .swiper-pagination-bullet-active { width: 26px; background: var(--brand-600); } .hp-latest__more { margin-block-start: var(--sp-6); text-align: center; } .hp-latest__more i, .hp-latest-card__foot span i { transition: transform var(--dur-base) var(--ease-out); } [dir="ltr"] .hp-latest__more i, [dir="ltr"] .hp-latest-card__foot span i { transform: scaleX(-1); } .hp-latest__more a:hover i { transform: translateX(-5px); } [dir="ltr"] .hp-latest__more a:hover i { transform: scaleX(-1) translateX(-5px); } .hp-latest__empty { padding: var(--sp-8); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); text-align: center; } /* ── Latest maid card ───────────────────────────────────────────────── Same card for every worker — no featured variant. The change is where the content lives: identity over the photo, specs as a labelled grid so nothing truncates, and price on its own bar because it is the decision. ------------------------------------------------------------------- */ .hp-latest-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); } .hp-latest-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-alt); } .hp-latest-card__media img { width: 100%; height: 100%; object-fit: cover; } .hp-latest-card__pdf { display: block; width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none; } /* Scrim so the name stays readable over any photo */ .hp-latest-card__media::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 58%; background: linear-gradient( to top, rgba(20, 6, 45, 0.9) 0%, rgba(20, 6, 45, 0.5) 45%, transparent 100% ); } .hp-latest-card__code, .hp-latest-card__tag { position: absolute; inset-block-start: var(--sp-3); z-index: 2; padding: 0.26rem 0.66rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; backdrop-filter: blur(6px); } .hp-latest-card__code { inset-inline-start: var(--sp-3); /* bordered, because a white chip vanishes against a light photo */ background: rgba(255, 255, 255, 0.94); border: 1px solid var(--brand-200); color: var(--brand-800); box-shadow: var(--sh-1); direction: ltr; } .hp-latest-card__tag { inset-inline-end: var(--sp-3); background: color-mix(in srgb, var(--brand-600) 88%, transparent); color: #fff; } .hp-latest-card__tag--egar { background: rgba(246, 145, 30, 0.94); } .hp-latest-card__ident { position: absolute; inset-inline: var(--sp-4); inset-block-end: var(--sp-3); z-index: 2; display: flex; flex-direction: column; gap: 2px; } .hp-latest-card__ident strong { color: #fff; font-size: var(--fs-md); line-height: 1.25; } .hp-latest-card__ident em { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.78); font-size: var(--fs-xs); font-style: normal; } .hp-latest-card__ident em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-500); } /* ── Spec grid ── */ .hp-latest-card__body { flex: 1; padding: var(--sp-4); } .hp-latest-card__spec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-3); margin: 0; } .hp-latest-card__spec > div { min-width: 0; } .hp-latest-card__spec dt { margin: 0 0 2px; color: var(--muted-light); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .hp-latest-card__spec dd { margin: 0; color: var(--ink); font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } /* ── Price bar ── */ .hp-latest-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--line); background: var(--brand-50); } .hp-latest-card__pricewrap { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .hp-latest-card__pricewrap em { color: var(--muted); font-size: 0.68rem; font-style: normal; font-weight: 600; } .hp-latest-card__pricewrap strong { color: var(--brand-800); font-size: var(--fs-md); font-weight: 800; } .hp-latest-card__go { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; padding: 0.5rem 0.95rem; border-radius: var(--r-pill); background: var(--brand-600); color: #fff; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out); } [dir="ltr"] .hp-latest-card__go .fx-arrow { transform: scaleX(-1); } .hp-latest-card:hover .hp-latest-card__go { background: var(--brand-800); } /* ═════════════════════════════════════════════ 4. SHOWCASE — the revived slider, mid-page ═════════════════════════════════════════════ */ .hp-showcase { padding-block: var(--section-y); background: var(--surface); } .hp-showcase__wrap { position: relative; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--sh-3); } .hp-showcase .swiper-slide { position: relative; display: flex; align-items: flex-end; min-height: clamp(320px, 42vw, 460px); isolation: isolate; } .hp-showcase__bg { position: absolute; inset: 0; z-index: -2; } .hp-showcase__bg img { width: 100%; height: 100%; object-fit: cover; } /* Runs from the text side outward, so the copy always sits on a dark field */ .hp-showcase__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(20, 6, 45, 0.94) 0%, rgba(30, 20, 70, 0.88) 38%, rgba(47, 11, 105, 0.5) 68%, rgba(47, 11, 105, 0.18) 100% ); } [dir="ltr"] .hp-showcase__veil { background: linear-gradient( 270deg, rgba(20, 6, 45, 0.94) 0%, rgba(30, 20, 70, 0.88) 38%, rgba(47, 11, 105, 0.5) 68%, rgba(47, 11, 105, 0.18) 100% ); } .hp-showcase__body { max-width: 560px; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); padding-block-end: clamp(3.5rem, 2rem + 4vw, 5rem); color: #fff; } .hp-showcase__title { color: #fff; font-size: var(--fs-xl); margin-block-end: var(--sp-3); text-wrap: balance; } .hp-showcase__text { white-space: pre-line; color: rgba(255, 255, 255, 0.82); font-size: var(--fs-sm); line-height: var(--lh-snug); margin-block-end: var(--sp-5); } .hp-showcase-nav { position: absolute; inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5); z-index: 6; display: flex; gap: 6px; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--r-pill); background: rgba(20, 6, 45, 0.62); box-shadow: 0 10px 26px rgba(10, 3, 26, 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hp-showcase-nav button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); color: #fff; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .hp-showcase-nav button:hover { background: #fff; color: var(--brand-800); transform: translateY(-2px); } .hp-showcase-pagination { position: absolute; inset-block-end: calc(var(--sp-5) + 14px); inset-inline-start: clamp(1.75rem, 1rem + 3vw, 3.5rem); z-index: 6; display: flex; align-items: center; gap: var(--sp-2); min-height: 42px; padding-inline: 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--r-pill); background: rgba(20, 6, 45, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hp-showcase-pagination .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.45); opacity: 1; transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .hp-showcase-pagination .swiper-pagination-bullet-active { width: 26px; background: var(--accent-500); } @media (max-width: 640px) { .hp-showcase__veil { background: linear-gradient( 180deg, rgba(20, 6, 45, 0.5) 0%, rgba(47, 11, 105, 0.93) 70% ); } [dir="ltr"] .hp-showcase__veil { background: linear-gradient( 180deg, rgba(20, 6, 45, 0.5) 0%, rgba(47, 11, 105, 0.93) 70% ); } .hp-showcase-nav { inset-block-end: var(--sp-3); inset-inline-end: var(--sp-3); display: flex; } .hp-showcase-nav button { width: 40px; height: 40px; } .hp-showcase-pagination { inset-block-end: calc(var(--sp-3) + 4px); inset-inline-start: var(--sp-3); min-height: 42px; padding-inline: 10px; } .hp-showcase__body { padding-block-end: 5.5rem; } } /* ═════════════════════════════════════════════ 5. ABOUT — sticky narrative The media column pins; the story scrolls past it. Milestones sit on a connector line and light up as they enter view. ═════════════════════════════════════════════ */ .hp-about { padding-block: var(--section-y); } .hp-about__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start; } /* ── Pinned column ── */ .hp-about__stick { position: sticky; /* clear the sticky site header */ top: calc(var(--header-h) + var(--sp-5)); } .hp-about__frame { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-2xl) var(--r-2xl) 180px 180px; overflow: hidden; box-shadow: var(--sh-4); } .hp-about__frame img { width: 100%; height: 100%; object-fit: cover; } .hp-about__frame-ring { position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-xl) var(--r-xl) 172px 172px; pointer-events: none; } .hp-about__help { display: flex; align-items: flex-start; gap: var(--sp-3); margin-block-start: calc(var(--sp-7) * -1); margin-inline: var(--sp-4) 0; position: relative; z-index: 2; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-4); } .hp-about__help-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--r-md); background: var(--grad-brand); color: #fff; font-size: 1.15rem; } .hp-about__help-copy { display: flex; flex-direction: column; min-width: 0; } .hp-about__help-copy strong { color: var(--ink); font-size: var(--fs-sm); } .hp-about__help-copy em { color: var(--muted); font-size: var(--fs-xs); font-style: normal; margin-block-end: 2px; } .hp-about__help-copy a { color: var(--brand-600); font-size: var(--fs-sm); font-weight: 800; direction: ltr; align-self: flex-start; } /* ── Story column ── */ .hp-about__prose { margin-block-end: var(--sp-8); color: var(--muted); font-size: var(--fs-base); line-height: var(--lh-normal); } .hp-about__prose p { margin-block-end: var(--sp-4); } /* ── Milestones on a connector line ── */ .hp-about__milestones { position: relative; margin: 0; padding: 0; list-style: none; } /* The line runs up the centre of the numeral column. The numerals sit on it as opaque stations — no separately positioned node element, so there is nothing to drift out of alignment. */ .hp-about__milestones::before { content: ""; position: absolute; inset-block: 28px; inset-inline-start: 31px; width: 2px; background: repeating-linear-gradient( to bottom, var(--lav-300) 0 7px, transparent 7px 15px ); } .hp-about__milestone { position: relative; display: flex; align-items: center; gap: var(--sp-4); padding-block: var(--sp-5); } .hp-about__milestone + .hp-about__milestone { border-block-start: 1px solid var(--line); } /* The numeral IS the station: opaque, so it breaks the dashed line behind */ .hp-about__mnum { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); color: var(--lav-500); font-size: var(--fs-lg); font-weight: 800; line-height: 1; letter-spacing: -0.02em; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp-about__milestone.is-active .hp-about__mnum { color: var(--tone-ink); background: var(--tone); border-color: var(--tone); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 14%, transparent); } .hp-about__mbody { color: var(--ink); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-snug); } @media (max-width: 940px) { .hp-about__grid { grid-template-columns: 1fr; } /* No pinning once the columns stack — there is nothing to pin against */ .hp-about__stick { position: static; width: min(100%, 540px); max-width: none; margin-inline: auto; } .hp-about__frame { aspect-ratio: 5 / 4; border-radius: var(--r-2xl) var(--r-2xl) 120px 120px; } } @media (max-width: 560px) { .hp-about__milestones::before { inset-inline-start: 25px; } .hp-about__mnum { flex: 0 0 52px; width: 52px; height: 52px; font-size: var(--fs-md); } .hp-about__help { margin-inline: 0; } } /* ═════════════════════════════════════════════ 6. NATIONALITIES A dark band laid over a viewport-pinned image: it holds still while the section scrolls across it (`background-attachment: fixed`), which reads as parallax without a line of scroll JS. Each card shows its flag, its country and its recruitment figures at the same time. An earlier revision slid the figures in on hover only, which a touch screen cannot reproduce — hover now only adds emphasis: lift, zoom, a light sweep and a tone glow. ═════════════════════════════════════════════ */ :root { /* The SVG dividers above and below the section hand off to exactly this colour, so it cannot live inside the `.hp-nat` scope. */ --nat-band: #150b2d; } .hp-nat { /* One height token: the flag panel and the name that overlays it both measure from it, so they cannot drift apart. */ --nat-media-h: clamp(126px, 11vw, 158px); --nat-card: rgba(26, 15, 51, 0.72); --nat-line: rgba(255, 255, 255, 0.1); --nat-soft: rgba(255, 255, 255, 0.66); position: relative; padding-block: var(--section-y); background: var(--nat-band); color: #fff; overflow: clip; } .hp-nat > .container { position: relative; z-index: 1; } /* ── The pinned background ────────────────────────────────────────────── */ .hp-nat__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Layers, top to bottom: brand glow, the violet ink the artwork is printed in, and the artwork itself — the only pinned layer, since pinning the gradients would drag their centres out of the section. The artwork is light paper and this band is dark, so the ink is composited with `multiply` rather than laid over as a translucent veil: the paper becomes the violet exactly, and the land, the routes and the labels survive as darker steps of that same violet. A translucent veil instead averages everything toward grey and the band stops reading as brand colour. Swap the `url()` for `map.webp` for the plain continent silhouette. */ background-image: radial-gradient(95% 62% at 50% 0%, rgba(122, 70, 219, 0.45), transparent 70%), linear-gradient(180deg, #24124687 0%, #33176a80 48%, #1a0d36a8 100%), url(../images/countries.webp); background-position: center, center, center; background-size: cover, cover, cover; background-repeat: no-repeat; background-attachment: scroll, scroll, fixed; background-blend-mode: normal, multiply, normal; } /* Without blend-mode support the opaque ink layer simply hides the artwork, leaving a plain violet band — an acceptable floor, and nothing to fix. */ /* A pinned image under a static ink is inert; two very slow drifting glows give the band a pulse without asking the compositor for much. */ .hp-nat__bg::after { content: ""; position: absolute; inset: -15%; background: radial-gradient( 36% 36% at 24% 28%, rgba(122, 70, 219, 0.34), transparent 70% ), radial-gradient( 32% 34% at 76% 72%, rgba(236, 192, 114, 0.13), transparent 72% ); animation: hp-nat-drift 24s var(--ease-in-out) infinite alternate; } @keyframes hp-nat-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.08); } } /* iOS Safari does not composite a fixed background while scrolling — it jumps and re-scales. A background that simply scrolls is the better failure. */ @media (max-width: 900px), (hover: none) { .hp-nat__bg { background-attachment: scroll, scroll, scroll; } } /* Company symbol layered into the pattern as a quiet brand watermark. */ /* .hp-nat__brandmark { position: absolute; inset-inline-end: clamp(-70px, -4vw, -28px); inset-block-start: 50%; width: clamp(280px, 30vw, 480px); aspect-ratio: 161 / 153; translate: 0 -42%; background: url("../images/icon.png") center / contain no-repeat; opacity: 0.1; filter: brightness(1.35) saturate(1.2); } */ /* ── Section head, inverted for the dark band ─────────────────────────── */ .hp-nat .sh-badge { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .hp-nat .sh-badge i { color: var(--brand-300); } .hp-nat .sh-title { color: #fff; } .hp-nat .sh-sub { color: rgba(255, 255, 255, 0.74); } .hp-nat .sh-head .sh-title::after { color: var(--brand-300); } /* ── Country showcase grid ────────────────────────────────────────────── */ .hp-nat__railwrap { position: relative; z-index: 1; margin-block-start: var(--sp-6); width: min(1240px, calc(100% - (2 * var(--container-pad)))); margin-inline: auto; } .hp-nat__rail { display: grid; /* auto-fill keeps the cards small and reflows the row rather than stretching three wide cards across the whole width */ grid-template-columns: repeat(auto-fill, minmax(clamp(208px, 17vw, 248px), 1fr)); gap: clamp(18px, 2vw, 28px); padding-block: var(--sp-4); } .hp-nat__item { min-width: 0; } /* `tone-cycle` on the rail gives each card one of the logo's four tones. Two of them (indigo, mist) are far too dark or too grey to register on this band, so the tone is mixed toward a light violet before it is used. */ .hp-nat__rail > * { --nat-accent: var(--brand-400); } @supports (color: color-mix(in srgb, red 50%, blue)) { .hp-nat__rail > * { --nat-accent: color-mix(in srgb, var(--tone) 55%, #d6c2f9); } } .hp-nat-tile { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--nat-line); border-radius: var(--r-lg); background: var(--nat-card); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); overflow: hidden; isolation: isolate; box-shadow: 0 18px 40px rgba(8, 3, 22, 0.42); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hp-nat-tile { background: rgba(26, 15, 51, 0.94); } } .hp-nat-tile:hover, .hp-nat-tile:focus-visible { transform: translateY(-8px); border-color: color-mix(in srgb, var(--nat-accent) 50%, transparent); box-shadow: 0 28px 56px rgba(8, 3, 22, 0.55), 0 12px 34px -14px var(--nat-accent); } /* Tone bar across the top: a third of the width at rest, full on hover */ .hp-nat-tile::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4; height: 3px; background: linear-gradient( 90deg, transparent, var(--nat-accent), transparent ); opacity: 0.7; transform: scaleX(0.34); transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out); } .hp-nat-tile:hover::before, .hp-nat-tile:focus-visible::before { opacity: 1; transform: scaleX(1); } /* Light sweeping across the card once, on entering hover */ .hp-nat-tile::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient( 112deg, transparent 34%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.14) 55%, transparent 66% ); background-repeat: no-repeat; background-size: 260% 100%; background-position: 150% 0; opacity: 0; } .hp-nat-tile:hover::after, .hp-nat-tile:focus-visible::after { animation: hp-nat-sheen 0.95s var(--ease-out); } @keyframes hp-nat-sheen { 0% { opacity: 0; background-position: 150% 0; } 14% { opacity: 1; } 100% { opacity: 0; background-position: -150% 0; } } /* ── Flag panel ── */ .hp-nat-tile__media { position: relative; display: block; height: var(--nat-media-h); background: #0e0622; overflow: hidden; } .hp-nat-tile__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(1.04) contrast(1.04) brightness(0.92); transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease-out); } .hp-nat-tile:hover .hp-nat-tile__media img, .hp-nat-tile:focus-visible .hp-nat-tile__media img { transform: scale(1.12); filter: saturate(1.18) contrast(1.06) brightness(1.02); } /* Grounds the name and hands the flag over to the panel below it */ .hp-nat-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(16, 7, 36, 0.95) 2%, rgba(16, 7, 36, 0.34) 44%, rgba(16, 7, 36, 0.06) 100% ); } /* ── Country name, overlaying the foot of the flag ── Pulled back over the media by its own height rather than positioned absolutely, so a name that wraps to two lines still sits on the flag and the panel below it never moves. */ .hp-nat-tile__country { position: relative; z-index: 3; display: flex; align-items: flex-end; height: var(--nat-media-h); margin-block-start: calc(var(--nat-media-h) * -1); padding: var(--sp-4); color: #fff; font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 800; line-height: 1.25; letter-spacing: 0.01em; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75); pointer-events: none; } .hp-nat-tile__country b { position: relative; display: inline-block; font-weight: inherit; } .hp-nat-tile__country b::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -0.4rem; height: 3px; border-radius: var(--r-pill); background: var(--nat-accent); /* grows from the text's own start edge — right in RTL, left in LTR */ transform-origin: 100% 50%; transform: scaleX(0.5); transition: transform 0.5s var(--ease-out); } [dir="ltr"] .hp-nat-tile__country b::after { transform-origin: 0 50%; } .hp-nat-tile:hover .hp-nat-tile__country b::after, .hp-nat-tile:focus-visible .hp-nat-tile__country b::after { transform: scaleX(1); } /* ── Details panel — always on screen, never behind an interaction ── */ .hp-nat-tile__body { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); } .hp-nat-tile__rows { display: grid; grid-template-columns: 1fr; gap: 0; } .hp-nat-tile__row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 0.45rem 0; border: 0; border-radius: 0; background: none; } .hp-nat-tile__row + .hp-nat-tile__row { border-block-start: 1px solid rgba(255, 255, 255, 0.1); } .hp-nat-tile__row > i { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--nat-accent); font-size: 0.72rem; box-shadow: none; transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-out); } .hp-nat-tile:hover .hp-nat-tile__row > i, .hp-nat-tile:focus-visible .hp-nat-tile__row > i { transform: translateY(-1px) scale(1.08); background: rgba(255, 255, 255, 0.16); } /* Label and value share one line, so a stacked row stays compact */ .hp-nat-tile__row > span { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); width: 100%; min-width: 0; } .hp-nat-tile__row small { color: var(--nat-soft); font-size: 0.68rem; white-space: nowrap; } .hp-nat-tile__row strong { color: #fff; font-size: var(--fs-xs); font-weight: 700; text-align: end; /* keep number ranges together */ white-space: nowrap; } .hp-nat-tile__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-start: auto; padding-block-start: var(--sp-3); border-block-start: 1px solid rgba(255, 255, 255, 0.12); } .hp-nat-tile__price { padding: 0; border: 0; background: none; color: var(--nat-accent); font-size: var(--fs-md); font-weight: 850; line-height: 1.1; } .hp-nat-tile__price small { color: var(--nat-soft); font-size: 0.68rem; font-weight: 600; } .hp-nat-tile__cta { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.42rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp-nat-tile:hover .hp-nat-tile__cta, .hp-nat-tile:focus-visible .hp-nat-tile__cta { border-color: transparent; background: var(--brand-600); box-shadow: var(--sh-brand); } .hp-nat-tile__cta i { transition: transform var(--dur-base) var(--ease-out); } .hp-nat-tile:hover .hp-nat-tile__cta i, .hp-nat-tile:focus-visible .hp-nat-tile__cta i { transform: translateX(-4px); } [dir="ltr"] .hp-nat-tile__cta i { transform: scaleX(-1); } [dir="ltr"] .hp-nat-tile:hover .hp-nat-tile__cta i, [dir="ltr"] .hp-nat-tile:focus-visible .hp-nat-tile__cta i { transform: scaleX(-1) translateX(-4px); } @media (max-width: 620px) { .hp-nat__rail { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--sp-4); } .hp-nat__brandmark { display: none; } /* At two narrow columns there is not enough width for label and value to share a line, and ellipsising a price is worse than wrapping it. */ .hp-nat-tile__row > span { display: grid; justify-content: start; gap: 0; } .hp-nat-tile__row strong { text-align: start; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .hp-nat__bg { background-attachment: scroll, scroll, scroll; } .hp-nat__bg::after, .hp-nat-tile:hover::after, .hp-nat-tile:focus-visible::after { animation: none; } .hp-nat-tile, .hp-nat-tile__media img, .hp-nat-tile__country b::after, .hp-nat-tile__row > i, .hp-nat-tile__cta, .hp-nat-tile__cta i { transition: none; } .hp-nat-tile:hover, .hp-nat-tile:focus-visible { transform: none; } } /* ═════════════════════════════════════════════ 7. WHY CHOOSE US — numbered editorial list No cards, no boxes. Two columns of numbered rows separated by hairlines, with the index numeral carrying the item's cycled tone. ═════════════════════════════════════════════ */ /* The section had no padding-block-start at all: the rewrite that turned this section into an editorial list replaced the `.hp-why` base rule and never restored it, so the heading sat hard against the section above. (padding-block-end is supplied by `section:has(+ .sec-divider)`.) */ .hp-why { padding-block-start: calc(var(--section-y) + var(--sp-7)); } .hp-why__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 1rem + 4vw, 5rem); margin: 0; padding: 0; list-style: none; counter-reset: why; } .hp-why__row { display: flex; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-5); border-block-end: 1px solid var(--line); } /* Drop the rule under the last row of each column */ .hp-why__row:nth-last-child(-n + 2):nth-child(odd), .hp-why__row:last-child { border-block-end: 0; } .hp-why__num { flex: 0 0 auto; min-width: 2.6ch; color: var(--tone); font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.9rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; opacity: 0.9; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .hp-why__row:hover .hp-why__num { opacity: 1; transform: translateY(-3px); } .hp-why__copy h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); margin-block-end: var(--sp-2); } /* A short tone-coloured rule after the title instead of a card border */ .hp-why__copy h3::after { content: ""; flex: 0 0 28px; height: 2px; border-radius: var(--r-pill); background: var(--tone); opacity: 0.55; transition: flex-basis var(--dur-base) var(--ease-out); } .hp-why__row:hover .hp-why__copy h3::after { flex-basis: 52px; } .hp-why__copy p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); } @media (max-width: 820px) { .hp-why__list { grid-template-columns: 1fr; } .hp-why__row:nth-last-child(-n + 2):nth-child(odd) { border-block-end: 1px solid var(--line); } .hp-why__row:last-child { border-block-end: 0; } } /* ═════════════════════════════════════════════ 8. STATISTICS ═════════════════════════════════════════════ */ .hp-stats { position: relative; padding-block: var(--section-y); background: var(--grad-brand); overflow: hidden; isolation: isolate; } .hp-stats::before, .hp-stats::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; } .hp-stats::before { inset-block-start: -30%; inset-inline-start: -6%; width: 460px; height: 460px; background: radial-gradient( circle, rgba(255, 255, 255, 0.12), transparent 62% ); } .hp-stats::after { inset-block-end: -35%; inset-inline-end: -6%; width: 400px; height: 400px; background: radial-gradient( circle, rgba(224, 169, 60, 0.2), transparent 62% ); } .hp-stats .sh-badge { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.14); color: #fff; } .hp-stats .sh-badge i { color: var(--accent-400); } .hp-stats .sh-title { color: #fff; } .hp-stats .sh-sub { color: rgba(255, 255, 255, 0.75); } .hp-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--sp-4); } .hp-stat-card { padding: var(--sp-6) var(--sp-4); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); text-align: center; transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .hp-stat-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.14); } .hp-stat-card__ico { display: block; margin-block-end: var(--sp-3); color: var(--accent-400); font-size: 1.7rem; } .hp-stat-card__num { display: block; margin-block-end: var(--sp-2); color: #fff; font-size: var(--fs-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; } .hp-stat-card__lbl { color: rgba(255, 255, 255, 0.75); font-size: var(--fs-sm); } /* ═════════════════════════════════════════════ 9. PROCESS / REQUIREMENTS ═════════════════════════════════════════════ */ .hp-proc { padding-block: var(--section-y); background: var(--canvas); } .hp-proc__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); width: fit-content; margin-inline: auto; margin-block-end: var(--sp-7); padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1); } .hp-proc__tab { padding: 0.7rem 1.6rem; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .hp-proc__tab:hover { color: var(--brand-700); } .hp-proc__tab.active { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); } .hp-proc__panel { display: none; } .hp-proc__panel.active { display: block; } .hp-proc__steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-5); } /* Dashed connector behind the step cards on wide screens */ @media (min-width: 992px) { .hp-proc__steps::before { content: ""; position: absolute; inset-block-start: 58px; inset-inline: 10%; height: 2px; background: repeating-linear-gradient( to right, var(--brand-200) 0 10px, transparent 10px 20px ); } } .hp-proc-step { position: relative; padding: var(--sp-6) var(--sp-5) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: center; box-shadow: var(--sh-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp-proc-step:hover { transform: translateY(-6px); box-shadow: var(--sh-3); } .hp-proc-step__num { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-4); color: var(--lav-200); font-size: 2rem; font-weight: 800; line-height: 1; transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } /* Driven by scroll position, so it reverses on the way back up */ .hp-proc-step.is-active .hp-proc-step__num { color: var(--tone); } .hp-proc-step__ico { display: grid; place-items: center; width: 62px; height: 62px; margin-inline: auto; margin-block-end: var(--sp-4); border: 4px solid var(--canvas); border-radius: 50%; background: var(--lav-300); color: #fff; font-size: 1.3rem; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-spring); } .hp-proc-step.is-active .hp-proc-step__ico { background: var(--tone); box-shadow: 0 8px 22px color-mix(in srgb, var(--tone) 38%, transparent); scale: 1.06; } .hp-proc-step h4 { font-size: var(--fs-base); margin-block-end: var(--sp-2); } .hp-proc-step p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin: 0; } /* ═════════════════════════════════════════════ 10. CUSTOMER SERVICE AGENTS ═════════════════════════════════════════════ */ .hp-agents { padding-block: var(--section-y); background: var(--surface-alt); } .hp-agents__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-5); } .hp-agent-card { padding: var(--sp-6) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: center; box-shadow: var(--sh-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hp-agent-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); } .hp-agent-card__ava { display: grid; place-items: center; width: 76px; height: 76px; margin-inline: auto; margin-block-end: var(--sp-4); border-radius: 50%; background: var(--grad-brand-soft); color: var(--brand-600); font-size: 1.7rem; } .hp-agent-card__name { font-size: var(--fs-md); margin-block-end: 2px; } .hp-agent-card__role { color: var(--muted); font-size: var(--fs-xs); margin-block-end: var(--sp-3); } .hp-agent-stars { display: flex; justify-content: center; gap: 3px; margin-block-end: var(--sp-4); color: var(--accent-500); font-size: 0.8rem; } .hp-agent-card__btns { display: flex; justify-content: center; gap: var(--sp-3); } .hp-agent-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 1.1rem; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .hp-agent-btn:hover { color: #fff; transform: translateY(-3px); } .hp-agent-btn.wa { background: #25d366; } .hp-agent-btn.wa:hover { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); } .hp-agent-btn.tel { background: var(--grad-brand); } .hp-agent-btn.tel:hover { box-shadow: var(--sh-brand); } /* ═════════════════════════════════════════════ 11. CTA BANNER ═════════════════════════════════════════════ */ .hp-cta { padding-block: var(--section-y); background: var(--canvas); } .hp-cta__inner { position: relative; padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem); border-radius: var(--r-2xl); background: var(--grad-brand); text-align: center; overflow: hidden; isolation: isolate; box-shadow: var(--sh-4); } /* CTA ornaments should read clearly against the dark brand gradient. */ .hp-cta__inner .orn-mandala { opacity: 0.22; } .hp-cta__inner .orn-corner { opacity: 0.24; } .hp-cta__inner::before, .hp-cta__inner::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; } .hp-cta__inner::before { inset-block-start: -45%; inset-inline-start: -5%; width: 380px; height: 380px; background: radial-gradient( circle, rgba(255, 255, 255, 0.16), transparent 62% ); animation: ds-drift 16s var(--ease-in-out) infinite alternate; } .hp-cta__inner::after { inset-block-end: -45%; inset-inline-end: -5%; width: 340px; height: 340px; background: radial-gradient( circle, rgba(224, 169, 60, 0.24), transparent 62% ); animation: ds-drift 20s var(--ease-in-out) infinite alternate-reverse; } .hp-cta__badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.45rem 1.05rem; margin-block-end: var(--sp-4); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); color: #fff; font-size: var(--fs-xs); font-weight: 700; } .hp-cta__h2 { color: #fff; font-size: var(--fs-2xl); margin-block-end: var(--sp-4); text-wrap: balance; } .hp-cta__sub { max-width: 62ch; margin-inline: auto; margin-block-end: var(--sp-6); color: rgba(255, 255, 255, 0.82); font-size: var(--fs-md); line-height: var(--lh-snug); } .hp-cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); } .hp-cta__btn-w, .hp-cta__btn-o { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.95rem 2rem; border: 1.5px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .hp-cta__btn-w { background: #fff; color: var(--brand-800); } .hp-cta__btn-w:hover { color: var(--brand-900); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255, 255, 255, 0.28); } .hp-cta__btn-o { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); color: #fff; backdrop-filter: blur(10px); } .hp-cta__btn-o:hover { background: rgba(255, 255, 255, 0.22); color: #fff; transform: translateY(-3px); } /* ═════════════════════════════════════════════ 12. PARTNERS ═════════════════════════════════════════════ */ .hp-partners { padding-block: var(--section-y); background: var(--surface); } .hp-partners .sh-head { margin-block-end: var(--sp-6); } .hp-partners .sh-title { font-size: var(--fs-lg); } .hp-partners .swiper { /* fade the edges so the strip reads as continuous */ -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } .hp-partners .swiper-wrapper { align-items: center; } .referenceLogo { display: grid; place-items: center; height: 92px; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .referenceLogo img { max-height: 52px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .referenceLogo:hover { transform: translateY(-4px); border-color: var(--brand-200); box-shadow: var(--sh-2); } .referenceLogo:hover img { filter: grayscale(0); opacity: 1; } .hp-partners .swiper-pagination { position: static; display: flex; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-5); } /* ═════════════════════════════════════════════ 13. CONTACT ═════════════════════════════════════════════ */ .hp-contact { padding-block: var(--section-y); background: var(--grad-brand-soft); } .hp-contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .hp-contact-info h2 { font-size: var(--fs-2xl); margin-block-end: var(--sp-3); } .hp-contact-info > p { margin-block-end: var(--sp-6); color: var(--muted); line-height: var(--lh-normal); } .hp-cinfo-item { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); margin-block-end: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .hp-cinfo-item:hover { transform: translateY(-3px); border-color: var(--brand-200); box-shadow: var(--sh-2); } .hp-cinfo-item__ico { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: var(--r-md); background: var(--grad-brand-soft); color: var(--brand-600); font-size: 1.05rem; } .hp-cinfo-item h6 { font-size: var(--fs-sm); margin-block-end: 2px; } .hp-cinfo-item p { margin: 0; color: var(--muted); font-size: var(--fs-sm); word-break: break-word; } /* ── Form ── */ .hp-cform-wrap { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-3); } .hp-fg { margin-block-end: var(--sp-4); } .hp-fg label { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; } .hp-fg label i { color: var(--brand-500); font-size: 0.85em; } .hp-fc { width: 100%; padding: 0.85rem 1.1rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--fs-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .hp-fc:hover { border-color: var(--brand-300); } .hp-fc:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-100); } textarea.hp-fc { min-height: 130px; resize: vertical; } .hp-frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); } .service-request-captcha { display: flex; justify-content: center; overflow-x: auto; } /* reCAPTCHA always renders LTR, regardless of page direction */ .service-request-captcha > div { direction: ltr; } /* ═════════════════════════════════════════════ QUICK SERVICE SELECTOR ═════════════════════════════════════════════ */ .hp-quick { position: relative; z-index: 1; margin-block-start: 0; padding-block-start: clamp(2.5rem, 5vw, 4.5rem); padding-block-end: var(--sp-9); background: var(--canvas); } .hp-quick__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--brand-100); border-radius: var(--r-xl); background: var(--brand-100); overflow: hidden; box-shadow: 0 14px 36px rgba(78, 45, 155, 0.1); } .hp-quick__tile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); background: var(--brand-50); color: var(--brand-900); min-width: 0; } .hp-quick__tile:hover { color: var(--brand-800); /* the bar clips its children, so lift without moving out of the frame */ transform: none; box-shadow: none; background: var(--surface); } .hp-quick__ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--r-md); background: var(--surface); color: var(--brand-600); font-size: 1.35rem; } .hp-quick__body { display: flex; flex-direction: column; min-width: 0; } .hp-quick__label { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; } .hp-quick__desc { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hp-quick__arrow { margin-inline-start: auto; flex: 0 0 auto; color: var(--brand-300); font-size: 0.85rem; } [dir="ltr"] .hp-quick__arrow { transform: scaleX(-1); } .hp-quick__tile:hover .hp-quick__arrow { color: var(--brand-600); } @media (max-width: 1100px) { .hp-quick__bar { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .hp-quick { margin-block-start: 0; padding-block-start: var(--sp-7); padding-block-end: var(--sp-7); } .hp-quick__bar { grid-template-columns: 1fr; } .hp-quick__desc { -webkit-line-clamp: 1; } } /* ═════════════════════════════════════════════ ORNAMENT HOSTING per section ═════════════════════════════════════════════ */ .hp .orn-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hp .orn-host > .container, .hp .orn-host > .sh-head { position: relative; z-index: 1; } /* The nationalities blob is now a real ornament — drop the old radial */ .hp-nat::before { content: none; } /* Stats keeps its soft glows behind the ornaments */ .hp-stats::before, .hp-stats::after { z-index: 0; } /* Section title flourish, applied without touching every blade heading */ .hp .sh-head .sh-title::after { content: ""; display: block; width: 150px; height: 22px; margin-inline: auto; margin-block-start: var(--sp-3); background: currentColor; color: var(--brand-300); -webkit-mask: url("../images/patterns/flourish.svg") center / contain no-repeat; mask: url("../images/patterns/flourish.svg") center / contain no-repeat; } .hp-stats .sh-head .sh-title::after { color: var(--accent-400); } /* Bands that a divider flows into must not clip it */ .hp-svc, .hp-showcase, .hp-about, .hp-nat, .hp-why, .hp-stats, .hp-proc, .hp-agents, .hp-partners, .hp-contact { overflow: clip; } /* Backgrounds retuned so each divider has a band to hand off to. `.hp-nat` is deliberately absent: it owns its own dark band (section 6). */ .hp-contact { background: var(--brand-50); } .hp-latest--rental { background: var(--surface-alt); } /* ═════════════════════════════════════════════════════════════════════════ MUSANED RECORD — office performance + beneficiary ratings The figures are published on the government platform, so this section is evidence rather than marketing: a white band, the brand violet on every number and meter, and gold reserved for the two things the platform itself calls gold — the rating class and the stars. Everything animates off the site-wide engine in app.js: `data-count` rolls the percentages up, `data-progress` fills the meters, `data-reveal` brings the cards in, and the stars pop only once their card is `.is-in`. ═════════════════════════════════════════════════════════════════════════ */ .hp-msr { position: relative; padding-block: var(--section-y); background: var(--surface); overflow: clip; } /* The Musaned wordmark inside the section badge */ .hp-msr-badge__logo { height: 16px; width: auto; } .hp-msr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); } .hp-msr-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(var(--sp-4), 2vw, var(--sp-5)); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-2); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .hp-msr-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-3); } /* Hairline of brand colour along the top edge of every card */ .hp-msr-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--grad-brand); } .hp-msr-card--office { grid-column: 1 / -1; } .hp-msr-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .hp-msr-card__head h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--ink); font-size: var(--fs-md); font-weight: 800; } .hp-msr-card__head h3 i { color: var(--brand-600); } .hp-msr-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.34rem 0.8rem; border: 1px solid var(--brand-200); border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-800); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; } .hp-msr-chip i { color: var(--brand-600); } /* Gold is the platform's own word for this grade, so it is the one place the accent is allowed to lead. */ .hp-msr-chip--gold { position: relative; border-color: transparent; background: var(--grad-accent); color: #4a3208; overflow: hidden; } .hp-msr-chip--gold i { color: #6b4708; } .hp-msr-chip--gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 112deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62% ); background-size: 260% 100%; background-repeat: no-repeat; animation: msr-shimmer 4.5s var(--ease-in-out) infinite; } @keyframes msr-shimmer { 0%, 62% { background-position: 160% 0; } 100% { background-position: -160% 0; } } /* ── Performance card ── */ .hp-msr-card__body { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--sp-4); } .hp-msr-class { display: grid; place-content: center; justify-items: center; gap: 0.15rem; padding: var(--sp-4) var(--sp-3); border: 1px solid rgba(224, 169, 60, 0.42); border-radius: var(--r-lg); background: linear-gradient(160deg, #fdf3e0 0%, #f7e3bd 100%); text-align: center; } .hp-msr-class__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-block-end: var(--sp-2); border-radius: 50%; background: var(--grad-accent); color: #fff; font-size: 1.15rem; box-shadow: var(--sh-accent); animation: msr-medal 3.2s var(--ease-in-out) infinite; } @keyframes msr-medal { 0%, 72%, 100% { transform: rotate(0) scale(1); } 78% { transform: rotate(-9deg) scale(1.06); } 86% { transform: rotate(7deg) scale(1.06); } } .hp-msr-class strong { color: #6b4708; font-size: var(--fs-md); font-weight: 850; } .hp-msr-class small { color: #8a6420; font-size: var(--fs-xs); } .hp-msr-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .hp-msr-metric { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--brand-50); } .hp-msr-metric__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .hp-msr-metric__top i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--brand-600); font-size: 0.8rem; box-shadow: var(--sh-1); } .hp-msr-metric__top b { color: var(--brand-800); font-size: var(--fs-lg); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; } .hp-msr-metric__lbl { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; } .hp-msr-meter { display: block; height: 5px; border-radius: var(--r-pill); background: var(--brand-100); overflow: hidden; } .hp-msr-meter > i { display: block; height: 100%; /* app.js sets --value from data-progress once the meter is in view */ width: calc(var(--value, 0) * 1%); border-radius: inherit; background: var(--grad-brand); transition: width 1.4s var(--ease-out); } /* ── Reviews card ── */ .hp-msr-reviews { margin: 0; padding: 0; list-style: none; } .hp-msr-review { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-3); } .hp-msr-review + .hp-msr-review { border-block-start: 1px solid var(--line); } .hp-msr-review__lbl { display: grid; gap: 0.15rem; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; } .hp-msr-review__lbl small { color: var(--muted-light); font-size: 0.68rem; font-weight: 500; line-height: 1.4; } .hp-msr-score { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } .hp-msr-score > b { min-width: 2.1rem; color: var(--brand-800); font-size: var(--fs-sm); font-weight: 850; font-variant-numeric: tabular-nums; text-align: end; } /* Fractional ratings: a grey strip with a gold copy clipped over it, rather than one per whole star. 4.5 is then a real half star and any decimal the platform publishes renders as-is. */ .hp-msr-stars { position: relative; display: inline-block; font-size: 0.95rem; line-height: 1; white-space: nowrap; } .hp-msr-stars__row { display: block; color: var(--line-strong); } .hp-msr-stars__row--fill { position: absolute; inset-block-start: 0; /* Anchored at the inline start, so the fill grows right-to-left in Arabic and left-to-right in English with no per-direction rule. */ inset-inline-start: 0; width: var(--fill, 0%); overflow: hidden; color: var(--accent-500); } /* No gap between the stars: the fill is a percentage of the whole strip, so every star must occupy an identical slice of it. The breathing room is padding inside each star instead, which the percentage can divide evenly. */ .hp-msr-stars i { padding-inline: 0.075rem; } /* The stars land one after another, but only once the card itself has been revealed — otherwise they would have finished before anyone scrolled here. */ .hp-msr-card[data-reveal].is-in .hp-msr-stars i { animation: msr-star 0.5s var(--ease-spring) backwards; animation-delay: calc(var(--s, 0) * 80ms + 260ms); } @keyframes msr-star { from { opacity: 0; transform: scale(0.4) rotate(-35deg); } to { opacity: 1; transform: scale(1) rotate(0); } } .hp-msr-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-block-start: auto; padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); } .hp-msr-rate { display: grid; gap: 0.15rem; padding: var(--sp-3); border-radius: var(--r-md); background: var(--brand-50); text-align: center; } .hp-msr-rate strong { color: var(--brand-700); font-size: var(--fs-lg); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; } .hp-msr-rate span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; } /* ── Office card ── */ .hp-msr-office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(var(--sp-4), 2vw, var(--sp-6)); align-items: stretch; } .hp-msr-office__info { display: flex; flex-direction: column; gap: var(--sp-3); } .hp-msr-office__note { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); } .hp-msr-facts { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .hp-msr-facts > li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist-100); } .hp-msr-facts > li > i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--surface); color: var(--brand-600); box-shadow: var(--sh-1); } .hp-msr-facts > li > span { display: grid; gap: 0.1rem; min-width: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; word-break: break-word; } .hp-msr-facts small { color: var(--muted-light); font-size: 0.68rem; font-weight: 500; } .hp-msr-facts a { color: inherit; text-decoration: none; } .hp-msr-facts a:hover { color: var(--brand-700); } /* Outlined rather than filled: the Musaned wordmark keeps its own colours, which a violet fill would fight. */ .hp-msr-btn { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; margin-block-start: auto; padding: 0.7rem 1.15rem; border: 1px solid var(--brand-200); border-radius: var(--r-pill); background: var(--surface); color: var(--brand-800); font-size: var(--fs-sm); font-weight: 800; text-decoration: none; box-shadow: var(--sh-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .hp-msr-btn img { height: 18px; width: auto; } .hp-msr-btn i { color: var(--brand-600); font-size: 0.75rem; transition: transform var(--dur-base) var(--ease-out); } .hp-msr-btn:hover { transform: translateY(-2px); border-color: var(--brand-400); background: var(--brand-50); box-shadow: var(--sh-2); } .hp-msr-btn:hover i { transform: translate(-2px, -2px); } [dir="ltr"] .hp-msr-btn:hover i { transform: translate(2px, -2px); } .hp-msr-office__map { position: relative; min-height: 240px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--mist-200); overflow: hidden; } .hp-msr-office__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.92); } @media (max-width: 900px) { .hp-msr__grid { grid-template-columns: 1fr; } .hp-msr-office { grid-template-columns: 1fr; } .hp-msr-office__map { min-height: 220px; } } @media (max-width: 560px) { .hp-msr-card__body { grid-template-columns: 1fr; } /* Side by side on a phone: a full-width gold panel above four metrics wastes the fold. */ .hp-msr-class { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: var(--sp-3); text-align: start; } .hp-msr-class__ico { margin-block-end: 0; } .hp-msr-metrics { grid-template-columns: 1fr; } .hp-msr-review { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } } @media (prefers-reduced-motion: reduce) { .hp-msr-chip--gold::after, .hp-msr-class__ico, .hp-msr-card[data-reveal].is-in .hp-msr-stars i { animation: none; } .hp-msr-meter > i { transition: none; } }