/* ========================================================================== Fawry Delivery Services One stylesheet, no framework. Rules this file keeps, each because its absence caused a measured defect: 1. Logical properties only. No left/right, so Arabic and English share code. 2. No letter-spacing on Arabic; it breaks glyph joins. Tracking is [dir=ltr]. 3. One component per idea: one .btn, one table (.ptable), one checkbox look (.box), one horizontal rail (.rail), one info surface (.note-card). 4. No horizontal overflow: overflow-x: clip on the root, min-width: 0 on grid and flex children. 5. Motion is opt-in through .js and cancelled under prefers-reduced-motion. 6. Colours come from the official logo (#F39B06 orange, #0E2372 navy). Nothing white sits on orange: white measures 2.21:1 on it, navy 6.33:1. 7. Sections alternate full-width grounds (paper, surface, navy, orange). Floating cards on a pale page made everything look like an app screen. ========================================================================== */ /* ---------- fonts ------------------------------------------------------- */ /* Two weights. A first view of the Arabic homepage measured 193 KB of fonts at three weights; the third weight was removed. */ @font-face { font-family: 'Plex Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/f/plex-ar-arabic-400.6010e7fd.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Plex Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/f/plex-ar-arabic-700.04c730b4.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Plex Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/f/plex-ar-latin-400.9ed8dcb0.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plex Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/f/plex-ar-latin-700.ae2d59f9.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- tokens ------------------------------------------------------ */ :root { --orange: #F39B06; /* logo */ --orange-hover: #FFAE2B; --orange-700: #9A5C00; /* orange TEXT on light: 5.38:1 on white, 5.01:1 on --surface */ --orange-300: #FFB547; /* orange TEXT on navy: 9.61:1 on --navy-900 */ --on-orange: #0E2372; /* content on orange fills: 6.33:1 */ --navy: #0E2372; /* logo */ --navy-900: #0A1650; --navy-600: #24399A; --ink: #121C3D; --body: #3B4668; --muted: #5E6886; /* 5.53:1 on white */ --line: #E1E5F0; --line-soft: #EEF1F7; --paper: #FFFFFF; --surface: #F5F7FB; --surface-warm: #FFF7EB; --on-dark: #C9D2EE; /* 11.2:1 on --navy-900 */ --on-dark-muted: #AEB9DE; /* 8.7:1 on --navy-900 */ --ok-bg: #E7F5EC; --ok: #1D6B3A; --warn-bg: #FFF1D6; --warn: #7A4A00; --swap-bg: #E6ECFB; --swap: #1F3A91; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(10, 22, 80, .06), 0 4px 14px rgba(10, 22, 80, .06); --shadow-md: 0 2px 6px rgba(10, 22, 80, .06), 0 20px 48px rgba(10, 22, 80, .10); --shadow-lg: 0 32px 80px rgba(10, 22, 80, .18); --gutter: clamp(1.25rem, 4vw, 2.5rem); --measure: 1200px; --hdr-h: 68px; --section-y: clamp(3.5rem, 7vw, 6rem); --section-y-tight: clamp(2.5rem, 5vw, 4rem); /* Section headings carry the page. The old scale set them at 26px on a phone, which read as an app screen title next to 34px page titles. */ --fs-h1: clamp(2.35rem, 1.5rem + 4vw, 4rem); --fs-h2: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); --fs-h3: clamp(1.15rem, 1rem + .5vw, 1.4rem); --fs-lead: clamp(1.05rem, 1rem + .4vw, 1.3rem); --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ---------- reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--body); font-family: 'Plex Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: var(--fs-body); line-height: 1.6; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } [dir="rtl"] body { font-size: 1.09375rem; line-height: 1.85; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.1; text-wrap: balance; } [dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: -.025em; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.28; } p { margin: 0; text-wrap: pretty; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; } table { border-collapse: collapse; width: 100%; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .num, .price-fig { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; } :focus-visible { outline: 3px solid var(--navy-600); outline-offset: 3px; border-radius: 6px; } .section--dark :focus-visible, .band :focus-visible, .cta :focus-visible, .ftr :focus-visible, .hero :focus-visible { outline-color: var(--orange-300); } .cta :focus-visible { outline-color: var(--navy); } ::selection { background: rgba(243, 155, 6, .3); color: var(--ink); } /* ---------- layout ------------------------------------------------------ */ .wrap { width: min(var(--measure), 100% - var(--gutter) * 2); margin-inline: auto; } [class*="-grid"] > *, .split > * { min-width: 0; } .section { padding-block: var(--section-y); } .section--tight { padding-block: var(--section-y-tight); } .section--surface { background: var(--surface); } .section--warm { background: var(--surface-warm); } .section--dark { background: var(--navy-900); color: var(--on-dark); } .section--dark h2, .section--dark h3 { color: #fff; } .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } } @media (min-width: 900px) { .split--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .skip { position: fixed; z-index: 300; inset-block-start: .75rem; inset-inline-start: .75rem; padding: .7rem 1.1rem; color: #fff; background: var(--navy); border-radius: var(--radius-pill); font-weight: 700; transform: translateY(-220%); } .skip:focus { transform: none; } .head { max-width: 46rem; margin-block-end: clamp(2rem, 4vw, 3rem); display: grid; gap: .9rem; } .split > .head { margin-block-end: 0; } .eyebrow { color: var(--orange-700); font-size: var(--fs-xs); font-weight: 700; } [dir="ltr"] .eyebrow { text-transform: uppercase; letter-spacing: .12em; } .eyebrow--light { color: var(--orange-300); } .section--dark .eyebrow { color: var(--orange-300); } .lead { font-size: var(--fs-lead); color: var(--body); max-width: 40ch; } [dir="rtl"] .lead { max-width: 46ch; line-height: 1.8; } .section--dark .lead { color: var(--on-dark); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } .h-sm { font-size: var(--fs-h3); margin-block: 1.5rem .75rem; } .h-sm:first-child { margin-block-start: 0; } .tlink-row { margin-block-start: 1.5rem; color: var(--muted); font-size: var(--fs-sm); } /* ---------- buttons ----------------------------------------------------- */ /* Square-ish, not pills. Pills everywhere read as app chrome. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .8rem 1.5rem; border: 1.5px solid transparent; border-radius: 12px; font-size: var(--fs-body); font-weight: 700; line-height: 1.2; text-align: center; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .btn svg { width: 1.2em; height: 1.2em; flex: none; } .btn--lg { min-height: 58px; padding-inline: 1.9rem; font-size: 1.0938rem; } .btn--primary { color: var(--on-orange); background: var(--orange); box-shadow: 0 10px 26px rgba(243, 155, 6, .28); } .btn--primary:hover { background: var(--orange-hover); transform: translateY(-2px); } .btn--dark { color: #fff; background: var(--navy); } .btn--dark:hover { background: var(--navy-600); transform: translateY(-2px); } .btn--ghost { color: var(--navy); background: var(--paper); border-color: var(--line); } .btn--ghost:hover { border-color: var(--navy); } .btn--line { color: var(--navy); border-color: currentColor; } .btn--line:hover { color: #fff; background: var(--navy); border-color: var(--navy); } /* On the hero footage: a translucent panel keeps white text legible over any frame. */ .btn--glass { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); } .btn--glass:hover { color: var(--navy-900); background: #fff; border-color: #fff; } .btn:active { transform: scale(.985); } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; } .btn-row--big { margin-block-start: 2rem; } /* A paragraph and the actions under it need air. With no gap the button touched the lead, which the audit read as 4.2:1 text on an orange ground. */ p + .btn-row, .lead + .btn-row { margin-block-start: 1.5rem; } @media (max-width: 460px) { .btn-row--big .btn { width: 100%; } } .tlink { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--navy); font-weight: 700; } .tlink svg { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); } .tlink:hover { color: var(--orange-700); } .tlink:hover svg { transform: translateX(3px); } [dir="rtl"] .ico-arrow, [dir="rtl"] .ico-next { transform: scaleX(-1); } [dir="ltr"] .ico-prev { transform: scaleX(-1); } [dir="rtl"] .tlink:hover .ico-arrow { transform: scaleX(-1) translateX(3px); } .section--dark .tlink { color: #fff; } /* ---------- header ------------------------------------------------------ */ .hdr { position: sticky; inset-block-start: 0; z-index: 100; background: var(--paper); border-block-end: 1px solid transparent; transition: background-color .3s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .hdr.is-stuck { border-block-end-color: var(--line); box-shadow: 0 6px 24px rgba(10, 22, 80, .07); } /* Over the hero footage the bar is invisible until the page scrolls. */ .hdr--over { position: fixed; inset-inline: 0; background: transparent; } .hdr--over.is-stuck { position: fixed; background: var(--paper); } .hdr-in { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); min-height: var(--hdr-h); } .brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; } .brand-mark { width: 36px; height: auto; } .brand-mark--rev { display: none; } .brand-txt { display: grid; line-height: 1.1; } [dir="rtl"] .brand-txt { line-height: 1.3; } .brand-txt b { color: var(--navy); font-size: 1.2rem; } .brand-txt span { color: var(--muted); font-size: .75rem; font-weight: 700; } [dir="ltr"] .brand-txt span { text-transform: uppercase; letter-spacing: .08em; } .hdr--over:not(.is-stuck) .brand-mark { display: none; } .hdr--over:not(.is-stuck) .brand-mark--rev { display: block; } .hdr--over:not(.is-stuck) .brand-txt b { color: #fff; } .hdr--over:not(.is-stuck) .brand-txt span { color: rgba(255, 255, 255, .8); } .hdr--over:not(.is-stuck) .nav > a { color: #fff; } /* Over the footage the language and menu controls lose their boxes: outlined squares on a video read as app chrome. They keep their 44px tap size. */ .hdr--over:not(.is-stuck) .lang { color: #fff; border-color: transparent; } .hdr--over:not(.is-stuck) .burger { background: transparent; border-color: transparent; } .hdr--over:not(.is-stuck) .burger i { background: #fff; } .nav { display: flex; align-items: center; gap: clamp(.4rem, 1.1vw, 1.1rem); margin-inline: auto; } .nav > a { position: relative; padding: .45rem .2rem; color: var(--body); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; } .nav > a::after { content: ''; position: absolute; inset-block-end: 0; inset-inline: .2rem; height: 2.5px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transition: transform .22s var(--ease); } .nav > a:hover { color: var(--ink); } .nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); } .nav > a[aria-current="page"] { color: var(--navy); } .nav-act { display: none; } .hdr-act { display: flex; align-items: center; gap: .5rem; flex: none; } .lang { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .8rem; color: var(--navy); border: 1.5px solid var(--line); border-radius: 10px; font-size: var(--fs-xs); font-weight: 700; } .lang:hover { border-color: var(--navy); } .hdr-cta { min-height: 46px; padding-inline: 1.1rem; font-size: var(--fs-sm); } .burger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); } .burger i { display: block; width: 18px; height: 2px; margin: 3.5px auto; background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); } .burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } @media (max-width: 1140px) { .burger { display: block; } .brand, .hdr-act { position: relative; z-index: 2; } .hdr-act { margin-inline-start: auto; } .nav { position: fixed; z-index: 1; inset-block-start: 0; inset-inline-end: 0; display: grid; align-content: start; gap: .1rem; width: min(340px, 88vw); height: 100dvh; margin: 0; padding: 5.5rem 1.5rem 2rem; background: var(--paper); box-shadow: var(--shadow-lg); overflow-y: auto; transform: translateX(110%); visibility: hidden; /* Asymmetric: visible at once on open so focus can move in, hidden only after the slide-out on close. A plain visibility transition flipped it half way through and focus into the panel silently failed. */ transition: transform .34s var(--ease-out), visibility 0s linear .34s; } [dir="rtl"] .nav { transform: translateX(-110%); } .nav.is-open { transform: none; visibility: visible; transition: transform .34s var(--ease-out), visibility 0s linear 0s; } .hdr--over:not(.is-stuck) .nav > a { color: var(--body); } .nav > a { padding: .85rem .25rem; font-size: 1.0625rem; border-block-end: 1px solid var(--line-soft); } .nav > a::after { display: none; } .nav-act { display: grid; gap: .6rem; margin-block-start: 1.5rem; } .nav-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; color: var(--navy); font-weight: 700; } .nav-tel svg { width: 1.1em; height: 1.1em; } .nav-scrim { position: fixed; inset: 0; z-index: 98; background: rgba(10, 22, 80, .45); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .nav-scrim.is-on { opacity: 1; pointer-events: auto; } } /* On a phone the bar carries three controls only: identity, language, menu. */ @media (max-width: 760px) { .hdr-cta { display: none; } .brand-txt span { display: none; } } /* ---------- hero -------------------------------------------------------- */ /* The hero was 720px on a 844px phone (85%), most of it empty footage above the type. It now leaves the next section visible on the first screen. */ .hero { position: relative; display: grid; align-items: end; min-height: min(86svh, 780px); padding-block: calc(var(--hdr-h) + 2rem) clamp(2rem, 5vw, 3.5rem); overflow: clip; isolation: isolate; border-block-end: 3px solid var(--orange); } @media (max-width: 760px) { .hero { min-height: clamp(540px, 72svh, 600px); } .hero-in { gap: .85rem; } /* The action in the clip sits in the upper part of the frame; the type covers the lower part. */ .hero-poster, .hero-video { object-position: 50% 30%; } .hero .btn--glass { min-height: 44px; padding: 0; color: #fff; background: none; border: 0; backdrop-filter: none; text-decoration: underline; text-underline-offset: .3em; font-size: var(--fs-body); } } .hero-media { position: absolute; inset: 0; z-index: -1; } .hero-poster, .hero-video { width: 100%; height: 100%; object-fit: cover; } .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); } .hero-video.is-playing { opacity: 1; } /* The shade under the type is neutral ink, not navy, and only where the type is: the bottom of a phone hero, the text side of a desktop one, plus a thin band under the header. A full navy veil made the whole first screen blue. Normal-size text only sits where the shade is 55% or darker (4.5:1 for white on a white frame). */ .hero-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(9 11 18 / .66) 0, rgb(9 11 18 / .58) 72px, rgb(9 11 18 / 0) 170px), linear-gradient(to top, rgb(9 11 18 / .88) 0%, rgb(9 11 18 / .72) 50%, rgb(9 11 18 / .2) 75%, rgb(9 11 18 / 0) 88%); } @media (min-width: 761px) { [dir="rtl"] .hero-veil { background: linear-gradient(to bottom, rgb(9 11 18 / .66) 0, rgb(9 11 18 / .58) 72px, rgb(9 11 18 / 0) 190px), linear-gradient(to top, rgb(9 11 18 / .55) 0, rgb(9 11 18 / 0) 45%), linear-gradient(to left, rgb(9 11 18 / .82) 0%, rgb(9 11 18 / .64) 40%, rgb(9 11 18 / .12) 66%, rgb(9 11 18 / 0) 80%); } [dir="ltr"] .hero-veil { background: linear-gradient(to bottom, rgb(9 11 18 / .66) 0, rgb(9 11 18 / .58) 72px, rgb(9 11 18 / 0) 190px), linear-gradient(to top, rgb(9 11 18 / .55) 0, rgb(9 11 18 / 0) 45%), linear-gradient(to right, rgb(9 11 18 / .82) 0%, rgb(9 11 18 / .64) 40%, rgb(9 11 18 / .12) 66%, rgb(9 11 18 / 0) 80%); } } /* White, not orange: orange-300 measured 2.9 to 3.8:1 over the bright van frames, white clears 4.5:1 on the same shade. */ .hero .eyebrow--light { color: #fff; } .hero-in { display: grid; justify-items: start; gap: 1.1rem; max-width: 46rem; } .hero h1 { color: #fff; max-width: 16ch; } .hero-sub { color: #fff; font-size: var(--fs-lead); font-weight: 400; } .hero .btn-row { margin-block-start: .75rem; } /* ---------- stats -------------------------------------------------------- */ /* A white strip, one row at every width. On navy and stacked it was 315px of blue straight under the hero on a phone. */ .stats { background: var(--paper); color: var(--muted); border-block-end: 1px solid var(--line); } .stats-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-block: 1.25rem; } @media (min-width: 700px) { .stats-in { gap: 2rem; padding-block: 2.25rem; } } .stat { display: grid; gap: .3rem; align-content: start; } .stat + .stat { padding-inline-start: 1rem; border-inline-start: 1px solid var(--line); } @media (min-width: 700px) { .stat + .stat { padding-inline-start: 2rem; } } .stat-fig { color: var(--navy); font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem); font-weight: 700; line-height: 1; } /* Direct child only: the figure's own .num span matched a plain `.stat span` and shrank 12,000 to caption size. */ .stat > span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; } /* ---------- photo band --------------------------------------------------- */ .band { position: relative; display: grid; align-items: end; min-height: clamp(360px, 60vh, 560px); padding-block: clamp(2.5rem, 6vw, 4rem); overflow: clip; isolation: isolate; } .band--short { min-height: clamp(300px, 45vh, 440px); } .band-media { position: absolute; inset: 0; z-index: -1; } .band-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 22, 80, .93) 10%, rgba(10, 22, 80, .6) 55%, rgba(10, 22, 80, .2) 100%); } .band-img, .band-media picture { width: 100%; height: 100%; } .band-img { object-fit: cover; } .band-in { display: grid; gap: .75rem; max-width: 40rem; color: #fff; } .band-in h2 { color: #fff; } .band-in p { color: #fff; font-size: var(--fs-lead); } /* ---------- page head ---------------------------------------------------- */ .phead { padding-block: calc(var(--section-y-tight) + .5rem) var(--section-y-tight); background: var(--surface); border-block-end: 1px solid var(--line); } .phead h1 { max-width: 18ch; } .phead .lead { margin-block-start: 1rem; } .phead .eyebrow { display: block; margin-block-end: .75rem; } /* ---------- flow --------------------------------------------------------- */ /* A timeline, not cards: three days on one rule. */ .flow { display: grid; gap: 1.75rem; } @media (min-width: 820px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } } .flow-step { position: relative; display: grid; gap: .4rem; align-content: start; padding-block-start: 1.5rem; border-block-start: 3px solid var(--orange); } .flow-day { color: var(--orange-700); font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 700; line-height: 1.2; } .flow-step h3 { color: var(--ink); } .flow-step p { color: var(--body); font-size: var(--fs-sm); } .flow-step:not(:first-child) { border-block-start-color: var(--line); } /* ---------- rails (services, reviews) ------------------------------------ */ /* Native scroll-snap does the touch swiping; buttons and arrow keys call scrollBy. Nothing auto-advances, so there is nothing to pause. */ .rail { display: grid; gap: 1rem; } .rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-block: .25rem 1rem; scrollbar-width: none; } .rail-track::-webkit-scrollbar { display: none; } .rail-track > * { scroll-snap-align: start; } @media (min-width: 700px) { .rail-track { grid-auto-columns: calc((100% - 2rem) / 3); } } @media (min-width: 1060px) { .rail--svc .rail-track { grid-auto-columns: calc((100% - 4rem) / 5); } } .rail-ctl { display: flex; align-items: center; justify-content: center; gap: 1rem; } .rail-btn { display: grid; place-items: center; width: 48px; height: 48px; color: var(--navy); background: var(--paper); border: 1.5px solid var(--line); border-radius: 50%; transition: border-color .2s var(--ease); } .rail-btn svg { width: 20px; height: 20px; } .rail-btn:hover:not(:disabled) { border-color: var(--navy); } .rail-btn:disabled { opacity: .4; cursor: default; } .rail-count { min-width: 5.5rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; } .rail-more { margin-block-start: 1rem; } .svc-card { display: grid; align-content: start; gap: .6rem; margin: 0; } .svc-img { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--line-soft); } .svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .svc-card:hover .svc-img img { transform: scale(1.04); } .svc-card h2, .svc-card h3 { font-size: var(--fs-h3); } .svc-card p { color: var(--body); font-size: var(--fs-sm); } .svc-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Customer messages as the chat bubbles they arrived as. */ .rail--rv .rail-track { grid-auto-columns: 86%; } @media (min-width: 700px) { .rail--rv .rail-track { grid-auto-columns: calc((100% - 2rem) / 3); } } .rv-card { display: grid; grid-template-rows: 1fr auto; gap: .75rem; margin: 0; } .rv-bubble { position: relative; margin: 0; padding: 1.25rem 1.4rem; color: var(--ink); background: var(--paper); border-radius: 18px; border-end-start-radius: 4px; box-shadow: var(--shadow-sm); } [dir="rtl"] .rv-bubble { line-height: 1.9; } .rv-bubble::after { content: ''; position: absolute; inset-block-end: -9px; inset-inline-start: 0; width: 18px; height: 18px; background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%); } [dir="rtl"] .rv-bubble::after { clip-path: polygon(100% 0, 0 0, 100% 100%); } .rv-card figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding-inline-start: .4rem; } .rv-who { color: var(--ink); font-weight: 700; font-size: var(--fs-sm); } .rv-ch { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--fs-xs); } .rv-ch svg { width: 16px; height: 16px; } /* ---------- steps (join page) -------------------------------------------- */ .steps { display: grid; gap: 1.25rem; margin-block-start: 2rem; counter-reset: step; } .steps li { display: grid; gap: .3rem; padding-inline-start: 3rem; position: relative; counter-increment: step; } .steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; width: 36px; height: 36px; color: var(--on-orange); background: var(--orange); border-radius: 50%; font-weight: 700; } .steps h2 { font-size: var(--fs-h3); } .steps p { color: var(--body); font-size: var(--fs-sm); } /* ---------- waybill card (merchants) ------------------------------------- */ .wb { width: min(100%, 440px); margin: 0; padding: 1.4rem 1.5rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .wb-head { display: flex; align-items: center; gap: .7rem; padding-block-end: .9rem; border-block-end: 2px solid var(--navy); } .wb-head img { width: 34px; } .wb-name { display: grid; line-height: 1.25; } .wb-name b { color: var(--navy); font-size: 1.05rem; } .wb-name span { color: var(--orange-700); font-size: var(--fs-xs); font-weight: 700; } .wb-bar { margin-inline-start: auto; width: 88px; height: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .85; } .wb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; padding-block: 1rem; } .wb-f { display: grid; gap: .3rem; } .wb-f > span { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; } .wb-f i { display: block; height: 10px; border-block-end: 1.5px dashed #C9CFDF; } .wb-f--amt { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; background: var(--surface-warm); border-radius: 10px; } .wb-f--amt > span { color: var(--orange-700); } .wb-f--amt b { color: var(--ink); font-size: 1.15rem; } .wb-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-block-start: .8rem; border-block-start: 1px solid var(--line-soft); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; } .wb-sign svg { width: 110px; height: 30px; } .wb-sig { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; } /* The one checkbox look, shared by option lists and forms. */ .box { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.8px solid #8E97B5; border-radius: 6px; background: var(--paper); } .box svg { width: 14px; height: 14px; stroke-width: 3; color: var(--on-orange); opacity: 0; } .check input:checked + .box { background: var(--orange); border-color: var(--orange); } .check input:checked + .box svg { opacity: 1; } /* Waybill options as a line of text, not tick boxes: the boxes read as a form and implied every option was included. */ .opts { display: flex; flex-wrap: wrap; gap: .5rem .75rem; color: var(--ink); font-weight: 700; } .opts > span { padding: .5rem .95rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-sm); } .opts--form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .5rem; font-weight: 400; } /* ---------- tables and finder ------------------------------------------- */ .ptable-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .ptable-wrap--flat { border: 0; border-radius: 0; } .ptable { min-width: 20rem; font-size: var(--fs-sm); } .ptable caption { padding: .9rem 1.25rem; color: var(--muted); font-size: var(--fs-xs); text-align: start; border-block-end: 1px solid var(--line); } .ptable th, .ptable td { padding: .85rem 1.25rem; text-align: start; } .ptable thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; background: var(--surface); border-block-end: 1px solid var(--line); white-space: nowrap; } .ptable tbody tr + tr > * { border-block-start: 1px solid var(--line-soft); } .ptable tbody th { color: var(--ink); font-weight: 700; } .ptable td { color: var(--body); } .ptable .cell-price { text-align: end; white-space: nowrap; } .ptable .cell-price b { color: var(--ink); font-size: 1.0625rem; } .ptable .cur { color: var(--muted); font-size: var(--fs-xs); } .ptable tbody tr.is-hit > * { background: var(--surface-warm); } .ptable tbody tr[hidden] { display: none; } .ptable-group th { padding-block: .7rem; color: var(--navy); background: var(--surface); font-weight: 700; } .ptable-note { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; } .ptable--wide { min-width: 46rem; } .ptable--wide th, .ptable--wide td { white-space: nowrap; } /* On a phone the four-column international table ran off the edge of its box, which hid the transit column. Each country becomes its own block with labelled values instead of a scroller. */ @media (max-width: 600px) { .ptable--intl { min-width: 0; } .ptable--intl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ptable--intl tbody tr { display: grid; gap: .15rem; padding: .9rem 1.1rem; } .ptable--intl tbody tr + tr { border-block-start: 1px solid var(--line); } .ptable--intl tbody tr > * { padding: 0; border: 0 !important; } .ptable--intl tbody th { font-size: 1.05rem; padding-block-end: .3rem; } /* One flex line per value: label at the start, figure at the end. An earlier version used display: contents, which made the figure, the unit and the label separate grid cells and scattered them. */ .ptable--intl tbody td { display: flex; align-items: baseline; gap: .35rem; min-height: 32px; text-align: start; } .ptable--intl tbody td::before { content: attr(data-label); margin-inline-end: auto; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; } .ptable--intl tbody td[colspan] .cur { display: none; } .ptable--intl tbody td[colspan]::after { content: attr(data-cur); padding-inline-start: .25em; } } .finder { display: grid; gap: .5rem; max-width: 28rem; margin-block-end: 1.25rem; } .finder label { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; } .finder-in { position: relative; } .finder-in svg { position: absolute; inset-block-start: 50%; inset-inline-start: 1rem; width: 20px; height: 20px; color: var(--muted); transform: translateY(-50%); pointer-events: none; } .finder input { width: 100%; min-height: 52px; padding-block: .8rem; padding-inline: 2.9rem 1.1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; } .finder input:focus { border-color: var(--navy-600); } .finder-msg { min-height: 1.6em; color: var(--muted); font-size: var(--fs-sm); } .print-row { margin-block-start: 1.25rem; } .tiers { display: grid; gap: 1rem; } @media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tier { display: grid; gap: .6rem; padding: clamp(1.4rem, 3vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .tier--core { background: var(--surface-warm); border-color: #F7D59A; } .tier-fig { display: flex; align-items: baseline; gap: .4rem; color: var(--ink); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; line-height: 1; } .tier-cur { font-size: .32em; color: var(--muted); } .tier h2 { font-size: var(--fs-h3); letter-spacing: normal; } .tier p { color: var(--muted); font-size: var(--fs-sm); } .intl-teaser { display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); border-radius: var(--radius-lg); } @media (min-width: 800px) { .intl-teaser { grid-template-columns: minmax(0, 1fr) auto; } } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; } .chip b { color: var(--orange-700); } /* ---------- calculator --------------------------------------------------- */ .calc { padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .calc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: .35rem; margin-block-end: 1.25rem; background: var(--surface); border-radius: 12px; } .calc-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding-inline: .6rem; border-radius: 9px; color: var(--body); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; } .calc-tabs button[aria-selected="true"] { color: #fff; background: var(--navy); } .calc-panel { display: grid; gap: 1rem; } .calc-panel[hidden] { display: none; } .field { display: grid; gap: .4rem; } .field label, .field legend { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; } .field legend { margin-block-end: .4rem; } .field small { color: var(--muted); font-size: var(--fs-xs); } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: .7rem .95rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; } .field textarea { min-height: 96px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-600); } /* The same solid ring as every other control. An earlier version replaced the outline with a 20% alpha shadow, which the keyboard test flagged as no ring. */ .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .finder input:focus-visible { outline: 3px solid var(--navy-600); outline-offset: 2px; } .field [aria-invalid="true"] { border-color: #B42318; } .req { color: #B42318; } .calc-out { display: grid; gap: .35rem; padding: 1rem 1.1rem; background: var(--surface); border-radius: 12px; } .calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .calc-row span { color: var(--body); font-size: var(--fs-sm); } .calc-row b { color: var(--ink); font-size: 1.35rem; } .calc-row--net b { color: var(--ok); } .calc-row[hidden], .calc-empty[hidden] { display: none; } .calc-empty, .calc-note { color: var(--muted); font-size: var(--fs-xs); } .calc-send { width: 100%; } /* ---------- picker wheel -------------------------------------------------- */ /* Built by site.js from a