/* ========================================================================== ShipWithArgo Tracker — front-end styles Brand: navy #19166d, accent orange #fe5303, DM Sans. Mobile-first. Result now renders inside a modal (.argo-tk-modal), which is appended to . Because that lives OUTSIDE .argo-tracker, the brand CSS variables are declared on BOTH selectors so the modal inherits them. ========================================================================== */ .argo-tracker, .argo-tk-modal { --argo-navy: #19166d; --argo-orange: #fe5303; --argo-blue: #2f80ed; --argo-ink: #1b1a3a; --argo-muted: #6b7185; --argo-faint: #9aa0b4; --argo-line: #e6e8f0; --argo-card: #ffffff; --argo-bg: #f4f5f9; font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--argo-ink); -webkit-font-smoothing: antialiased; } .argo-tracker { max-width: 640px; margin: 0 auto; text-align: left; } .argo-tracker *, .argo-tracker *::before, .argo-tracker *::after, .argo-tk-modal *, .argo-tk-modal *::before, .argo-tk-modal *::after { box-sizing: border-box; } .argo-tk-heading { font-size: 1.25rem; font-weight: 700; color: var(--argo-navy); margin: 0 0 14px; } /* Visually-hidden but screen-reader-available label. */ .argo-tk-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Search bar ---- */ .argo-tk-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .argo-tk-input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 16px; /* >=16px avoids iOS zoom-on-focus */ color: var(--argo-ink); background: #fff; border: 1.5px solid var(--argo-line); border-radius: 14px; padding: 15px 18px; transition: border-color .15s ease, box-shadow .15s ease; } .argo-tk-input::placeholder { color: var(--argo-faint); } .argo-tk-input:focus { outline: none; border-color: var(--argo-navy); box-shadow: 0 0 0 3px rgba(25, 22, 109, .12); } .argo-tk-btn { flex: 0 0 auto; font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: var(--argo-navy); border: none; border-radius: 14px; padding: 15px 30px; cursor: pointer; transition: background .15s ease, transform .05s ease; } .argo-tk-btn:hover { background: #14115a; } .argo-tk-btn:active { transform: translateY(1px); } .argo-tk-btn:focus-visible { outline: 3px solid var(--argo-orange); outline-offset: 2px; } .argo-tracker.is-busy .argo-tk-btn { opacity: .6; cursor: progress; } /* ---- Inline validation error ---- */ .argo-tk-error { margin: 10px 2px 0; font-size: .9rem; color: #d93a3a; } .argo-tk-error[hidden] { display: none; } /* ========================================================================== Modal ========================================================================== */ .argo-tk-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s ease; } .argo-tk-modal[hidden] { display: none; } .argo-tk-modal.is-open { opacity: 1; } .argo-tk-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 17, 60, .45); } .argo-tk-modal-panel { position: relative; background: #fff; border-radius: 20px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(20, 17, 60, .25); transform: translateY(8px) scale(.985); transition: transform .2s ease; } .argo-tk-modal.is-open .argo-tk-modal-panel { transform: none; } @media (prefers-reduced-motion: reduce) { .argo-tk-modal, .argo-tk-modal-panel { transition: none; } } .argo-tk-modal-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: #f4f5f9; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--argo-muted); cursor: pointer; } .argo-tk-modal-close:hover { background: #e9ebf3; } .argo-tk-modal-close:focus-visible { outline: 3px solid var(--argo-orange); outline-offset: 2px; } .argo-tk-modal-body { padding: 8px; } /* Inside the modal the card is the panel itself — drop its own frame. */ .argo-tk-modal .argo-tk-card { border: none; box-shadow: none; } /* Loading / note boxes */ .argo-tk-loading { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 22px 24px; color: var(--argo-muted); font-weight: 500; } .argo-tk-spinner { width: 18px; height: 18px; border: 2.5px solid var(--argo-line); border-top-color: var(--argo-navy); border-radius: 50%; animation: argo-tk-spin .7s linear infinite; flex: 0 0 auto; } @keyframes argo-tk-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .argo-tk-spinner { animation: none; } } .argo-tk-note { border-radius: 16px; padding: 22px 24px; color: var(--argo-muted); } .argo-tk-note--miss { border-left: 4px solid var(--argo-blue); } .argo-tk-note--rate { border-left: 4px solid var(--argo-orange); } .argo-tk-note--error { border-left: 4px solid #d93a3a; } /* ========================================================================== Result card ========================================================================== */ .argo-tk-card { background: var(--argo-card); border-radius: 18px; padding: 22px 24px; } .argo-tk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding-right: 40px; /* clear the close button */ } .argo-tk-badge { display: inline-flex; align-items: center; font-weight: 700; font-size: .8rem; letter-spacing: .01em; padding: 6px 12px; border-radius: 999px; } .argo-tk-updated { font-size: .78rem; color: var(--argo-faint); } /* Status tone -> badge + accents. on_hold maps to the warning tone. */ .argo-tk-tone-blue .argo-tk-badge { background: #e8f0fe; color: #2f6fed; } .argo-tk-tone-green .argo-tk-badge { background: #e7f6ef; color: #0f8a55; } .argo-tk-tone-orange .argo-tk-badge { background: #fff0e6; color: #cf4709; } .argo-tk-tone-hold .argo-tk-badge { background: #fff6da; color: #9a6b00; border: 1px solid #f1d98a; } .argo-tk-tone-red .argo-tk-badge { background: #fdeaea; color: #d93a3a; } .argo-tk-ref { font-size: 1.35rem; font-weight: 700; color: var(--argo-navy); line-height: 1.1; } .argo-tk-route { margin-top: 4px; color: var(--argo-muted); font-weight: 500; font-size: .95rem; } .argo-tk-arrow { margin: 0 8px; color: var(--argo-orange); font-weight: 700; } /* BL number sits right under the route, no label. */ .argo-tk-blno { margin-top: 4px; font-weight: 600; font-size: .95rem; color: var(--argo-ink); letter-spacing: .01em; } /* Plain-language status line — headline info for the customer. */ .argo-tk-status-line { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--argo-bg); } .argo-tk-tone-hold .argo-tk-status-line { background: #fff8e1; } .argo-tk-line-title { margin: 0; font-weight: 700; color: var(--argo-ink); font-size: 1rem; } .argo-tk-line-detail { margin: 6px 0 0; color: var(--argo-muted); font-size: .92rem; line-height: 1.5; } /* ---- Hero progress track (container on a line) ---- */ .argo-tk-track { position: relative; height: 34px; margin: 26px 4px 14px; } .argo-tk-line { position: absolute; top: 50%; left: 8px; right: 8px; height: 2px; transform: translateY(-50%); border-radius: 2px; /* Remaining portion = horizontal hyphens "- - - -": wider than tall. */ background: repeating-linear-gradient(90deg, #cfd3e0 0 7px, transparent 7px 13px); } .argo-tk-line-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--argo-navy); border-radius: 4px; } .argo-tk-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--argo-blue); } .argo-tk-dot--start { left: 8px; transform: translate(-50%, -50%); } .argo-tk-dot--end { right: 8px; transform: translate( 50%, -50%); } .argo-tk-cont-wrap { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 44px; pointer-events: none; } .argo-tk-cont { display: block; width: 44px; height: 30px; filter: drop-shadow(0 2px 4px rgba(254, 83, 3, .35)); } /* ---- Step chips ---- */ .argo-tk-steps { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .argo-tk-step { font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .argo-tk-step.is-done { background: #eef0f6; color: var(--argo-navy); } .argo-tk-step.is-done::before { content: "\2713\00a0"; color: #0f8a55; } .argo-tk-step.is-current { background: var(--argo-orange); color: #fff; } .argo-tk-step.is-todo { background: #f4f5f9; color: var(--argo-faint); } /* ---- Meta grid (Mode / Vessel / Arrival Date) ---- */ .argo-tk-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--argo-line); } .argo-tk-meta > div { display: flex; flex-direction: column; gap: 3px; } .argo-tk-meta-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--argo-faint); } .argo-tk-meta-v { font-size: .95rem; font-weight: 600; color: var(--argo-ink); word-break: break-word; }