/* ========================================================================== TransEasy — International Logistics & Freight Forwarding Design system per TransEasy Brand Guidelines v2.0 (Aug 2026) Palette: Brand Blue / Deep Navy / Charcoal / Signal Red / Ice Gray Type: Archivo (headlines) · IBM Plex Sans (body/UI) · Noto Sans SC (Chinese) ========================================================================== */ :root { /* ---- Core palette (brand book §03) ---- */ --navy: #121f2e; /* Deep Navy — grounding, dark sections, footers */ --blue: #3b5a80; /* Brand Blue — primary, wordmark, links, key UI */ --blue-100: #eaeff5; --blue-200: #c5d2e1; --blue-400: #8ca3bf; --blue-700: #2c4460; --blue-800: #1c2c40; --charcoal: #4b4b4b; /* body copy, secondary swoosh arc */ --red: #d7362c; /* Signal Red — accent only, one per view */ --red-dark: #bd2e25; /* hover: darken ~10%, never change hue */ --ice-gray: #eef2f5; /* surfaces, table stripes — not a text colour */ --white: #ffffff; --neutral-50: #f7f8f9; --neutral-200: #dfe3e7; --neutral-400: #9aa3ac; --green: #1e7a5f; /* status: delivered */ --amber: #c98a12; /* status: in transit */ /* ---- Type ---- */ --font-head: "Archivo", "Arial", sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; --font-zh: "Noto Sans SC", "Microsoft YaHei", sans-serif; --font-mono: "IBM Plex Mono", "Consolas", monospace; /* ---- Layout ---- */ --container: 1240px; --radius: 4px; /* 4px radius max, brand book §05 UI components */ /* Header system — utility bar + main header, with a scrolled "condensed" state. Every other page's top padding is derived from these, so the whole site re-flows correctly if they change. */ --util-h: 48px; /* the restored phone/email/quote/language strip */ --header-h: 100px; /* resting height of the main header row */ --header-h-sm: 76px; /* condensed height after scroll */ --logo-h: 76px; /* resting logo height */ --logo-h-sm: 56px; /* condensed logo height */ --header-max: 1460px; /* the header runs wider than the body container so six nav items, contact, language and the CTA all sit on ONE row without crowding the wordmark */ --top-total: calc(var(--util-h) + var(--header-h)); --shadow-sm: 0 1px 3px rgba(18, 31, 46, 0.08); --shadow-md: 0 6px 20px rgba(18, 31, 46, 0.10); --shadow-lg: 0 20px 50px rgba(18, 31, 46, 0.16); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Below 1023px the main header condenses further; the utility bar stays present at every width (per the two-row header requirement) but shrinks a little so it does not eat too much vertical space on a phone. */ @media (max-width: 1023px) { :root { --util-h: 42px; --header-h: 74px; --header-h-sm: 68px; --logo-h: 52px; --logo-h-sm: 40px; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--charcoal); background: var(--white); -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 1.56; /* 28/18 */ overflow-x: hidden; } img { max-width: 100%; display: block; } /* Safety net: an with no explicit size falls back to the browser's replaced-element default (300x150), which silently blows out any flex/grid item that contains one. Default every icon to a sane 1em box; every more-specific .icon/.btn/etc. rule above already wins the cascade and overrides this where a different size is wanted. */ svg { width: 1em; height: 1em; flex-shrink: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } h1, h2, h3, h4, p { margin: 0; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .container { padding: 0 40px; } } section { position: relative; } /* ========================================================================== TYPOGRAPHY — Archivo headlines / IBM Plex Sans body, left-aligned always, two sizes per block max, no centred copy, no italics, tabular numerals. ========================================================================== */ h1, .d1, .h1 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.025em; } .d1 { font-size: clamp(44px, 7vw, 96px); line-height: 0.94; } h1, .h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.07; } h2, .h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.22; letter-spacing: -0.015em; } h3, .h3 { font-family: var(--font-head); font-weight: 600; font-size: clamp(19px, 2vw, 24px); line-height: 1.33; } h4, .h4 { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.3; } p, .body-text { font-size: 18px; line-height: 1.56; color: var(--charcoal); max-width: 68ch; } .small { font-size: 14px; line-height: 1.57; color: var(--charcoal); } .label { font-family: var(--font-body); font-size: 12px; line-height: 1.33; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); display: inline-block; } .lede { font-size: 20px; line-height: 1.55; color: var(--charcoal); font-weight: 300; max-width: 60ch; } .section-head { max-width: 640px; margin-bottom: 44px; } .section-head h2 { margin-top: 12px; } .section-head p { margin-top: 14px; } .tnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } em, i { font-style: normal; font-weight: 600; } /* DON'T: italics for emphasis */ /* ========================================================================== BUTTONS — 4px radius, hover darkens 10% (never changes hue), one Signal-Red button per view. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: var(--radius); border: 1.5px solid transparent; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); white-space: nowrap; } .btn svg { width: 16px; height: 16px; } .btn-red { background: var(--red); color: var(--white); } .btn-red:hover { background: var(--red-dark); } .btn-blue { background: var(--blue); color: var(--white); } .btn-blue:hover { background: var(--blue-700); } .btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--white); } .btn-outline-white { background: transparent; border-color: rgba(255,255,255,0.55); color: var(--white); } .btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: var(--white); } .btn-block { width: 100%; } .text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--blue); border-bottom: 1.5px solid var(--blue-200); padding-bottom: 3px; transition: border-color 0.2s var(--ease), gap 0.2s var(--ease); } .text-link:hover { border-color: var(--blue); gap: 11px; } .text-link.on-dark { color: var(--white); border-color: rgba(255,255,255,0.35); } .text-link.on-dark:hover { border-color: var(--white); } /* ========================================================================== HEADER + MEGA MENU ========================================================================== */ /* ---- Utility bar: the thin corporate strip above the main header ---- */ /* Restored on request: a solid navy strip, ALWAYS visible (not gated to desktop like the old version), carrying the phone number, email, a compact 'Get a Quote' link and the language switcher. It slides away on scroll (below) so the main header can take the full top position. */ .utility-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: var(--util-h); background: var(--navy); display: flex; align-items: center; transition: transform 0.3s var(--ease); } .utility-bar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .utility-bar .u-left { display: flex; align-items: center; gap: 22px; min-width: 0; } .utility-bar .u-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } /* The phone is the one thing that must never be small again — bold, larger than the rest of the strip, white against the navy. */ .u-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--white); white-space: nowrap; transition: opacity 0.2s var(--ease); } .u-phone svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; } .u-phone:hover { opacity: 0.82; } .u-email { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.72); white-space: nowrap; transition: color 0.2s var(--ease); } .u-email svg { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; } .u-email:hover { color: var(--white); } .u-quote { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--white); white-space: nowrap; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.34); border-radius: var(--radius); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .u-quote:hover { background: var(--red); border-color: var(--red); } /* Progressive disclosure on the way down to phone width — the phone and language survive every width; email and the text link are the first things to go because they are the least essential of the four. */ @media (max-width: 900px) { .u-email { display: none; } } @media (max-width: 620px) { .u-quote { display: none; } } @media (max-width: 359px) { .u-phone span { display: none; } .u-phone svg { width: 20px; height: 20px; } } /* when scrolled, the utility bar slides away and the header takes the top */ body.is-scrolled .utility-bar { transform: translateY(-100%); } .site-header { position: fixed; top: var(--util-h); left: 0; right: 0; z-index: 1000; height: var(--header-h); display: flex; align-items: center; background: rgba(255,255,255,0); border-bottom: 1px solid transparent; transition: background-color 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease), height 0.28s var(--ease), top 0.3s var(--ease); } /* This used to pin the header to top:0 below 1023px, back when the utility bar was hidden on mobile — with the bar now visible at every width, the default `top: var(--util-h)` (set above) is correct here too, so this override is deliberately gone rather than causing the header to sit on top of the utility strip instead of below it. */ /* a soft scrim so the transparent header stays legible over light hero imagery */ .site-header::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--util-h) * -1); height: calc(100% + var(--util-h) + 40px); background: linear-gradient(180deg, rgba(18,31,46,0.55) 0%, rgba(18,31,46,0.22) 60%, rgba(18,31,46,0) 100%); pointer-events: none; opacity: 1; transition: opacity 0.28s var(--ease); } .site-header.is-solid::before, .site-header.is-light::before { opacity: 0; } /* APPEARANCE only — is-solid/is-light say "paint the header white", they must not move it. Position is driven purely by scroll state below, otherwise an interior page (solid from load, but not yet scrolled) would jump to top:0 and collide with the still-visible utility bar. */ .site-header.is-solid, .site-header.is-light { background: var(--white); box-shadow: 0 2px 18px rgba(18,31,46,0.10); border-bottom-color: var(--neutral-200); } /* POSITION — once scrolled, the utility bar slides away and the header takes the top edge in its condensed height. */ body.is-scrolled .site-header { top: 0; height: var(--header-h-sm); } body.is-scrolled .site-header .brand img { height: var(--logo-h-sm); } /* width:100% matters — .container is a flex item of .site-header, so without it the box shrink-wraps to its content and drifts out of alignment with the utility bar above whenever the header CTA is hidden. */ .site-header .container { position: relative; width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: var(--logo-h); width: auto; transition: height 0.28s var(--ease); } .brand .logo-dark { display: block; } .brand .logo-light { display: none; } .site-header:not(.is-solid):not(.is-light) .brand .logo-dark { display: none; } .site-header:not(.is-solid):not(.is-light) .brand .logo-light { display: block; } .main-nav { display: none; } @media (min-width: 1220px) { .main-nav { display: flex; align-items: stretch; gap: 2px; align-self: stretch; } .nav-item { position: relative; display: flex; align-items: center; } .nav-link { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 17px; font-size: 15.5px; font-weight: 600; color: var(--navy); transition: color 0.2s var(--ease); } .site-header:not(.is-solid):not(.is-light) .nav-link { color: var(--white); } .nav-link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); } .nav-item:hover .nav-link { color: var(--blue); } .site-header:not(.is-solid):not(.is-light) .nav-item:hover .nav-link { color: rgba(255,255,255,0.75); } .nav-item:hover .nav-link svg { transform: rotate(180deg); } .mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--white); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-lg); border-radius: var(--radius); padding: 28px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; } .nav-item:hover .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega.mega-wide { width: 620px; left: 0; transform: translateX(0) translateY(8px); } .nav-item:hover .mega.mega-wide { transform: translateX(0) translateY(0); } .mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; } .mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--radius); transition: background-color 0.15s var(--ease); } .mega-link:hover { background: var(--ice-gray); } .mega-link .icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--blue); } .mega-link .icon svg { width: 100%; height: 100%; } .mega-link strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); } .mega-link span { display: block; font-size: 12.5px; color: var(--charcoal); margin-top: 2px; } .mega-simple { display: flex; flex-direction: column; gap: 2px; min-width: 220px; } .mega-simple a { padding: 11px 10px; border-radius: var(--radius); font-size: 14.5px; font-weight: 500; color: var(--navy); } .mega-simple a:hover { background: var(--ice-gray); color: var(--blue); } } .header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; } .nav-toggle span { width: 22px; height: 2px; background: var(--navy); transition: background-color 0.2s; } .site-header:not(.is-solid):not(.is-light) .nav-toggle span { background: var(--white); } @media (min-width: 1220px) { .nav-toggle { display: none; } } .mobile-nav { /* top-total, not header-h alone — the drawer must clear BOTH the utility bar and the main header, or it opens underneath the utility strip. */ position: fixed; inset: var(--top-total) 0 0 0; background: var(--white); z-index: 999; padding: 12px 24px 40px; overflow-y: auto; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } .mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav .m-group { border-bottom: 1px solid var(--neutral-200); } .mobile-nav .m-top { width: 100%; background: none; border: none; appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: space-between; padding: 17px 4px; font-size: 17px; font-weight: 600; color: var(--navy); text-align: left; } .mobile-nav .m-top svg { width: 16px; height: 16px; transition: transform 0.2s; } .mobile-nav .m-group.is-open .m-top svg { transform: rotate(180deg); } .mobile-nav .m-sub { display: none; padding: 0 4px 16px 12px; } .mobile-nav .m-group.is-open .m-sub { display: block; } .mobile-nav .m-sub a { display: block; padding: 9px 0; font-size: 15px; color: var(--charcoal); } .mobile-nav .m-link { display: block; padding: 17px 4px; font-size: 17px; font-weight: 600; color: var(--navy); } .mobile-nav .btn { margin: 24px 0; width: 100%; color: var(--white); } @media (min-width: 1220px) { .mobile-nav { display: none; } } /* ========================================================================== PAGE HERO (small — for interior pages) ========================================================================== */ .page-hero { position: relative; background: var(--navy); color: var(--white); padding: calc(var(--top-total) + 84px) 0 76px; overflow: hidden; isolation: isolate; } .page-hero .hero-bg { position: absolute; inset: 0; z-index: -2; } .page-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(18,31,46,0.97) 0%, rgba(18,31,46,0.92) 32%, rgba(18,31,46,0.65) 100%); } .page-hero .chapter-num { position: absolute; z-index: -1; right: -0.05em; top: -0.14em; font-family: var(--font-head); font-weight: 800; font-size: clamp(160px, 20vw, 320px); line-height: 1; color: rgba(255,255,255,0.05); letter-spacing: -0.04em; user-select: none; pointer-events: none; } .page-hero .eyebrow { color: rgba(255,255,255,0.68); } .page-hero .eyebrow::before { background: var(--red); } .page-hero h1 { color: var(--white); margin-top: 14px; max-width: 780px; } .page-hero p { color: rgba(255,255,255,0.74); margin-top: 16px; max-width: 640px; } .page-hero .hero-actions { margin-top: 30px; } .breadcrumb { font-size: 13px; color: rgba(255,255,255,0.5); } .breadcrumb a:hover { color: var(--white); } /* ---- Editorial chapter-number divider (brand-native motif: the brand book's own oversized rotated section numerals, adapted for section heads throughout the site) ---- */ .chapter-head { position: relative; display: flex; align-items: flex-end; gap: 28px; } .chapter-head .chapter-digit { font-family: var(--font-head); font-weight: 800; font-size: clamp(56px, 7vw, 104px); line-height: 0.82; color: var(--ice-gray); flex-shrink: 0; letter-spacing: -0.03em; } .section-alt .chapter-head .chapter-digit { color: var(--white); } .chapter-head .chapter-rule { flex: 1; height: 1px; background: var(--neutral-200); margin-bottom: 0.5em; } /* ========================================================================== HERO SLIDER (home) ========================================================================== */ .hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-slide.is-active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,31,46,0.55) 0%, rgba(18,31,46,0.42) 40%, rgba(18,31,46,0.86) 100%); } .hero-content { position: relative; z-index: 1; width: 100%; padding: calc(var(--top-total) + 96px) 0 72px; } .hero-content .eyebrow { color: rgba(255,255,255,0.85); } .hero h1, .hero .d1 { color: var(--white); margin-top: 18px; max-width: 900px; } .hero .lede { margin-top: 20px; color: rgba(255,255,255,0.85); max-width: 540px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero-strip { margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; flex-wrap: wrap; gap: 24px 36px; } .hero-strip .stat strong { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--white); } .hero-strip .stat span { font-size: 12.5px; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.06em; } /* Carousel indicators sit inline under the hero CTAs, aligned to the content grid — the bottom-right corner belongs to the floating contact buttons. */ .hero-slide-controls { display: flex; align-items: center; gap: 18px; margin-top: 48px; } .hero-slide-nav { display: flex; flex-direction: row; gap: 9px; } .hero-slide-nav button { width: 44px; height: 3px; background: rgba(255,255,255,0.3); border: none; padding: 0; cursor: pointer; position: relative; } .hero-slide-nav button::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); } .hero-slide-nav button.is-active::after { width: 100%; transition: width 6s linear; } .hero-slide-label { color: rgba(255,255,255,0.75); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } @media (max-width: 640px) { .hero-slide-controls { margin-top: 32px; } .hero-slide-nav button { width: 30px; } } /* ========================================================================== CAPABILITY / TRUST STRIP ========================================================================== */ .trust-strip { background: var(--navy); color: var(--white); padding: 0; } .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 860px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } } .trust-item { padding: 30px 28px; border-top: 1px solid rgba(255,255,255,0.12); } @media (min-width: 860px) { .trust-item { border-top: none; border-left: 1px solid rgba(255,255,255,0.12); } .trust-item:first-child { border-left: none; } } .trust-item .icon { width: 28px; height: 28px; color: var(--red); margin-bottom: 14px; } .trust-item .icon svg { width: 100%; height: 100%; } .trust-item strong { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--white); } .trust-item span { display: block; font-size: 13.5px; color: rgba(255,255,255,0.6); margin-top: 4px; } /* ========================================================================== GENERIC SECTIONS ========================================================================== */ .section { padding: 88px 0; } .section-alt { background: var(--ice-gray); } .two-col { display: grid; grid-template-columns: 1fr; gap: 44px; } @media (min-width: 960px) { .two-col { grid-template-columns: 0.85fr 1fr; gap: 64px; align-items: center; } } .two-col.reverse-media { } @media (min-width: 960px) { .two-col.reverse-media .media-col { order: 2; } .two-col.reverse-media .text-col { order: 1; } } .media-frame { position: relative; } .media-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; } .media-frame.wide img { aspect-ratio: 16/10; } .stat-chip { position: absolute; left: 0; bottom: -1px; background: var(--navy); color: var(--white); padding: 18px 24px; max-width: 300px; } .stat-chip strong { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 700; } .stat-chip span { font-size: 12.5px; color: rgba(255,255,255,0.65); } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .tag-list li { font-size: 13.5px; font-weight: 500; color: var(--navy); background: var(--white); border: 1px solid var(--neutral-200); padding: 8px 14px; } .section-alt .tag-list li { background: var(--white); } /* ========================================================================== SERVICE / CARD GRIDS (square corners throughout — no rounded photography) ========================================================================== */ /* Real gap-separated cards, not the old fake-hairline technique. That technique set gap:1px over a grey container background so the gaps read as 1px rules — but any incomplete final row (7 items in a 3-col grid, which is what the service pages actually have) left empty grid tracks where the grey container showed through as a large dead grey rectangle that looked like a broken card. Cards now carry their own border and the container is transparent, so a short row simply ends. */ .card-grid { display: grid; grid-template-columns: 1fr; gap: 18px; background: transparent; border: 0; min-width: 0; } .card-grid > * { min-width: 0; } @media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .card-grid { grid-template-columns: repeat(5, 1fr); } } /* Responsive column-count modifiers — mobile-first (1 column below 560px always), replacing ad-hoc inline grid-template-columns overrides that used to force a fixed column count at every viewport and overflow on narrow screens. */ .card-grid.cols-2 { grid-template-columns: 1fr; } @media (min-width: 560px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } .card-grid.cols-3 { grid-template-columns: 1fr; } @media (min-width: 560px) { .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .card-grid.cols-4 { grid-template-columns: 1fr; } @media (min-width: 560px) { .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } /* Cards now have real presence: their own border, a top accent that colours in on hover, and a genuine lift. The previous treatment was a flat white box whose only hover state was a background tint, which is what made three unrelated content types read as one generic component. */ .service-tile { position: relative; background: var(--white); padding: 32px 26px; display: flex; flex-direction: column; border: 1px solid var(--neutral-200); border-radius: var(--radius); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .service-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } a.service-tile:hover, .service-tile:hover { border-color: var(--blue-200); box-shadow: var(--shadow-md); transform: translateY(-3px); } a.service-tile:hover::before, .service-tile:hover::before { transform: scaleX(1); } a.service-tile:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .service-tile:hover .icon { color: var(--red); } .service-tile .icon { transition: color 0.25s var(--ease); } .service-tile .icon { width: 34px; height: 34px; color: var(--blue); margin-bottom: 20px; } .service-tile .icon svg { width: 100%; height: 100%; } .service-tile .idx { font-family: var(--font-mono); font-size: 12px; color: var(--neutral-400); } .service-tile h3 { color: var(--navy); margin-top: 6px; font-size: 18px; } .service-tile p { margin-top: 10px; font-size: 15px; color: var(--charcoal); flex: 1; } .service-tile .text-link { margin-top: 16px; font-size: 13.5px; } .photo-card { position: relative; overflow: hidden; isolation: isolate; } .photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .photo-card:hover img { transform: scale(1.05); } .photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,31,46,0.02) 40%, rgba(18,31,46,0.82) 100%); z-index: 1; } .photo-card .caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; color: var(--white); font-weight: 600; font-size: 15px; } .industries-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--neutral-200); } @media (min-width: 700px) { .industries-grid { grid-template-columns: repeat(4, 1fr); } } .industries-grid .photo-card { aspect-ratio: 4/5; } /* ========================================================================== TABLES (ice-gray zebra, no vertical rules, tabular right-aligned numerals) ========================================================================== */ .data-table { width: 100%; border-collapse: collapse; font-size: 15px; } .data-table th { text-align: left; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal); padding: 12px 16px; border-bottom: 1.5px solid var(--navy); } .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--neutral-200); color: var(--navy); } .data-table tr:nth-child(even) td { background: var(--ice-gray); } .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .table-wrap { overflow-x: auto; border: 1px solid var(--neutral-200); } /* ========================================================================== STATUS CHIPS ========================================================================== */ .status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--navy); } .status .dot { width: 8px; height: 8px; flex-shrink: 0; } .status.delivered .dot { background: var(--green); } .status.transit .dot { background: var(--amber); } .status.exception .dot { background: var(--red); } /* ========================================================================== PROCESS / STEPS ========================================================================== */ .steps { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { padding: 26px 24px 26px 22px; border-left: 2px solid var(--neutral-200); position: relative; } @media (min-width: 900px) { .step { border-left: none; border-top: 2px solid var(--neutral-200); padding: 24px 22px 0 0; } } .step::before { content: ""; position: absolute; width: 10px; height: 10px; background: var(--red); left: -6px; top: 30px; } @media (min-width: 900px) { .step::before { left: 0; top: -6px; } } .step .step-no { font-family: var(--font-mono); font-size: 13px; color: var(--red); font-weight: 600; } .step h3 { color: var(--navy); margin-top: 8px; } .step p { margin-top: 8px; font-size: 15px; max-width: 250px; } /* ========================================================================== TEAM ========================================================================== */ .team-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--neutral-200); border: 1px solid var(--neutral-200); } @media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .team-grid { grid-template-columns: repeat(4, 1fr); } } .team-card { background: var(--white); padding: 30px 26px; } .team-card .avatar { width: 56px; height: 56px; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 18px; margin-bottom: 20px; } .team-card h3 { font-size: 18px; color: var(--navy); } .team-card .role { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--red); } .team-card p.bio { margin-top: 14px; font-size: 14.5px; color: var(--charcoal); } .team-card .contact { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--neutral-200); } .team-card .contact a { display: block; font-size: 13.5px; color: var(--charcoal); margin-top: 6px; } .team-card .contact a:hover { color: var(--blue); } /* ========================================================================== CASE STUDIES ========================================================================== */ .case-card { border: 1px solid var(--neutral-200); background: var(--white); } .case-card .media { aspect-ratio: 16/9; overflow: hidden; } .case-card .media img { width: 100%; height: 100%; object-fit: cover; } .case-card .body { padding: 32px; } .case-card .result { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--blue); } .case-card .result-label { font-size: 13px; color: var(--charcoal); margin-top: 2px; } .case-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } @media (min-width: 860px) { .case-grid { grid-template-columns: repeat(2, 1fr); } } .case-meta { margin-top: 20px; display: grid; gap: 14px; } .case-meta dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); } .case-meta dd { margin: 4px 0 0; font-size: 15px; color: var(--charcoal); } /* ========================================================================== FAQ (accordion) ========================================================================== */ /* Panel treatment. Previously these were bare rows separated by a 1px hairline directly on white, with category groups distinguished only by a slightly larger paragraph gap — it read as an unstyled
list rather than a designed component, and you could not see where one category ended and the next began. */ .faq-group { margin-top: 18px; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius); padding: 6px 26px; box-shadow: var(--shadow-sm); } .faq-group h3 { color: var(--navy); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 -26px 0; padding: 18px 26px 16px; background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200); } .faq-group h3:not(:first-child) { margin-top: 26px; border-top: 1px solid var(--neutral-200); } .faq-item { border-bottom: 1px solid var(--neutral-200); } .faq-item:last-child { border-bottom: 0; } /* the open row gets a red left accent so the active question is obvious */ .faq-item.is-open { border-left: 2px solid var(--red); margin-left: -26px; padding-left: 24px; } @media (max-width: 560px) { .faq-group { padding: 4px 18px; } .faq-group h3 { margin: 0 -18px 0; padding: 16px 18px 14px; } .faq-item.is-open { margin-left: -18px; padding-left: 16px; } } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; background: none; border: none; text-align: left; font-family: var(--font-body); font-size: 16.5px; font-weight: 600; color: var(--navy); } .faq-q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s var(--ease); color: var(--blue); } .faq-item.is-open .faq-q svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); } .faq-item.is-open .faq-a { max-height: 400px; } .faq-a p { padding: 0 4px 22px; font-size: 15.5px; color: var(--charcoal); } /* ========================================================================== FORMS ========================================================================== */ .form-card { background: var(--white); border: 1px solid var(--neutral-200); padding: 36px; } @media (max-width: 480px) { .form-card { padding: 24px 18px; } } .form-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } @media (min-width: 560px) { .form-row.two { grid-template-columns: 1fr 1fr; } } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 7px; } .field .req { color: var(--red); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius); font-size: 15px; font-family: var(--font-body); color: var(--navy); background: var(--white); transition: border-color 0.2s var(--ease); } .field textarea { resize: vertical; min-height: 100px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); } .field.full { grid-column: 1 / -1; } .form-note { margin-top: 14px; font-size: 13px; color: var(--charcoal); } /* ========================================================================== CONTACT INFO LIST ========================================================================== */ .info-list { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; } .info-item { display: flex; gap: 16px; align-items: flex-start; } .info-item .icon { width: 22px; height: 22px; color: var(--red); flex-shrink: 0; margin-top: 2px; } .info-item .icon svg { width: 100%; height: 100%; } .info-item .k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); } .info-item .v { margin-top: 3px; font-size: 16px; font-weight: 500; color: var(--navy); } .info-item .v a:hover { color: var(--blue); } .social-row { display: flex; gap: 8px; margin-top: 28px; } .social-row a { width: 38px; height: 38px; border: 1px solid var(--neutral-200); display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 12px; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .social-row a:hover { background: var(--navy); color: var(--white); } /* ========================================================================== NETWORK MAP (abstract route diagram — no literal geography risk) ========================================================================== */ .network-panel { position: relative; background: var(--navy); padding: 44px 20px; overflow: hidden; } .network-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.6; } .network-map { position: relative; z-index: 1; width: 100%; height: auto; } .network-map .route { fill: none; stroke: rgba(215,54,44,0.55); stroke-width: 1.4; stroke-dasharray: 5 6; animation: dash 26s linear infinite; } @keyframes dash { to { stroke-dashoffset: -400; } } .network-map .hub-dot { fill: var(--red); } .network-map .hub-ring { fill: none; stroke: var(--red); stroke-width: 1.4; opacity: 0.5; } .network-map .node-dot { fill: var(--blue-200); } .network-map .node-label { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; fill: rgba(255,255,255,0.82); letter-spacing: 0.03em; text-transform: uppercase; } .network-map .node-label.hub { fill: var(--white); font-size: 12.5px; } @media (max-width: 640px) { .network-map .node-label { display: none; } .network-map .node-dot { r: 6; } .network-map .hub-dot { r: 8; } } .pulse { animation: pulse 2.6s var(--ease) infinite; } @keyframes pulse { 0% { r: 3.5; opacity: 1; } 70% { r: 12; opacity: 0; } 100% { r: 12; opacity: 0; } } .network-legend { position: relative; z-index: 1; margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.1); } @media (min-width: 700px) { .network-legend { grid-template-columns: repeat(4, 1fr); } } .network-legend li { background: var(--navy); padding: 16px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.85); } .network-legend li strong { display: block; color: var(--white); font-size: 14.5px; margin-bottom: 3px; } /* ========================================================================== FINAL CTA + FOOTER ========================================================================== */ .final-cta { background: var(--navy); color: var(--white); padding: 80px 0; } .final-cta-inner { display: flex; flex-direction: column; gap: 28px; } @media (min-width: 860px) { .final-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; } } .final-cta h2 { color: var(--white); } .final-cta p { color: rgba(255,255,255,0.68); margin-top: 12px; max-width: 480px; } .final-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; } .site-footer { background: var(--navy); color: rgba(255,255,255,0.62); padding: 72px 0 0; border-top: 1px solid rgba(255,255,255,0.08); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .footer-grid { grid-template-columns: 1.3fr 0.8fr 1fr 0.8fr 1fr; gap: 28px; } } .footer-brand img { height: 46px; margin-bottom: 18px; } .footer-brand p { font-size: 14px; line-height: 1.6; max-width: 260px; color: rgba(255,255,255,0.55); } .footer-social { display: flex; gap: 8px; margin-top: 20px; } .footer-social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 11px; color: var(--white); } .footer-social a:hover { background: var(--red); border-color: var(--red); } .footer-col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 18px; } .footer-col ul { display: flex; flex-direction: column; gap: 11px; } .footer-col a { font-size: 14px; } .footer-col a:hover { color: var(--white); } .footer-col li.plain { font-size: 14px; line-height: 1.6; } .footer-bottom { margin-top: 56px; border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.42); } .footer-bottom .legal-links { display: flex; gap: 20px; } .footer-bottom a:hover { color: var(--white); } /* ========================================================================== REVEAL ANIMATIONS ========================================================================== */ /* Base: a short rise + fade. Long enough to feel considered, short enough not to make the page feel slow. 700ms on the brand easing curve. */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), clip-path 0.9s var(--ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } [data-reveal].is-visible { will-change: auto; } /* Variants — set via data-reveal="fade" etc. */ [data-reveal="fade"] { transform: none; } [data-reveal="right"] { transform: translateX(-28px); } [data-reveal="left"] { transform: translateX(28px); } [data-reveal="scale"] { transform: scale(1.03); } /* "clip" wipes the element open from the bottom — used on photography, where a rising mask reads more deliberate than a fade. */ [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); } /* Staggered children: JS assigns each child an incremental transition-delay. */ [data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-stagger].is-visible > * { opacity: 1; transform: none; } /* Word-by-word headline reveal. JS wraps each word in .rw > i; the mask is the .rw box, the motion is on the inner
. */ /* The mask box was tight to the line box, and headline line-height here is below 1.0, so every glyph tail below the baseline was being sliced off — measured worst case 38px cut from "playbooks" (the p and y tails) and 46px from words in the section headings. Padding opens the mask below (and slightly above, for tall caps at line-height < 1), and the matching negative margin keeps the text in exactly the same place on the page. */ .rw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.10em 0 0.26em; margin: -0.10em 0 -0.26em; } .rw > i { display: inline-block; font-style: inherit; font-weight: inherit; line-height: inherit; transform: translateY(115%); transition: transform 0.72s var(--ease); } [data-split].is-visible .rw > i { transform: translateY(0); } /* Media frames get a navy curtain that slides up off the image. */ .media-frame, .feature-block, .case-card .media, .photo-card { position: relative; } .media-frame::after, .feature-block::before, .case-card .media::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform: scaleY(1); transform-origin: bottom; z-index: 3; pointer-events: none; transition: transform 0.85s var(--ease); } .media-frame.is-visible::after, .feature-block.is-visible::before, .case-card.is-visible .media::after { transform: scaleY(0); } /* Frames that never get observed shouldn't sit behind a permanent curtain. */ .no-curtain::after, .no-curtain::before { display: none; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-stagger] > * { opacity: 1; transform: none; clip-path: none; transition: none; } .rw > i { transform: none; transition: none; } .media-frame::after, .feature-block::before, .case-card .media::after { display: none; } html { scroll-behavior: auto; } .marquee-track { animation: none !important; } } .no-scroll { overflow: hidden; } /* ========================================================================== ROUTE MARQUEE — a slow, continuous ticker of gateways/lanes. New motif, calm and continuous (not flashing), pauses on hover/focus. ========================================================================== */ .marquee { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); overflow: hidden; padding: 22px 0; } .marquee-track { display: flex; width: max-content; gap: 0; animation: marquee 34s linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } .marquee-item { display: flex; align-items: center; gap: 14px; padding: 0 36px; white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: rgba(255,255,255,0.85); border-right: 1px solid rgba(255,255,255,0.14); } .marquee-item .dot { width: 6px; height: 6px; background: var(--red); flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== ANIMATED STAT COUNTERS ========================================================================== */ .stat-block { display: flex; flex-direction: column; gap: 6px; } .stat-block .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; color: var(--blue); letter-spacing: -0.02em; } .stat-block .num.on-dark { color: var(--white); } .stat-block .cap { font-size: 14.5px; color: var(--charcoal); max-width: 22ch; } .stat-block .cap.on-dark { color: rgba(255,255,255,0.62); } .stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } @media (min-width: 700px) { .stat-row { grid-template-columns: repeat(4, 1fr); } } .stat-row .stat-block { padding-top: 20px; border-top: 2px solid var(--neutral-200); } .stat-row.on-dark .stat-block { border-top-color: rgba(255,255,255,0.2); } /* ========================================================================== ENHANCED PHOTO OVERLAYS (editorial feature blocks with big index numerals) ========================================================================== */ .feature-block { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4/5; } @media (min-width: 700px) { .feature-block.wide { aspect-ratio: 16/10; } } .feature-block img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .feature-block:hover img { transform: scale(1.06); } .feature-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,31,46,0.05) 30%, rgba(18,31,46,0.88) 100%); z-index: 1; } .feature-block .fb-num { position: absolute; top: 20px; left: 20px; z-index: 2; font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.75); letter-spacing: 0.06em; } .feature-block .fb-text { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: var(--white); } .feature-block .fb-text h3 { color: var(--white); font-size: 20px; } .feature-block .fb-text p { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 6px; max-width: 42ch; } /* ========================================================================== FLOATING ACTIONS — Call / WhatsApp / Chat ========================================================================== */ .fab-stack { position: fixed; right: 20px; bottom: 20px; z-index: 950; display: flex; flex-direction: column-reverse; gap: 12px; align-items: flex-end; } .fab { width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--white); box-shadow: 0 8px 22px rgba(18,31,46,0.28); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .fab:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18,31,46,0.34); } .fab svg { width: 24px; height: 24px; } .fab-call { background: var(--blue); } .fab-whatsapp { background: #25d366; } .fab-chat { background: var(--navy); } .fab-chat .dot-badge { position: absolute; top: -2px; right: -2px; width: 13px; height: 13px; background: var(--red); border: 2px solid var(--white); border-radius: 50%; } @media (max-width: 480px) { .fab-stack { right: 14px; bottom: 14px; gap: 10px; } .fab { width: 48px; height: 48px; } .fab svg { width: 21px; height: 21px; } } /* ========================================================================== CHATBOT PANEL ========================================================================== */ .chat-panel { position: fixed; right: 20px; bottom: 88px; z-index: 960; width: 372px; max-width: calc(100vw - 28px); height: 540px; max-height: calc(100vh - 120px); background: var(--white); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.98); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s; } .chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } @media (max-width: 480px) { .chat-panel { right: 14px; bottom: 72px; width: calc(100vw - 28px); height: calc(100vh - 100px); } } .chat-head { background: var(--navy); color: var(--white); padding: 16px 16px 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .chat-head .who { display: flex; align-items: center; gap: 11px; } .chat-head .avatar { width: 36px; height: 36px; background: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; flex-shrink: 0; } .chat-head h4 { color: var(--white); font-size: 15px; margin: 0; font-weight: 600; } .chat-head .status { font-size: 11.5px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 5px; margin-top: 2px; } .chat-head .status .dot { width: 6px; height: 6px; background: #3ecf7a; border-radius: 50%; flex-shrink: 0; } .chat-close { background: none; border: none; color: var(--white); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .chat-close svg { width: 18px; height: 18px; } .chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ice-gray); } .chat-msg { max-width: 84%; padding: 10px 13px; font-size: 13.5px; line-height: 1.55; border-radius: var(--radius); } .chat-msg.bot { align-self: flex-start; background: var(--white); border: 1px solid var(--neutral-200); color: var(--navy); } .chat-msg.user { align-self: flex-end; background: var(--blue); color: var(--white); } .chat-msg a { color: inherit; text-decoration: underline; } .chat-msg ul { margin-top: 6px; padding-left: 18px; } .chat-msg li { margin-top: 2px; } .chat-quick { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; } .chat-quick button { border: 1.3px solid var(--blue); color: var(--blue); background: var(--white); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius); cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); } .chat-quick button:hover { background: var(--blue); color: var(--white); } .chat-typing { display: flex; gap: 4px; align-self: flex-start; padding: 12px 14px; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius); } .chat-typing span { width: 6px; height: 6px; background: var(--neutral-400); border-radius: 50%; animation: chatTyping 1.1s infinite ease-in-out; } .chat-typing span:nth-child(2) { animation-delay: 0.15s; } .chat-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes chatTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .chat-lead-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .chat-lead-form input, .chat-lead-form select, .chat-lead-form textarea { padding: 9px 11px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius); font-size: 13.5px; font-family: var(--font-body); color: var(--navy); } .chat-lead-form textarea { min-height: 60px; resize: vertical; } .chat-lead-form button { align-self: flex-start; } .chat-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--neutral-200); background: var(--white); flex-shrink: 0; } .chat-input-row input { flex: 1; border: 1.5px solid var(--neutral-200); padding: 10px 13px; font-size: 13.5px; border-radius: var(--radius); font-family: var(--font-body); min-width: 0; } .chat-input-row input:focus { outline: none; border-color: var(--blue); } .chat-input-row button { width: 40px; height: 40px; background: var(--red); color: var(--white); border: none; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background-color 0.15s var(--ease); } .chat-input-row button:hover { background: var(--red-dark); } .chat-input-row button svg { width: 17px; height: 17px; } .chat-foot-note { font-size: 10.5px; color: var(--neutral-400); text-align: center; padding: 6px 0 10px; } /* ========================================================================== TRADE-LANE WORLD MAP — real Natural Earth geography, baked to static SVG at build time. Vehicles travel the routes via SVG animateMotion, so the motion costs no JavaScript and no layout work. ========================================================================== */ .map-panel { position: relative; background: var(--navy); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; } .map-legend-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); } .mp-key { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72); } .mp-key i { width: 22px; height: 0; border-top: 2px dashed currentColor; display: block; } .mp-key--sea { color: #8ca3bf; } .mp-key--rail { color: #d7362c; } .mp-key--air { color: #eef2f5; } .mp-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.75); border-radius: var(--radius); padding: 7px 13px; font-size: 12px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); } .mp-toggle:hover { background: rgba(255,255,255,0.1); color: var(--white); } .mp-toggle svg { width: 13px; height: 13px; } .map-canvas { position: relative; padding: 8px 0 0; } .map-canvas::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .mp-svg { position: relative; display: block; width: 100%; height: auto; } .mp-sphere { fill: #0d1826; stroke: rgba(255,255,255,0.07); stroke-width: 1; } .mp-land { fill: #1d2c3f; stroke: #2b3d53; stroke-width: 0.6; stroke-linejoin: round; } .mp-route { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: 0.9; } .mp-route--sea { stroke: #8ca3bf; stroke-dasharray: 1 9; } .mp-route--rail { stroke: #d7362c; stroke-dasharray: 7 7; opacity: 0.75; } .mp-route--air { stroke: #eef2f5; stroke-dasharray: 2 8; opacity: 0.5; } .mp-dot { fill: var(--blue-200); } .mp-place--gateway .mp-dot { fill: var(--white); } .mp-place--hq .mp-dot { fill: var(--red); } .mp-ping { fill: none; stroke: var(--red); stroke-width: 1.6; transform-origin: center; animation: mpPing 3s ease-out infinite; } @keyframes mpPing { 0% { r: 6.5; opacity: 0.9; } 70% { r: 26; opacity: 0; } 100% { r: 26; opacity: 0; } } .mp-label { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: rgba(255,255,255,0.82); letter-spacing: 0.02em; paint-order: stroke; stroke: rgba(13,24,38,0.85); stroke-width: 3px; stroke-linejoin: round; } .mp-place--hq .mp-label { fill: var(--white); font-size: 17px; } .mp-veh { fill: var(--white); } .mp-veh--sea { fill: #cfe0f5; } .mp-veh--rail { fill: #ff6a5e; } .mp-veh--air { fill: #ffffff; } /* SVG text scales with the viewBox, so below ~760px the place labels would render under ~7px. Hide them there and let the lane list carry the names. */ @media (max-width: 760px) { .mp-label { display: none; } .mp-dot { r: 6; } } .map-lanes { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.08); } @media (min-width: 700px) { .map-lanes { grid-template-columns: repeat(4, 1fr); } } .map-lanes li { background: var(--navy); padding: 18px 20px; font-size: 13.5px; color: rgba(255,255,255,0.62); } .map-lanes li strong { display: block; color: var(--white); font-size: 14.5px; margin-bottom: 4px; font-family: var(--font-head); font-weight: 600; } /* Respect the OS setting: freeze every vehicle and the ping ring. */ @media (prefers-reduced-motion: reduce) { .mp-ping { animation: none; opacity: 0.5; } } .map-panel.is-paused .mp-ping { animation-play-state: paused; } /* ========================================================================== TEAM DIRECTORY — portrait cards that work with or without photography. Each card paints a monogram, then layers a photo on top. If the photo file is absent the removes itself (onerror) and the monogram stands in, so the page never shows a broken portrait. ========================================================================== */ .team-directory { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .team-directory { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .team-directory { grid-template-columns: repeat(4, 1fr); } } .tm-card { background: var(--white); border: 1px solid var(--neutral-200); display: flex; flex-direction: column; } .section-alt .tm-card { background: var(--white); } .tm-portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--blue); display: flex; align-items: center; justify-content: center; } .tm-monogram { font-family: var(--font-head); font-weight: 800; font-size: 54px; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); } /* Unifies inconsistent source photos: everything is cropped to the same 4:5 frame, desaturated toward the brand navy, and given a consistent scrim — so a mix of phone snaps and studio shots still reads as one set. */ .tm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(0.35) contrast(1.04); transition: filter 0.5s var(--ease), transform 0.6s var(--ease); } .tm-card:hover .tm-photo { filter: grayscale(0) contrast(1); transform: scale(1.04); } .tm-portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18,31,46,0) 45%, rgba(18,31,46,0.38) 100%); } .tm-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; } .tm-body h3 { color: var(--navy); font-size: 19px; } .tm-role { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--red); } .tm-bio { margin-top: 12px; font-size: 14.5px; color: var(--charcoal); } .tm-owns { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--neutral-200); } .tm-owns ul { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; } .tm-owns li { font-size: 13.5px; color: var(--navy); padding-left: 14px; position: relative; } .tm-owns li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--blue); } .tm-contact { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 7px; } .tm-contact a { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal); word-break: break-word; } .tm-contact a:hover { color: var(--blue); } .tm-contact svg { width: 14px; height: 14px; color: var(--blue); } /* ========================================================================== VISION & MISSION — a navy statement band. Two large statements, then the four values as a quieter row beneath. Deliberately typographic: no stock photography behind abstract claims. ========================================================================== */ .vm-section { background: var(--navy); color: var(--white); padding: 92px 0; position: relative; overflow: hidden; } .vm-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; } .vm-section .container { position: relative; } .vm-head { max-width: 640px; } .vm-head h2 { color: var(--white); margin-top: 12px; } .vm-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,0.12); margin-top: 48px; border: 1px solid rgba(255,255,255,0.12); } @media (min-width: 860px) { .vm-grid { grid-template-columns: repeat(2, 1fr); } } .vm-card { background: var(--navy); padding: 38px 34px; position: relative; } .vm-num { font-family: var(--font-mono); font-size: 12.5px; color: var(--red); letter-spacing: 0.1em; } .vm-card h3 { color: var(--white); margin-top: 10px; font-size: 24px; } .vm-card p { margin-top: 16px; color: rgba(255,255,255,0.78); max-width: 46ch; font-size: 19px; line-height: 1.55; font-weight: 300; } .vm-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 28px; margin-top: 54px; } @media (min-width: 900px) { .vm-values { grid-template-columns: repeat(4, 1fr); } } .vm-value .icon { width: 26px; height: 26px; color: var(--red); display: block; margin-bottom: 14px; } .vm-value .icon svg { width: 100%; height: 100%; } .vm-value h4 { color: var(--white); font-size: 16px; } .vm-value p { margin-top: 7px; font-size: 14.5px; color: rgba(255,255,255,0.6); } /* ========================================================================== SERVICE DETAIL PAGES — steps, the honest "when not to use this" callout, and the case-study proof block. ========================================================================== */ .svc-steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--neutral-200); border: 1px solid var(--neutral-200); } @media (min-width: 700px) { .svc-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .svc-steps { grid-template-columns: repeat(3, 1fr); } } .svc-step { background: var(--white); padding: 30px 26px; } .section-alt .svc-step { background: var(--white); } .svc-step-no { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--red); letter-spacing: 0.08em; } .svc-step h3 { color: var(--navy); margin-top: 10px; font-size: 19px; } .svc-step p { margin-top: 10px; font-size: 15px; color: var(--charcoal); } .svc-caution { border-left: 3px solid var(--red); padding: 4px 0 4px 22px; } .svc-caution .icon { width: 24px; height: 24px; color: var(--red); display: block; margin-bottom: 12px; } .svc-caution .icon svg { width: 100%; height: 100%; } .svc-caution h3 { color: var(--navy); } .svc-caution p { margin-top: 12px; font-size: 16px; color: var(--charcoal); } .svc-case { display: grid; grid-template-columns: 1fr; gap: 28px; background: var(--white); border: 1px solid var(--neutral-200); padding: 36px 32px; } @media (min-width: 860px) { .svc-case { grid-template-columns: 240px 1fr; gap: 48px; align-items: start; } } .svc-case-metric .num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(48px, 6vw, 76px); line-height: 1; color: var(--blue); letter-spacing: -0.02em; } .svc-case-metric .cap { display: block; margin-top: 10px; font-size: 14.5px; color: var(--charcoal); } .svc-case-body p { font-size: 17px; color: var(--charcoal); } /* ========================================================================== LANGUAGE SWITCHER — our own control; Google's widget is mounted hidden and driven from here so the header stays on brand. ========================================================================== */ .lang-switch { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72); transition: color 0.2s var(--ease); } .lang-btn:hover { color: var(--white); } .lang-btn svg { width: 14px; height: 14px; color: var(--red); } .lang-btn .lang-caret { width: 11px; height: 11px; color: currentColor; transition: transform 0.2s var(--ease); } .lang-switch.is-open .lang-caret { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; min-width: 182px; background: var(--white); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-lg); border-radius: var(--radius); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-menu button { background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 13px; color: var(--navy); padding: 8px 10px; border-radius: var(--radius); white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease); } .lang-menu button:hover { background: var(--ice-gray); color: var(--blue); } /* Mobile: inside the drawer, on a light ground */ .m-lang { margin-top: 4px; padding: 14px 4px 0; border-top: 1px solid var(--neutral-200); } .lang-switch--mobile .lang-btn { color: var(--navy); font-size: 15px; font-weight: 600; } .lang-switch--mobile .lang-menu { right: auto; left: 0; } /* Google's own chrome: the banner iframe, tooltip balloon and body offset all have to be suppressed or they break the fixed header. Scoped to `body >` deliberately. A blanket `.skiptranslate { display:none }` also hits the gadget mounted inside #google_translate_element — and that gadget holds the