/* ============================================================ Fonts: Lexend (headings) + Source Sans 3 (body). Loaded from Google Fonts in base.html . Reliable, open-licensed, and recommended for a trust/authority brand. ============================================================ */ /* ============================================================ Fast & Smart Logistics — monochrome design system Light base · dark sections · near-black accents only ============================================================ */ :root { /* light surfaces */ --bg: #ffffff; --surface: #fafafa; --surface-2: #f4f4f5; --border: #e4e4e7; /* ink (near-black) */ --ink: #0a0a0a; --ink-2: #18181b; --muted: #6b7280; --muted-2: #9ca3af; /* dark sections */ --dark: #0a0a0a; --dark-2: #141414; --dark-border: #262626; --dark-text: #fafafa; --dark-muted: #a1a1aa; /* shape */ --radius: 8px; --radius-sm: 4px; --maxw: 1180px; --font-head: "Lexend", system-ui, -apple-system, sans-serif; --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif; } /* ----------------------------- reset ----------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); } h3 { font-size: 1.2rem; letter-spacing: -0.01em; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .narrow { max-width: 760px; } .center { text-align: center; } .muted { color: var(--muted); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; } .skip-link:focus { left: 0; } .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } /* ----------------------------- buttons ----------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 14px 28px; border-radius: var(--radius-sm); border: 1px solid var(--ink); cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: #2d2d2d; border-color: #2d2d2d; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn-ghost:hover { border-color: var(--ink); } .btn-light { background: #fff; color: var(--ink); border-color: #fff; } .btn-light:hover { background: transparent; color: #fff; border-color: #fff; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn-outline-light:hover { border-color: #fff; } /* ----------------------------- header / nav ----------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-bar { display: flex; align-items: center; gap: 20px; height: 72px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--ink); } .brand-mark { flex: none; height: 40px; width: auto; display: block; } .site-footer .brand-mark { height: 46px; } .brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.05; letter-spacing: -0.01em; display: flex; flex-direction: column; } .brand-name-sub { font-family: var(--font-body); font-size: .62rem; font-weight: 600; color: var(--muted); letter-spacing: .24em; text-transform: uppercase; margin-top: 3px; } .nav-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-link { padding: 8px 14px; font-weight: 500; font-size: .92rem; color: var(--muted); transition: color .15s; } .nav-link:hover { color: var(--ink); } .nav-link.active { color: var(--ink); } .lang-switch { display: inline-flex; gap: 1px; padding: 2px; margin: 0 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .lang-pill { padding: 5px 10px; border-radius: 3px; font-size: .76rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; } .lang-pill.active { background: var(--ink); color: #fff; } .nav-cta { padding: 10px 20px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; } .nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ----------------------------- hero (dark) ----------------------------- */ .hero { background: var(--dark); color: var(--dark-text); padding: clamp(64px, 10vw, 132px) 0 clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--dark-border); } .hero .eyebrow { color: var(--dark-muted); } .hero-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 64px; align-items: center; } .hero-copy h1 { color: #fff; margin-bottom: 24px; } .hero-copy .lead { font-size: 1.15rem; color: var(--dark-muted); max-width: 540px; margin-bottom: 36px; line-height: 1.7; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-panel { border: 1px solid var(--dark-border); border-radius: var(--radius); background: var(--dark-2); padding: 8px 26px; } .panel-row { display: flex; flex-direction: column; gap: 5px; padding: 22px 0; border-bottom: 1px solid var(--dark-border); } .panel-row:last-child { border-bottom: 0; } .panel-label { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dark-muted); } .panel-row strong { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; color: #fff; letter-spacing: -0.01em; } .panel-row small { color: var(--dark-muted); font-size: .82rem; } .panel-row a, .panel-row span:not(.panel-label) { color: #fff; font-weight: 500; } .panel-row a:hover { text-decoration: underline; } /* ----------------------------- stats ----------------------------- */ .stats { border-bottom: 1px solid var(--border); background: var(--bg); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { text-align: left; padding: 44px 28px; border-right: 1px solid var(--border); } .stat:last-child { border-right: 0; } .stat-num { display: block; font-family: var(--font-head); font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--ink); letter-spacing: -0.03em; } .stat-label { display: block; margin-top: 12px; color: var(--muted); font-size: .86rem; } /* ----------------------------- sections ----------------------------- */ .section { padding: clamp(40px, 5vw, 72px) 0; } .section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .section .muted { margin-bottom: 32px; max-width: 600px; font-size: 1.02rem; } .section-head + .muted { margin-top: 8px; } .link-arrow { color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .link-arrow:hover { opacity: .6; } .page-head { padding: clamp(28px, 3.2vw, 40px) 0 clamp(14px, 2vw, 22px); background: var(--bg); border-bottom: 1px solid var(--border); } .page-head h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin-top: 6px; } .page-head .lead { font-size: 1.1rem; color: var(--muted); margin-top: 12px; line-height: 1.6; } .page-head + .section { padding-top: clamp(28px, 3vw, 40px); } /* ----------------------------- grids & cards ----------------------------- */ .grid { display: grid; gap: 0; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* bordered grid look (minimal, no shadows) */ .card { background: var(--bg); border: 1px solid var(--border); margin: -0.5px; padding: 36px 32px; transition: background .18s ease; } .card:hover { background: var(--surface); } .card h3 { margin-bottom: 10px; } .card .muted { margin-bottom: 0; font-size: .96rem; } .card-index { display: block; font-family: var(--font-head); font-size: .82rem; font-weight: 500; color: var(--muted-2); margin-bottom: 22px; letter-spacing: .05em; } .ic { width: 28px; height: 28px; display: block; margin-bottom: 22px; color: var(--ink); } .service-lg { padding: 48px 40px; } .service-lg .ic { width: 32px; height: 32px; } /* countries */ .country-grid { grid-template-columns: repeat(4, 1fr); } .country { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 1px solid var(--border); margin: -0.5px; padding: 24px 26px; font-weight: 500; font-family: var(--font-head); font-size: 1.05rem; letter-spacing: -0.01em; transition: background .18s; } .country:hover { background: var(--surface); } .country .idx { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--muted-2); } .country-lg { padding: 30px 28px; font-size: 1.15rem; } /* partners */ .partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .partner-tile { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 180px; padding: 36px; background: #ffffff; border: 1px solid var(--border); margin: -0.5px; transition: background .18s, transform .18s; } .partner-tile:hover { background: var(--surface); transform: translateY(-3px); } .partner-logo { max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; filter: grayscale(0); opacity: 1; } .partner-name { display: none; font-family: var(--font-head); font-weight: 600; color: var(--ink); } .partner-tile.no-logo .partner-logo { display: none; } .partner-tile.no-logo .partner-name { display: inline-flex; color: var(--muted); } /* ----------------------------- coverage route ----------------------------- */ .route-line { display: flex; align-items: center; gap: 0; justify-content: center; margin-top: 44px; flex-wrap: wrap; } .route-node { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; padding: 0 18px; white-space: nowrap; } .route-track { position: relative; flex: 1; min-width: 80px; max-width: 220px; height: 1px; background: var(--border); } .route-track::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); } /* ----------------------------- CTA band (dark) ----------------------------- */ .cta-band { background: var(--dark); color: #fff; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(56px, 8vw, 96px) 28px; flex-wrap: wrap; } .cta-inner h2 { color: #fff; max-width: 620px; } .cta-inner p { color: var(--dark-muted); margin-top: 12px; max-width: 520px; } /* ----------------------------- contact ----------------------------- */ .contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; } .contact-form { display: grid; gap: 20px; } .field { display: grid; gap: 8px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field label { font-size: .76rem; font-weight: 600; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; } .field input, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; color: var(--ink); font-family: var(--font-body); font-size: 1rem; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); } .contact-form .btn { justify-self: start; margin-top: 6px; } .alert-success { background: var(--ink); color: #fff; padding: 15px 20px; border-radius: var(--radius-sm); margin-bottom: 24px; font-weight: 500; } .contact-info { display: grid; gap: 28px; } .info-item { display: grid; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .info-item:last-child { border-bottom: 0; } .info-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); } .info-item a, .info-item > span:not(.info-label) { font-family: var(--font-head); font-weight: 500; font-size: 1.05rem; } .info-item a:hover { text-decoration: underline; } .info-cert strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1rem; } .info-cert small { color: var(--muted); font-size: .85rem; } /* ----------------------------- footer (dark) ----------------------------- */ .site-footer { background: var(--dark); color: var(--dark-text); margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; padding: clamp(56px, 7vw, 88px) 28px 40px; } .site-footer .brand { color: #fff; } .footer-about { color: var(--dark-muted); margin-top: 18px; max-width: 320px; font-size: .95rem; } .footer-col h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--dark-muted); margin-bottom: 18px; font-family: var(--font-body); font-weight: 600; } .footer-col a, .footer-col span { display: block; color: var(--dark-text); margin-bottom: 11px; font-size: .95rem; } .footer-col a:hover { color: var(--dark-muted); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 28px 36px; border-top: 1px solid var(--dark-border); color: var(--dark-muted); font-size: .8rem; } /* ----------------------------- responsive ----------------------------- */ @media (max-width: 900px) { .nav-toggle { display: flex; } .nav-menu { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--border); padding: 16px 28px 28px; margin: 0; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .22s; } .nav-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-link { padding: 13px 4px; } .lang-switch { width: max-content; margin: 10px 0; } .nav-cta { margin-top: 8px; } .hero-grid { grid-template-columns: 1fr; gap: 44px; } .grid-4, .partner-grid, .country-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat { border-bottom: 1px solid var(--border); } .contact-grid { grid-template-columns: 1fr; gap: 40px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { /* keep things in a compact 2-up grid instead of one long column */ .grid-2 { grid-template-columns: 1fr; } .grid-4, .partner-grid, .country-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); } .section { padding: clamp(38px, 9vw, 60px) 0; } .section .muted { margin-bottom: 28px; } .stat { padding: 22px 14px; } .stat-ic { width: 40px; height: 40px; margin-bottom: 12px; } /* stack flag over name so long country names never clip */ .country, .country-lg { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; } .country-flag, .country-lg .country-flag { width: 46px; height: 32px; } .country-name, .country-lg .country-name { font-size: .98rem; overflow-wrap: anywhere; } .field-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .cta-inner { flex-direction: column; align-items: flex-start; } .route-track { max-width: 60px; } /* keep the truck in frame on a narrow screen */ .hero::before { background-position: 70% 24%; } .hero-streak { display: none; } /* partners: shorter tiles instead of huge boxes */ .partner-tile { min-height: 96px; padding: 16px; } .partner-logo { max-height: 60px; } .partner-name { font-size: .85rem; } /* testimonials: swipeable row instead of a long vertical list */ .quote-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-top: 8px; padding-bottom: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .quote-grid::-webkit-scrollbar { display: none; } .quote-card { flex: 0 0 86%; scroll-snap-align: center; padding: 18px 18px 16px; gap: 10px; } .quote-mark { font-size: 2rem; } .quote-card blockquote { font-size: .94rem; line-height: 1.5; } .quote-avatar { width: 36px; height: 36px; } } /* ============================================================ Brand accents — red + blue, used sparingly on a mono base ============================================================ */ :root { --red: #ea580c; --blue: #2563eb; } /* accent orange + primary blue */ /* thin brand stripe across the very top of the site */ .site-header { border-top: 3px solid var(--blue); } .site-header::before { content: ""; position: absolute; top: -3px; left: 0; width: 50%; height: 3px; background: var(--red); } .site-header { position: sticky; } /* recurring red+blue marker placed above eyebrows / headings */ .bars { display: flex; gap: 4px; margin-bottom: 16px; } .bars i { display: block; width: 22px; height: 4px; border-radius: 1px; } .bars i:first-child { background: var(--red); } .bars i:last-child { background: var(--blue); } .center .bars { margin-left: auto; margin-right: auto; width: max-content; } /* logo accent bars (footer brand) */ .brand-bars { display: flex; gap: 4px; margin-top: 10px; } .brand-bars i { display: block; width: 20px; height: 3px; border-radius: 1px; } .brand-bars i:first-child { background: var(--red); } .brand-bars i:last-child { background: var(--blue); } /* functional accents (blue for interaction) */ .nav-link.active { box-shadow: inset 0 -2px 0 var(--blue); } .link-arrow:hover { color: var(--blue); border-color: var(--blue); opacity: 1; } .field input:focus, .field textarea:focus { border-color: var(--blue); } .info-item a:hover { color: var(--blue); text-decoration: none; } .panel-row a:hover { color: #fff; } .footer-col a:hover { color: #fff; } /* coverage route: red origin dot, blue arrow head */ .route-track::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .route-track::after { border-top-color: var(--blue); border-right-color: var(--blue); } /* stat numbers: accent underline now handled per-color in the stats block below */ /* CTA accent button keeps white; add bars motif on dark bands (vivid on black) */ .cta-band .bars i, .hero .bars i, .site-footer .bars i { height: 4px; } /* ============================================================ VIBRANT THEME LAYER — bold color + real photography (appended last so it overrides the mono base) ============================================================ */ :root{ --indigo:#1e3a8a; --indigo-2:#1e40af; --red-2:#c2410c; --blue-2:#2563eb; --amber:#ea580c; --teal:#2563eb; --green:#2563eb; --tint-blue:#eef2ff; --tint-red:#fff7ed; --tint-cream:#fdf7ee; } /* ---------- HERO: real photo + vivid red/blue overlay ---------- */ .hero{ position:relative; isolation:isolate; overflow:hidden; border-bottom:0; background:var(--indigo); } /* moving image layer — drone tracks the truck forward along the road */ .hero::before{ content:""; position:absolute; inset:-8%; z-index:-2; will-change:transform; background:var(--indigo) url('/static/img/photos/hero.jpg') center/cover no-repeat; animation:heroDrive 16s ease-in-out infinite alternate; } /* overlay: dark on the left for text, clears toward the top-right so the truck pops */ .hero::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(13,17,42,.94) 0%, rgba(13,17,42,.80) 32%, rgba(13,17,42,.34) 64%, rgba(13,17,42,.10) 100%), linear-gradient(180deg, rgba(13,17,42,.16) 0%, rgba(13,17,42,.04) 42%, rgba(13,17,42,.44) 100%); } /* light streak that races up the road to sell the speed */ .hero-streak{ position:absolute; z-index:-1; top:-30%; left:35%; width:34%; height:170%; transform:rotate(31deg); transform-origin:center; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 100%); filter:blur(7px); mix-blend-mode:screen; pointer-events:none; animation:heroStreak 4.6s linear infinite; } @keyframes heroDrive{ 0%{ transform:scale(1.16) translate3d(-3%,3%,0); } 100%{ transform:scale(1.16) translate3d(3%,-3%,0); } } @keyframes heroStreak{ 0%{ transform:rotate(31deg) translateY(60%); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:rotate(31deg) translateY(-60%); opacity:0; } } @media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; transform:scale(1.05); } .hero-streak{ display:none; } } /* ---------- STATS: one brand color per stat ---------- */ .stats{ background:var(--indigo); border:0; } .stat{ border-right:1px solid rgba(255,255,255,.16); border-top:4px solid transparent; } .stat:last-child{ border-right:0; } .stat-num{ color:#fff !important; box-shadow:none !important; } .stat-label{ color:rgba(255,255,255,.78); } /* per-stat accent colors: red / blue / amber / green */ .stat:nth-child(1){ border-top-color:var(--red); } .stat:nth-child(2){ border-top-color:var(--blue); } .stat:nth-child(3){ border-top-color:var(--amber); } .stat:nth-child(4){ border-top-color:var(--green); } .stat:nth-child(1) .stat-ic{ background:rgba(234,88,12,.20); border-color:rgba(234,88,12,.55); color:#fb923c; } .stat:nth-child(2) .stat-ic{ background:rgba(29,78,216,.22); border-color:rgba(29,78,216,.55); color:#7aa2ff; } .stat:nth-child(3) .stat-ic{ background:rgba(245,158,11,.20); border-color:rgba(245,158,11,.55); color:#ffc861; } .stat:nth-child(4) .stat-ic{ background:rgba(16,185,129,.20); border-color:rgba(16,185,129,.55); color:#5fe3b0; } .stat:nth-child(1) .stat-ic .ic{ color:#ff6b76; } .stat:nth-child(2) .stat-ic .ic{ color:#7aa2ff; } .stat:nth-child(3) .stat-ic .ic{ color:#ffc861; } .stat:nth-child(4) .stat-ic .ic{ color:#5fe3b0; } /* ---------- tinted section bands (kill the empty white) ---------- */ .section-alt{ background:var(--tint-blue); border-color:#dbe1f7; } .section-tint-blue{ background:var(--tint-blue); border-top:1px solid #dbe1f7; border-bottom:1px solid #dbe1f7; } .section-tint-red{ background:var(--tint-red); } .section-tint-cream{ background:var(--tint-cream); border-top:1px solid #f0e6d3; border-bottom:1px solid #f0e6d3; } /* inner page headers get a soft gradient instead of flat white */ .page-head{ background:linear-gradient(180deg,var(--tint-blue) 0%, #ffffff 100%); border-bottom:1px solid #dbe1f7; } /* ---------- WHY cards: colored icon chips ---------- */ .why-card{ text-align:left; } .why-card .ic{ box-sizing:content-box; width:24px; height:24px; padding:14px; border-radius:16px; margin-bottom:22px; } .why-card:nth-child(1) .ic{ background:var(--tint-red); color:var(--red); } .why-card:nth-child(2) .ic{ background:var(--tint-blue); color:var(--blue); } .why-card:nth-child(3) .ic{ background:var(--tint-blue); color:var(--blue); } .why-card:nth-child(4) .ic{ background:#fff7ed; color:var(--amber); } .why-card:hover{ background:#fff; } /* ---------- SERVICE cards: real photo media ---------- */ .service-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; } .service-card:hover{ background:#fff; } .card-media{ height:160px; background-color:var(--indigo); background-size:cover; background-position:center; position:relative; } .card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,35,.10) 40%, rgba(8,10,35,.45)); } .card-media-lg{ height:240px; } .service-card .card-body{ padding:28px 30px 32px; } .service-card.service-lg .card-body{ padding:34px 40px 42px; } .service-card .card-body h3{ margin-bottom:10px; } /* ---------- COVERAGE countries: cycling color accent ---------- */ .country{ border-left:4px solid transparent; } .country .idx{ color:var(--blue); font-weight:700; } .country:nth-child(4n+1){ border-left-color:var(--red); } .country:nth-child(4n+2){ border-left-color:var(--blue); } .country:nth-child(4n+3){ border-left-color:var(--amber); } .country:nth-child(4n) { border-left-color:var(--green); } .country:hover{ background:#fff; } /* ---------- nav CTA: vibrant gradient pill ---------- */ .nav-cta.btn-primary{ background:linear-gradient(120deg,var(--red) 0%, var(--blue) 100%); border:0; color:#fff; } .nav-cta.btn-primary:hover{ filter:brightness(1.08); } /* ---------- CTA band: vivid gradient ---------- */ .cta-band{ background:linear-gradient(120deg,#0a0a0a 0%, var(--indigo-2) 58%, #7c2d12 100%); } /* keep the brand stripe punchy */ .bars i{ height:5px; } /* ============================================================ COVERAGE — flag tiles + livelier interaction ============================================================ */ .country{ position:relative; display:flex; align-items:center; gap:16px; border-left:4px solid transparent; transition: transform .22s ease, box-shadow .22s ease, background .18s ease; } .country:hover{ transform:translateY(-4px); background:#fff; z-index:2; box-shadow:0 14px 32px rgba(15,23,42,.14); } .country-flag{ width:48px; height:34px; flex:none; object-fit:cover; border-radius:5px; box-shadow:0 1px 4px rgba(0,0,0,.22); transition: transform .22s ease; } .country:hover .country-flag{ transform:scale(1.06); } .country-meta{ display:flex; flex-direction:column; gap:2px; line-height:1.18; min-width:0; } .country-meta .idx{ font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--blue); } .country-name{ font-family:var(--font-head); font-weight:600; font-size:1.02rem; letter-spacing:-0.01em; color:var(--ink); } .country-lg{ padding:26px 28px; } .country-lg .country-flag{ width:62px; height:42px; } .country-lg .country-name{ font-size:1.16rem; } /* animated red→blue route line */ .route-track{ height:3px; border-radius:2px; overflow:visible; background:linear-gradient(90deg,var(--red),var(--blue)); } .route-track::before{ background:var(--red); box-shadow:0 0 0 4px rgba(234,88,12,.18); } .route-track::after{ border-top-color:var(--blue); border-right-color:var(--blue); } /* a glowing pulse that travels the line */ .route-track{ position:relative; } .route-pulse{ position:absolute; top:50%; left:0; width:11px; height:11px; margin-top:-5.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.55), 0 0 12px 2px rgba(37,99,235,.8); animation: routeRun 2.6s ease-in-out infinite; } @keyframes routeRun{ 0%{ left:0%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:100%; opacity:0; } } @media (prefers-reduced-motion: reduce){ .route-pulse{ animation:none; opacity:0; } } /* ============================================================ PARTNERS — always full color, always bright (no fade) ============================================================ */ .partner-logo{ filter:grayscale(0); opacity:1; } /* ============================================================ WHATSAPP floating button ============================================================ */ .wa-fab{ position:fixed; right:22px; bottom:22px; z-index:120; display:inline-flex; align-items:center; gap:0; height:58px; padding:0; width:58px; overflow:hidden; background:#25d366; color:#fff; border-radius:30px; box-shadow:0 8px 22px rgba(37,211,102,.45); transition: width .28s ease, box-shadow .2s ease, transform .2s ease; } .wa-fab svg{ width:30px; height:30px; flex:none; margin:0 14px; } .wa-fab-text{ font-family:var(--font-body); font-weight:600; font-size:.95rem; white-space:nowrap; opacity:0; transition:opacity .2s ease .05s; padding-right:4px; } .wa-fab:hover{ width:168px; box-shadow:0 10px 26px rgba(37,211,102,.6); transform:translateY(-2px); } .wa-fab:hover .wa-fab-text{ opacity:1; } .wa-fab:focus-visible{ outline:3px solid #fff; outline-offset:2px; } /* gentle attention pulse — only on hover/focus, not infinite */ @keyframes waPulse{ 0%,100%{ box-shadow:0 8px 22px rgba(37,211,102,.45);} 50%{ box-shadow:0 8px 22px rgba(37,211,102,.45), 0 0 0 10px rgba(37,211,102,.0);} } .wa-fab:hover, .wa-fab:focus-visible{ animation:waPulse 2.4s ease-out infinite; } @media (max-width:560px){ .wa-fab{ right:16px; bottom:16px; } } @media (prefers-reduced-motion: reduce){ .wa-fab, .wa-fab:hover, .wa-fab:focus-visible{ animation:none; } } /* ============================================================ GALLERY · TESTIMONIALS · FAQ · ROUTE MAP ============================================================ */ /* fleet gallery */ .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; } .gallery-item{ margin:0; overflow:hidden; border-radius:12px; aspect-ratio:3/2; background:var(--surface-2); border:1px solid var(--border); } .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .gallery-item:hover img{ transform:scale(1.07); } @media(max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:480px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } } /* testimonials */ .grid-3{ grid-template-columns:repeat(3,1fr); } .quote-grid{ gap:16px; margin-top:8px; } .quote-card{ margin:0; background:#fff; border:1px solid var(--border); border-radius:14px; padding:30px 28px 26px; display:flex; flex-direction:column; gap:16px; transition:transform .2s ease, box-shadow .2s ease; } .quote-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(15,23,42,.10); } .quote-mark{ font-family:var(--font-head); font-size:3rem; line-height:.5; color:var(--blue); } .quote-card blockquote{ margin:0; font-size:1.02rem; color:var(--ink); line-height:1.62; flex:1; } .quote-card figcaption{ display:flex; align-items:center; gap:12px; } .quote-avatar{ width:42px; height:42px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:600; color:#fff; background:linear-gradient(135deg,var(--red),var(--blue)); } .quote-who{ display:flex; flex-direction:column; line-height:1.2; } .quote-who strong{ font-family:var(--font-head); font-weight:600; } .quote-who small{ color:var(--muted); font-size:.82rem; } @media(max-width:900px){ .grid-3{ grid-template-columns:1fr; } } /* faq accordion */ .faq-list{ margin-top:12px; border-top:1px solid var(--border); } .faq-item{ border-bottom:1px solid var(--border); } .faq-item summary{ cursor:pointer; list-style:none; padding:20px 44px 20px 4px; position:relative; font-family:var(--font-head); font-weight:600; font-size:1.06rem; color:var(--ink); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--blue); } .faq-item[open] summary::after{ content:"\2212"; } .faq-item p{ margin:0 0 22px; color:var(--muted); max-width:700px; } /* route map */ .map-wrap{ margin-top:30px; border:1px solid #dbe1f7; border-radius:16px; background:linear-gradient(180deg,#f6f8ff,#ffffff); padding:10px; overflow:hidden; } .route-map{ width:100%; height:auto; display:block; } .route-path{ fill:none; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:9 13; animation:dashFlow 1.3s linear infinite; } .r-red{ stroke:var(--red); } .r-blue{ stroke:var(--blue); } .r-amber{ stroke:var(--amber); } .r-green{ stroke:var(--green); } @keyframes dashFlow{ to{ stroke-dashoffset:-44; } } .map-node circle{ stroke:#fff; stroke-width:3; } .n-red{ fill:var(--red); } .n-blue{ fill:var(--blue); } .n-amber{ fill:var(--amber); } .n-green{ fill:var(--green); } .map-node text, .map-hub text{ font-family:var(--font-head); font-weight:700; font-size:20px; fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; } .hub-ring{ fill:none; stroke:var(--ink); stroke-width:3; transform-origin:550px 250px; animation:hubPulse 2.2s ease-out infinite; } .hub-dot{ fill:var(--ink); } @keyframes hubPulse{ 0%{ r:16; opacity:.9; } 70%{ r:34; opacity:0; } 100%{ opacity:0; } } @media(prefers-reduced-motion:reduce){ .route-path,.hub-ring{ animation:none; } } /* richer map: reach rings, running trucks, legend */ .reach-ring{ fill:none; stroke:rgba(29,78,216,.18); stroke-width:1.5; stroke-dasharray:3 9; } .route-dot{ filter:drop-shadow(0 1px 2px rgba(10,12,32,.3)); } .route-dot.d-red{ fill:var(--red); } .route-dot.d-blue{ fill:var(--blue); } .route-dot.d-amber{ fill:var(--amber); } .route-dot.d-green{ fill:var(--green); } .map-legend{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; padding:14px 10px 6px; } .map-legend span{ display:inline-flex; align-items:center; gap:9px; font-size:.85rem; color:var(--muted); font-weight:500; } .map-legend i{ display:inline-block; width:14px; height:14px; border-radius:50%; } .lg-hub{ background:var(--ink); } .lg-route{ width:24px !important; height:4px !important; border-radius:2px !important; background:linear-gradient(90deg,var(--red),var(--blue)); } /* contact: quick-contact method cards + info icons */ .contact-methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .cmethod{ display:flex; align-items:center; gap:16px; padding:22px; background:#fff; border:1px solid var(--border); border-radius:14px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cmethod:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(10,12,32,.10); border-color:#dbe1f7; } .cm-ic{ flex:none; width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; } .cm-ic .ic, .cm-ic svg{ width:26px; height:26px; margin:0; display:block; } .cm-red{ background:var(--tint-red); color:var(--red); } .cm-blue{ background:var(--tint-blue); color:var(--blue); } .cm-green{ background:#e7f7ef; color:#128c7e; } /* WhatsApp brand green (kept for recognition) */ .cm-text{ display:flex; flex-direction:column; min-width:0; } .cm-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); } .cm-val{ font-family:var(--font-head); font-weight:600; font-size:1.02rem; color:var(--ink); margin-top:3px; overflow:hidden; text-overflow:ellipsis; } .info-label{ display:inline-flex; align-items:center; gap:8px; } .info-ic .ic{ width:16px; height:16px; margin:0; color:var(--blue); } .info-cert .info-ic .ic{ color:var(--red); } @media(max-width:760px){ .contact-methods{ grid-template-columns:1fr; } } /* contact: office location map */ .map-embed{ margin-top:18px; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 14px 34px rgba(10,12,32,.10); } .map-embed iframe{ display:block; width:100%; height:400px; border:0; } .map-link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--font-head); font-weight:600; color:var(--blue); } .map-link .ic{ width:18px; height:18px; margin:0; color:var(--red); } .map-link:hover{ text-decoration:underline; } /* home hero: highlights panel */ .panel-eyebrow{ display:block; font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dark-muted); margin-bottom:4px; } .panel-hl{ display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--dark-border); } .panel-hl:last-child{ border-bottom:0; } .panel-hl-ic{ flex:none; width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); } .panel-hl-ic .ic{ width:22px; height:22px; margin:0; color:#fff; } .panel-hl-text{ font-family:var(--font-head); font-weight:500; font-size:1.02rem; color:#fff; } /* plain chips — no colored glow */ /* ============================================================ Accent icons — stats chips + subtle logo motion ============================================================ */ .stat-ic{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; margin-bottom:18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(4px); } .stat-ic .ic{ width:25px; height:25px; margin:0; color:#fff; } /* plain stat chips — no colored glow */ .stat{ transition:transform .2s ease; } .stat:hover{ transform:translateY(-4px); } .stat:hover .stat-ic{ background:rgba(255,255,255,.22); } /* logo: streaks ease left on hover for a touch of motion */ .brand-mark .fs-streak rect{ transition:transform .25s ease; } .brand:hover .fs-streak rect{ transform:translateX(-3px); } .brand-mark{ transition:transform .25s ease; } .brand:hover .brand-mark{ transform:translateX(2px); } @media(prefers-reduced-motion:reduce){ .stat,.stat-ic,.brand-mark,.brand-mark .fs-streak rect{ transition:none; } } /* ============================================================ Accessibility — visible keyboard focus (ui-ux-pro-max §1) Mouse users are unaffected (:focus-visible only fires for keyboard/AT navigation). Applied last so it wins. ============================================================ */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .btn:focus-visible, .nav-link:focus-visible, .lang-pill:focus-visible, .link-arrow:focus-visible, .cmethod:focus-visible, .faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } /* form fields keep the border-colour change AND gain a visible ring */ .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,78,216,.18); } /* required-field asterisk */ .field label .req { color: var(--red); margin-left: 3px; } /* ============================================================ PREMIUM LAYER — richer blue+orange, "reliability & status" Appended last so it elevates the whole site. Deep navy depth, warm gold status accents, tactile clickable CTAs. ============================================================ */ :root{ --navy:#0a1730; --navy-2:#10254a; --orange:#ea580c; --gold:#d9a441; --gold-mid:#eabf68; --gold-soft:#f3e2b6; --shadow-sm:0 2px 10px rgba(10,23,48,.06); --shadow-md:0 14px 34px rgba(10,23,48,.10); --shadow-lg:0 26px 60px rgba(10,23,48,.16); --grad-action:linear-gradient(135deg,#fb8b3c 0%, #ea580c 58%, #c2410c 100%); --grad-blue:linear-gradient(135deg,#3573ff 0%, #2563eb 52%, #1e40af 100%); --grad-navy:linear-gradient(160deg,#0a1730 0%, #10254a 55%, #16386f 100%); } /* type polish */ body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2{ letter-spacing:-0.025em; } /* ---- BUTTONS: bigger, tactile, clearly clickable ---- */ .btn{ padding:16px 32px; border-radius:12px; font-size:1rem; letter-spacing:.01em; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .22s ease, filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } /* the money CTA (hero + cta band): warm orange gradient with sheen */ .btn-light, .cta-band .btn-light{ background:var(--grad-action); color:#fff; border:0; box-shadow:0 12px 28px rgba(234,88,12,.36); } .btn-light:hover, .cta-band .btn-light:hover{ color:#fff; filter:brightness(1.05); box-shadow:0 18px 42px rgba(234,88,12,.48); } .btn-light::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; } .btn-light:hover::after{ left:130%; } /* blue primary (forms, header CTA) */ .btn-primary{ background:var(--grad-blue); border:0; color:#fff; box-shadow:0 12px 26px rgba(37,99,235,.34); } .btn-primary:hover{ background:var(--grad-blue); filter:brightness(1.06); border:0; box-shadow:0 18px 40px rgba(37,99,235,.46); } /* elegant ghost */ .btn-outline-light{ border:1.5px solid rgba(255,255,255,.5); } .btn-outline-light:hover{ background:rgba(255,255,255,.10); border-color:#fff; } /* ---- HERO: deeper premium overlay + gold eyebrow ---- */ .hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(90deg, rgba(6,14,30,.94) 0%, rgba(6,14,30,.74) 40%, rgba(6,14,30,.22) 72%, rgba(6,14,30,0) 100%), radial-gradient(1200px 520px at 12% 28%, rgba(37,99,235,.24), transparent 62%); } .hero .eyebrow{ color:var(--gold-soft); } .hero .bars i:first-child{ background:var(--gold); } .hero-copy h1{ letter-spacing:-0.03em; text-shadow:0 2px 30px rgba(0,0,0,.35); } .hero-copy .lead{ color:#e9eefb; } /* ---- STATS: status treatment with gold numerals ---- */ .stats{ background:var(--grad-navy); } .stats .stat-num{ color:var(--gold-mid) !important; } .stats .stat-label{ color:#c7d3ea; } /* ---- CARDS: unified premium elevation ---- */ .card, .service-card, .quote-card, .cmethod, .partner-tile, .gallery-item, .map-embed{ border-radius:16px; } .card, .service-card{ box-shadow:var(--shadow-sm); border:1px solid var(--border); overflow:hidden; transition:transform .22s ease, box-shadow .22s ease; } .card:hover, .service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } .service-card .card-media{ transition:transform .5s ease; } .service-card:hover .card-media{ transform:scale(1.06); } .quote-card:hover{ box-shadow:var(--shadow-lg); } .quote-mark{ color:var(--gold) !important; } .country{ transition:transform .18s ease, box-shadow .2s ease; } .country:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } /* ---- section head divider ---- */ .section-head{ border-bottom:1px solid var(--border); padding-bottom:14px; } /* ---- CTA band: premium navy gradient + gold hairline ---- */ .cta-band{ position:relative; background:var(--grad-navy) !important; } .cta-band::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold),var(--blue)); } /* ---- header CTA ---- */ .nav-cta{ padding:11px 20px; font-size:.92rem; border-radius:10px; } /* ---- inner-page heads: subtle premium tint + gold rule ---- */ .page-head{ position:relative; } .page-head::after{ content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:linear-gradient(90deg,var(--orange),var(--gold)); border-radius:2px; } @media(max-width:560px){ .hero-actions .btn{ width:100%; } } @media(prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } .btn-light::after{ display:none; } .card:hover, .service-card:hover, .country:hover{ transform:none; } }