/* ===== Select Transport Partners — shared styles ===== */ /* Self-hosted fonts (variable, latin subset) — preloaded in each page . Local hosting keeps the font ready before first paint, so text/buttons no longer shift as a webfont loads. */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../assets/fonts/jost-latin.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); } :root { --navy: #1E1D57; --navy-hero: #15143D; --navy-deep: #0F0E2E; --navy-line: rgba(116, 213, 226, 0.18); --navy-line-soft: rgba(116, 213, 226, 0.10); --cyan: #74D5E2; --cyan-soft: rgba(116, 213, 226, 0.6); --white: #ffffff; --text-muted: rgba(255, 255, 255, 0.62); --text-dim: rgba(255, 255, 255, 0.42); --header-height: 84px; --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; } * { box-sizing: border-box; } /* Always reserve the scrollbar gutter so the centered layout and any vw-based sizes don't shift when the scrollbar appears/disappears between pages. */ html { scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--navy); color: var(--white); font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ===== Header ===== */ .site-header { position: relative; background-color: var(--navy); border-top: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); } /* Hamburger button: hidden on desktop, shown on mobile via media query */ .nav-toggle { display: none; background: transparent; border: 0; padding: 0.5rem; margin: 0; cursor: pointer; color: var(--white); line-height: 0; } .nav-toggle-bars { display: block; position: relative; width: 26px; height: 2px; background: currentColor; transition: background-color 0.15s ease; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.2s ease; } .nav-toggle-bars::before { top: -8px; } .nav-toggle-bars::after { top: 8px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-8px) rotate(-45deg); } /* Inner row sits inside the shared .container, so the logo/nav align with page content and the bar gets side gutters / a max width. */ .header-inner { display: flex; align-items: center; gap: 2rem; height: var(--header-height); } /* Logo pinned to the left; margin-right:auto pushes nav + login to the right */ .logo { display: flex; align-items: center; margin-right: auto; } .logo img { height: 48px; width: auto; display: block; } .main-nav ul { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; } .main-nav a { color: var(--white); text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .main-nav a:hover, .main-nav a.active { color: var(--cyan); border-bottom-color: var(--cyan); } .login-btn { color: var(--cyan); background-color: transparent; border: 2px solid var(--cyan); padding: 0.55rem 1.4rem; border-radius: 0; text-decoration: none; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; transition: background-color 0.15s ease, color 0.15s ease; } .login-btn:hover { background-color: var(--cyan); color: var(--navy); } /* ===== Layout helpers ===== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* ===== Buttons ===== */ .btn { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 0; font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-primary { background-color: var(--cyan); color: var(--navy); border: 2px solid var(--cyan); } .btn-primary:hover { background-color: var(--white); border-color: var(--white); } .btn-secondary { background-color: transparent; color: var(--white); border: 2px solid var(--cyan); } .btn-secondary:hover { background-color: var(--cyan); color: var(--navy); } /* ===== Hero ===== */ .hero { position: relative; display: flex; align-items: center; min-height: 480px; border-bottom: 2px solid var(--cyan); background-color: var(--navy-hero); overflow: hidden; } /* Video fills the hero; the left side is covered by the scrim below */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; } .hero-video.is-active { opacity: 1; } /* Diagonal navy scrim: solid on the left (keeps text readable), fading to transparent on the right so the video shows through */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, var(--navy-hero) 0%, var(--navy-hero) 34%, rgba(21, 20, 61, 0.75) 50%, rgba(21, 20, 61, 0) 72%); pointer-events: none; } .hero .container { position: relative; z-index: 2; } .hero-content { max-width: 640px; } .hero-eyebrow { margin: 0 0 1rem; color: var(--cyan); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .hero-title { margin: 0 0 1.25rem; font-size: 3rem; line-height: 1.1; font-weight: 800; } .hero-title .accent { color: var(--cyan); } .hero-subtitle { max-width: 480px; margin: 0 0 2rem; font-size: 1.2rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* ===================================================== ===== REDESIGNED BODY — modern / sleek / tech ====== ===================================================== */ /* Section eyebrow row: [01] ──── label */ .section-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; color: var(--cyan); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .section-eyebrow::before, .section-eyebrow::after { content: ""; height: 1px; background: var(--navy-line); flex: 0 0 48px; } .section-eyebrow::after { flex: 1; } .section-eyebrow .dot { width: 6px; height: 6px; background: var(--cyan); display: inline-block; box-shadow: 0 0 0 4px rgba(116, 213, 226, 0.18); } .section-headline { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 1rem; max-width: 880px; } .section-headline .accent { color: var(--cyan); } .section-lede { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--text-muted); max-width: 640px; } /* ----- 1. Pillars section ----- */ .pillars { position: relative; padding: 7rem 0 5rem; background-color: var(--navy); overflow: hidden; isolation: isolate; } /* technical grid backdrop */ .pillars::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--navy-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line-soft) 1px, transparent 1px); background-size: 64px 64px; background-position: -1px -1px; mask-image: radial-gradient(ellipse at 70% 30%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 70%); pointer-events: none; } /* faint S watermark — shifted 50% to the right so it hangs off the right edge */ .pillars::after { content: ""; position: absolute; inset: 0; transform: translateX(25%); background-image: url("../assets/images/S_Watermark.png"); background-repeat: no-repeat; background-size: auto 100%; background-position: center center; opacity: 0.04; z-index: -1; pointer-events: none; } .pillars-header { margin-bottom: 4rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; } .solutions-block { margin-top: 4rem; margin-bottom: 4rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; } .solutions-image { width: clamp(320px, 44vw, 560px); aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 3px solid var(--navy); } .payments-block { margin-top: 4rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; } .payments-image { width: clamp(320px, 44vw, 560px); aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 3px solid var(--navy); } .payments-image[data-payments-image]:not(.is-active), [data-network-image]:not(.is-active), [data-haul-image]:not(.is-active) { display: none; } .testimonials { margin-top: 1rem; } .testimonial { display: none; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; } .testimonial.is-active { display: grid; } .testimonial-quote p { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.5; color: var(--white); font-style: italic; max-width: 640px; } .testimonial-attribution { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; color: var(--cyan); } .testimonial-image, .testimonial-image-placeholder { width: clamp(280px, 32vw, 420px); aspect-ratio: 3 / 2; } .testimonial-image { display: block; object-fit: cover; } .testimonial-image-placeholder { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; } .pillars-header .pillars-meta { text-align: right; font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .pillars-header .pillars-meta strong { color: var(--cyan); font-weight: 500; } .pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--navy-line); border-left: 1px solid var(--navy-line); } /* Login page: three narrower, self-contained cards, centered on the page with even spacing, and content centered within each card. */ .pillar-grid--login { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; gap: 2.5rem; border: none; } .pillar-grid--login .pillar { align-items: center; text-align: center; min-height: 0; border: 1px solid var(--navy-line); } .pillar { position: relative; display: flex; flex-direction: column; padding: 2.5rem 2.25rem 2.25rem; border-right: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); color: inherit; text-decoration: none; background: linear-gradient(180deg, rgba(15, 14, 46, 0.0) 0%, rgba(15, 14, 46, 0.35) 100%); transition: background 0.25s ease, transform 0.25s ease; min-height: 320px; overflow: hidden; } .pillar::before { /* hover sweep */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(116, 213, 226, 0.12) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .pillar:hover { background: linear-gradient(180deg, rgba(15, 14, 46, 0.3) 0%, rgba(15, 14, 46, 0.6) 100%); } .pillar:hover::before { opacity: 1; } .pillar-title { width: fit-content; /* so the underline only spans the title text */ margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #D30986; font-size: 2rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; } .pillar-icon-placeholder { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 1rem; border: 2px dashed rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; } .pillar-icon { width: 96px; height: 96px; margin-bottom: 1rem; object-fit: contain; opacity: 0.75; } .pillar-clipart { position: absolute; top: 3.25rem; right: 1.75rem; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.5); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; } img.pillar-clipart { border: none; object-fit: contain; opacity: 0.75; } .team-headshot { width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.5); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; } img.team-headshot { border: none; object-fit: cover; } .pillar--team { flex-direction: row; gap: 1.75rem; align-items: flex-start; min-height: 0; } .team-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .pillar--team .team-name { width: fit-content; padding-bottom: 0.5rem; border-bottom: 2px solid #D30986; transition: color 0.25s ease; } .pillar--team:hover .team-name { color: var(--cyan); } .pillar--team .pillar-accent { display: none; } .pillar-accent { width: 50px; height: 2px; background: #D30986; margin-bottom: 1rem; } .team-name { font-size: 1.1rem; font-weight: 600; color: var(--white); line-height: 1.3; } .team-title { margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-muted); line-height: 1.3; } .pillar-text { flex: 1; margin: 0 0 2rem; font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); max-width: 440px; } .pillar-link { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); display: inline-flex; align-items: center; gap: 0.6rem; } .pillar-link .arrow { display: inline-block; width: 18px; height: 1px; background: currentColor; position: relative; transition: width 0.25s ease; } .pillar-link .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); } .pillar:hover .pillar-link .arrow { width: 28px; } .pillar:hover .pillar-link { color: var(--cyan); } .pillar-link:hover { color: var(--cyan); } .pillar-link:hover .arrow { width: 28px; } /* feature chips at top right of each pillar */ .pillar-stats { display: flex; gap: 1.5rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px dashed var(--navy-line); } .pillar-stats .stat { display: flex; flex-direction: column; gap: 0.25rem; } .pillar-stats .stat-num { font-size: 1.25rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .pillar-stats .stat-lbl { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; } /* ----- 2. Metrics strip ----- */ .metrics { position: relative; border-top: 2px solid #D30986; border-bottom: 2px solid #D30986; background: #57A2C2; padding: 3.5rem 0; } .metrics-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .metrics-copy { flex: 1 1 auto; min-width: 0; } .metrics-video { flex: 0 0 auto; width: clamp(320px, 44vw, 560px); aspect-ratio: 16 / 9; overflow: hidden; background: #15143D; border: 3px solid var(--navy); padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; position: relative; display: block; } .metrics-video:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .metrics-video video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .metrics-video::after { content: ''; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); background: rgba(30, 29, 87, 0.78); clip-path: polygon(28% 18%, 28% 82%, 80% 50%); transition: background 0.2s ease; pointer-events: none; } .metrics-video:hover::after { background: var(--cyan); } .metrics-video--cyan-arrow::after { background: var(--cyan); } /* ----- Video modal ----- */ .video-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem; } .video-modal[hidden] { display: none; } .video-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 14, 46, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .video-modal-dialog { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border: 3px solid var(--navy); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .video-modal-player { width: 100%; height: 100%; display: block; } .video-modal-close { position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 2px solid var(--cyan); font-family: var(--mono); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0; z-index: 2; transition: background 0.2s ease; } .video-modal-close:hover { background: var(--cyan); color: var(--navy); } /* ===== Get a Quote modal ===== */ .quote-modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 2rem; } .quote-modal[hidden] { display: none; } .quote-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 14, 46, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .quote-modal-dialog { position: relative; width: min(680px, 100%); max-height: calc(100vh - 4rem); overflow-y: auto; background: var(--navy); border: 3px solid var(--cyan); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); padding: 2rem 2.25rem 2.5rem; } .quote-modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 2px solid var(--cyan); font-family: var(--mono); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; z-index: 2; transition: background 0.2s ease, color 0.2s ease; } .quote-modal-close:hover { background: var(--cyan); color: var(--navy); } .quote-modal-title { width: fit-content; margin: 0 0 0.5rem; padding-bottom: 0.5rem; padding-right: 2.5rem; border-bottom: 2px solid #D30986; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); } .quote-modal-lede { margin: 0 0 1.5rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; } .quote-form { display: flex; flex-direction: column; gap: 0.85rem; } .quote-success { display: none; padding: 1.5rem 0 0.5rem; text-align: center; color: var(--text-muted); line-height: 1.6; } .quote-success-title { margin-bottom: 0.5rem; font-size: 1.4rem; font-weight: 700; color: var(--cyan); } /* Timed Learn More modal: gentle fade + rise on open (less jarring than a hard pop) */ #learnModal:not([hidden]) .quote-modal-backdrop { animation: learn-modal-fade 0.6s ease both; } #learnModal:not([hidden]) .quote-modal-dialog { animation: learn-modal-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes learn-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes learn-modal-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #learnModal:not([hidden]) .quote-modal-backdrop, #learnModal:not([hidden]) .quote-modal-dialog { animation: none; } } .metrics-title { margin: 0 0 1rem; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; color: var(--white); } .metrics-title-accent { color: var(--navy); } .metrics-sub { margin: 0; font-size: 1.2rem; line-height: 1.5; color: var(--white); } .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .metric { position: relative; padding: 0.5rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; } .metric + .metric { border-left: 1px solid var(--navy-line); } .metric-num { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; } .metric-num .unit { color: var(--cyan); font-weight: 600; } .metric-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } .metric-foot { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-dim); font-family: var(--mono); letter-spacing: 0.05em; } /* ----- 3. Affiliations ----- */ .affiliations { position: relative; padding: 4rem 0; background: var(--navy); overflow: hidden; } .affiliations-title { width: fit-content; margin: 0 auto; padding-bottom: 0.5rem; border-bottom: 2px solid var(--cyan); text-align: center; color: var(--white); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } .affiliations-marquee { margin-top: 1.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } .affiliations-track { display: flex; align-items: center; width: max-content; animation: affiliations-scroll 40s linear infinite; } .affiliations-image { display: block; width: 228px; height: auto; margin-right: 2.5rem; flex-shrink: 0; } @keyframes affiliations-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .affiliations-track { animation: none; } } .services-marquee { margin-top: 2rem; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } .services-track { display: flex; align-items: center; width: max-content; animation: services-scroll 40s linear infinite; } .services-item { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-right: 2rem; flex-shrink: 0; } .services-image { display: block; width: 200px; height: auto; } .services-label { font-size: 25px; font-weight: 500; letter-spacing: 0.02em; color: var(--white); text-align: center; } @keyframes services-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .services-track { animation: none; } } /* Integrations logo marquee — reuses .services-marquee / .services-track. Logos sized by height so they line up uniformly regardless of logo width. */ /* Each logo sits in a uniform box and scales to fit (preserving aspect ratio), so mixed wordmarks/icons read as evenly sized and evenly spaced. */ .int-item { display: flex; align-items: center; justify-content: center; width: 220px; height: 110px; margin-right: 2.5rem; flex-shrink: 0; } .int-logo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } /* ----- (legacy) Platform preview ----- */ .platform { position: relative; padding: 7rem 0; background: var(--navy); overflow: hidden; } .platform::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--navy-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line-soft) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 20% 60%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%); -webkit-mask-image: radial-gradient(ellipse at 20% 60%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%); pointer-events: none; } .platform-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; position: relative; z-index: 1; } .platform-copy .section-headline { font-size: clamp(1.8rem, 3vw, 2.5rem); } .platform-bullets { margin: 2.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.25rem; } .platform-bullets li { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; align-items: start; padding-bottom: 1.25rem; border-bottom: 1px solid var(--navy-line); } .platform-bullets li:last-child { border-bottom: 0; padding-bottom: 0; } .platform-bullets .b-num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--cyan); padding-top: 0.25rem; } .platform-bullets .b-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--white); } .platform-bullets .b-text { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); margin: 0; } /* The stylized TMS frame (decorative) */ .platform-frame { position: relative; border: 1px solid var(--navy-line); background: linear-gradient(180deg, rgba(15,14,46,0.85), rgba(15,14,46,0.55)), radial-gradient(circle at 20% 0%, rgba(116,213,226,0.10), transparent 60%); box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(116, 213, 226, 0.06); padding: 0; overflow: hidden; } .platform-frame::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, rgba(116, 213, 226, 0.025) 0px, rgba(116, 213, 226, 0.025) 1px, transparent 1px, transparent 3px ); pointer-events: none; } .frame-chrome { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--navy-line); background: rgba(15, 14, 46, 0.55); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-dim); } .frame-dots { display: flex; gap: 6px; } .frame-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.12); } .frame-dots span:first-child { background: var(--cyan-soft); } .frame-path { letter-spacing: 0.08em; } .frame-path .slash { color: var(--cyan); padding: 0 0.4rem; } .frame-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.25rem; } .tile { border: 1px solid var(--navy-line); padding: 1rem 1.1rem; background: rgba(30, 29, 87, 0.35); display: flex; flex-direction: column; gap: 0.5rem; } .tile-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); } .tile-head .pill { background: rgba(116, 213, 226, 0.12); color: var(--cyan); padding: 2px 8px; font-size: 0.6rem; letter-spacing: 0.18em; } .tile-val { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; } .tile-val .unit { color: var(--cyan); font-size: 0.85rem; font-weight: 600; margin-left: 0.25rem; } .tile-foot { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; } .tile-foot .up { color: #66e0a3; } .tile-foot .down { color: #ff8888; } /* sparkline tile (full width) */ .tile.tile-wide { grid-column: 1 / -1; min-height: 140px; } .sparkline { height: 80px; width: 100%; display: block; } /* live ticker row */ .ticker { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--navy-line); background: rgba(15,14,46,0.55); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-muted); overflow: hidden; } .ticker .live { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); } .ticker .live::before { content: ""; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 3px rgba(116,213,226,0.25); animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.35; } } .ticker-feed { display: flex; gap: 2.5rem; white-space: nowrap; animation: marquee 28s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ticker-feed span .arrow-up { color: #66e0a3; } .ticker-feed span .arrow-dn { color: #ff8888; } .ticker-feed span .sep { color: var(--text-dim); padding: 0 0.5rem; } /* ----- 4. CTA band ----- */ .cta-band { position: relative; padding: 3.5rem 0; background: linear-gradient(to bottom, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-deep) 100%); border-top: 2px solid var(--cyan); overflow: hidden; isolation: isolate; } .cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0%, transparent 45%, rgba(116, 213, 226, 0.10) 100%); z-index: -1; } .cta-band::after { /* diagonal cyan slash */ content: ""; position: absolute; top: -20%; right: -10%; width: 70%; height: 140%; background: linear-gradient(115deg, transparent 48%, rgba(116, 213, 226, 0.06) 50%, transparent 52%); z-index: -1; pointer-events: none; } .cta-inner { display: grid; grid-template-columns: 1.4fr 1.15fr; gap: 4rem; align-items: center; } .cta-headline { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1rem; } .cta-headline .accent { color: var(--cyan); } .cta-sub { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--text-muted); max-width: 460px; } .contact-form { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.5rem 2rem; border: 2px solid var(--white); background: rgba(15, 14, 46, 0.5); } .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .contact-form-title { width: fit-content; margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid #D30986; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); } .contact-field { display: flex; flex-direction: column; gap: 0.4rem; } .contact-field > span { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--white); } .contact-field input, .contact-field textarea, .contact-field select { width: 100%; padding: 0.7rem 0.85rem; background: rgba(15, 14, 46, 0.65); border: 1px solid var(--navy-line); border-radius: 0; color: var(--white); font: inherit; font-size: 0.95rem; color-scheme: dark; transition: border-color 0.15s ease, background 0.15s ease; } .contact-field textarea { resize: vertical; min-height: 60px; line-height: 1.5; } .contact-field input:focus, .contact-field textarea:focus, .contact-field select:focus { outline: none; border-color: var(--cyan); background: rgba(15, 14, 46, 0.85); } .contact-submit { align-self: flex-start; margin-top: 0.5rem; color: var(--cyan); background-color: transparent; border: 2px solid var(--cyan); padding: 0.55rem 1.4rem; border-radius: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .contact-submit:hover { background-color: var(--cyan); color: var(--navy); } .contact-submit:disabled { opacity: 0.6; cursor: not-allowed; } .contact-form-success { text-align: center; padding: 2rem 1rem; } .contact-form-success h3 { margin: 0 0 0.75rem; font-size: 1.6rem; font-weight: 700; color: var(--cyan); } .contact-form-success p { margin: 0; color: var(--white); line-height: 1.5; } .contact-form-error { margin-top: 0.75rem; padding: 0.65rem 0.85rem; border: 1px solid #ff6b8a; color: #ffc8d2; font-size: 0.9rem; line-height: 1.4; background: rgba(255, 107, 138, 0.08); } /* Honeypot field for spam protection — visible to bots, hidden from humans. Off-screen positioning (not display:none) so bots that skip hidden fields still see it. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ----- 5. Footer ----- */ .footer { background: var(--navy); border-top: 2px solid var(--cyan); padding: 1.5rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: stretch; } .footer-contact { justify-self: center; align-self: center; text-align: center; display: flex; flex-direction: column; gap: 0.7rem; } .footer-right { justify-self: end; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 0.75rem; text-align: right; } .footer-social { display: flex; flex-direction: row; gap: 0.6rem; } .footer-social a { display: block; line-height: 0; } .footer-social img { display: block; width: 28px; height: 28px; } .footer-contact-row { display: flex; justify-content: center; align-items: center; gap: 0.75rem; } .footer-contact-sep { color: var(--cyan); font-size: 0.95rem; } .footer-contact a, .footer-contact-row a { color: var(--white); text-decoration: none; font-size: 19px; transition: color 0.15s ease; } .footer-contact a:hover, .footer-contact-row a:hover { color: var(--cyan); } .footer-contact-address { color: var(--white); font-size: 0.9rem; line-height: 1.5; } .footer-brand { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .footer-brand img { height: 46px; width: auto; display: block; } .footer-copyright { font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); } .footer-col h4 { margin: 0 0 1.25rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); } .footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .footer-col a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.15s ease; } .footer-col a:hover { color: var(--cyan); } /* ===== Responsive ===== */ @media (max-width: 1024px) { .platform-inner { grid-template-columns: 1fr; } .platform-frame { order: 2; } .cta-inner { grid-template-columns: 1fr; gap: 2rem; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .header-inner { gap: 1rem; } .main-nav ul { gap: 1rem; } .main-nav a { font-size: 0.85rem; } .logo img { height: 40px; } .pillars-header { grid-template-columns: 1fr; align-items: start; } .pillars-header .pillars-meta { text-align: left; } .solutions-block { grid-template-columns: 1fr; } .solutions-image { max-width: 100%; } .payments-block { grid-template-columns: 1fr; } .payments-image { max-width: 100%; } .testimonial { grid-template-columns: 1fr; } .testimonial-image, .testimonial-image-placeholder { max-width: 100%; } .cta-inner { grid-template-columns: 1fr; gap: 2.5rem; } .metrics-grid { grid-template-columns: repeat(2, 1fr); } .metric + .metric { border-left: 0; } .metric:nth-child(3), .metric:nth-child(4) { border-top: 1px solid var(--navy-line); padding-top: 2rem; margin-top: 1rem; } .metric:nth-child(odd) { border-right: 1px solid var(--navy-line); padding-right: 1.5rem; } } @media (max-width: 600px) { .hero { min-height: 420px; background-color: #0a0a1a; } .hero-video { display: none; } /* Mobile nav: hamburger replaces the inline links, dropdown appears below the header bar */ .nav-toggle { display: block; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy); border-top: 1px solid var(--cyan); border-bottom: 2px solid var(--cyan); z-index: 50; } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .main-nav li { border-bottom: 1px solid var(--navy-line); } .main-nav li:last-child { border-bottom: 0; } .main-nav a { display: block; padding: 1rem 1.5rem; font-size: 1rem; border-bottom: 0; } .main-nav a:hover, .main-nav a.active { border-bottom-color: transparent; background: rgba(116, 213, 226, 0.08); } .hero-title { font-size: 2.1rem; } .hero-subtitle { font-size: 1.05rem; } .container { padding: 0 1.25rem; } .pillars { padding: 4rem 0 3rem; } .pillar-grid { grid-template-columns: 1fr; } .pillar-stats { gap: 1rem; } .metrics { padding: 4rem 0; } .metrics-inner { flex-direction: column; align-items: flex-start; gap: 2rem; } .metrics-video { width: 100%; max-width: 360px; } .platform { padding: 4rem 0; } .platform-bullets { gap: 1rem; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } } /* Reduced motion: pause ticker and live-dot blink */ @media (prefers-reduced-motion: reduce) { .ticker-feed { animation-duration: 0s; } .ticker .live::before { animation-duration: 0s; } }