/* ============================================================= Cargo Track - stylesheet Written with CSS *logical* properties (inline-start / inline-end instead of left / right). Setting dir="rtl" on flips the entire interface for Kurdish and Arabic - there is no separate RTL stylesheet to keep in sync. ============================================================= */ /* ---- Design tokens ---------------------------------------- */ :root { --brand-900: #0b2545; --brand-800: #10305a; --brand-700: #163f74; --brand-600: #1d5b9e; --brand-500: #2a7ac0; --brand-050: #eaf2fb; --accent: #e08c3c; --accent-050:#fdf3e7; --bg: #f4f6f9; --surface: #ffffff; --surface-2: #fafbfc; --ink: #16202e; --ink-2: #475467; --muted: #7a8699; --line: #e3e8ef; --line-2: #eef1f5; --ok: #167a4b; --ok-bg: #e7f6ee; --warn: #a8620a; --warn-bg: #fdf1e0; --err: #b02a2a; --err-bg: #fdeced; --info: #1d5b9e; --info-bg: #e9f1fa; --move: #5b3fb5; --move-bg: #f0ecfb; --idle: #5c6a7e; --idle-bg: #eef1f5; --radius: 10px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(16, 32, 46, .06), 0 1px 3px rgba(16, 32, 46, .04); --shadow-lg: 0 4px 16px rgba(16, 32, 46, .10); --sidebar-w: 250px; --header-h: 60px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Naskh Arabic", "Geeza Pro", Tahoma, Arial, sans-serif; } /* ---- Reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Kurdish and Arabic read better slightly larger */ html[dir="rtl"] body { font-size: 15.5px; line-height: 1.75; } h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.3; font-weight: 650; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } p { margin: 0 0 .75rem; } a { color: var(--brand-600); text-decoration: none; } a:hover { text-decoration: underline; } /* Codes, numbers and dates stay left-to-right even in RTL pages. `isolate` does that on its own, so these classes must NOT set a display: they go on spans, divs,
s and table cells alike, and forcing inline-block would collapse the block ones onto one line and break table cells out of the table layout. */ .ltr { direction: ltr; unicode-bidi: isolate; } .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; letter-spacing: .01em; } /* ============================================================= App shell ============================================================= */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--brand-900); color: #cdd9e8; display: flex; flex-direction: column; position: sticky; inset-block-start: 0; height: 100vh; overflow-y: auto; } .sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; border-block-end: 1px solid rgba(255,255,255,.09); } .sidebar__logo { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: var(--brand-600); border-radius: 9px; font-size: 1.05rem; } .sidebar__title { color: #fff; font-weight: 680; font-size: 1.02rem; line-height: 1.2; } .sidebar__sub { font-size: .72rem; color: #7e93ad; } .sidebar__nav { padding: .75rem .6rem; flex: 1; } .sidebar__section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7f99; padding: .9rem .75rem .35rem; font-weight: 600; } html[dir="rtl"] .sidebar__section { letter-spacing: 0; } .navlink { display: flex; align-items: center; gap: .65rem; padding: .58rem .75rem; border-radius: var(--radius-sm); color: #c3d2e4; font-weight: 500; margin-block-end: 2px; transition: background .13s, color .13s; } .navlink:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; } .navlink.is-active { background: var(--brand-600); color: #fff; } .navlink__icon { width: 20px; text-align: center; flex: 0 0 20px; font-size: .95rem; } .navlink__count { margin-inline-start: auto; background: rgba(255,255,255,.14); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; font-weight: 600; } .sidebar__foot { padding: .85rem 1.1rem; border-block-start: 1px solid rgba(255,255,255,.09); font-size: .8rem; } .sidebar__user { color: #fff; font-weight: 600; } .sidebar__role { color: #7e93ad; font-size: .74rem; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--header-h); background: var(--surface); border-block-end: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding-inline: 1.5rem; position: sticky; inset-block-start: 0; z-index: 20; } .topbar__title { font-weight: 640; font-size: 1.05rem; } .topbar__spacer { margin-inline-start: auto; } .menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 38px; height: 34px; cursor: pointer; font-size: 1.1rem; } .content { padding: 1.5rem; flex: 1; } /* ---- Language switcher ------------------------------------ */ .langswitch { display: flex; gap: 2px; background: var(--line-2); padding: 3px; border-radius: 999px; } .langswitch a { padding: .22rem .7rem; border-radius: 999px; font-size: .82rem; color: var(--ink-2); font-weight: 550; } .langswitch a:hover { background: #fff; text-decoration: none; } .langswitch a.is-active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow); } /* ============================================================= Page furniture ============================================================= */ .page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem; } .page-head__text { flex: 1; min-width: 200px; } .page-head h1 { margin-block-end: .15rem; } .page-head__sub { color: var(--muted); font-size: .9rem; margin: 0; } .page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-block-end: 1.25rem; } .card__head { padding: .9rem 1.15rem; border-block-end: 1px solid var(--line-2); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .card__head h2, .card__head h3 { margin: 0; } .card__head .spacer { margin-inline-start: auto; } .card__body { padding: 1.15rem; } .card__body--flush { padding: 0; } .grid { display: grid; gap: 1.25rem; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } /* ---- Stat tiles -------------------------------------------- */ .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: .9rem; } .stat__icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; background: var(--brand-050); } .stat__label { font-size: .8rem; color: var(--muted); font-weight: 550; } .stat__value { font-size: 1.55rem; font-weight: 680; line-height: 1.15; color: var(--ink); } .stat--ok .stat__icon { background: var(--ok-bg); } .stat--warn .stat__icon { background: var(--warn-bg); } .stat--err .stat__icon { background: var(--err-bg); } .stat--move .stat__icon { background: var(--move-bg); } /* ============================================================= Tables ============================================================= */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data th, table.data td { padding: .68rem .9rem; text-align: start; border-block-end: 1px solid var(--line-2); vertical-align: middle; } table.data thead th { background: var(--surface-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; white-space: nowrap; } html[dir="rtl"] table.data thead th { letter-spacing: 0; text-transform: none; font-size: .82rem; } table.data tbody tr:hover { background: var(--surface-2); } table.data tbody tr:last-child td { border-block-end: none; } table.data td.num, table.data th.num { text-align: end; white-space: nowrap; } table.data td.actions { text-align: end; white-space: nowrap; } .empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); } .empty__icon { font-size: 2.4rem; display: block; margin-block-end: .5rem; opacity: .55; } /* ============================================================= Badges ============================================================= */ .badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--idle-bg); color: var(--idle); } .badge--ok { background: var(--ok-bg); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn); } .badge--dead { background: var(--err-bg); color: var(--err); } .badge--info { background: var(--info-bg); color: var(--info); } .badge--move { background: var(--move-bg); color: var(--move); } .badge--idle { background: var(--idle-bg); color: var(--idle); } .badge--soft { background: var(--line-2); color: var(--ink-2); font-weight: 550; } /* ============================================================= Buttons ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .52rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-weight: 570; font-size: .9rem; cursor: pointer; transition: background .13s, border-color .13s, box-shadow .13s; white-space: nowrap; } .btn:hover { background: var(--surface-2); border-color: #d3dae4; text-decoration: none; } .btn:active { transform: translateY(.5px); } .btn--primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); } .btn--danger { background: var(--err); border-color: var(--err); color: #fff; } .btn--danger:hover { background: #8f2020; border-color: #8f2020; } .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--line-2); } .btn--sm { padding: .32rem .68rem; font-size: .82rem; } .btn--block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .btn-group { display: inline-flex; gap: .35rem; } /* ============================================================= Forms ============================================================= */ .form-grid { display: grid; gap: 1rem 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: .3rem; } .field > label { font-size: .84rem; font-weight: 600; color: var(--ink-2); } .field .hint { font-size: .78rem; color: var(--muted); } .req { color: var(--err); } input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="search"], input[type="tel"], select, textarea { width: 100%; padding: .52rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: .92rem; color: var(--ink); transition: border-color .13s, box-shadow .13s; } textarea { min-height: 84px; resize: vertical; } select { cursor: pointer; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-050); } input.is-error, select.is-error, textarea.is-error { border-color: var(--err); } .field__error { font-size: .78rem; color: var(--err); } /* Dates and numbers stay LTR so they read correctly in RTL pages */ input[type="date"], input[type="datetime-local"], input[type="number"], .mono-input { direction: ltr; text-align: start; } html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="datetime-local"], html[dir="rtl"] input[type="number"] { text-align: end; } .checkline { display: flex; align-items: center; gap: .5rem; } .checkline input { width: auto; } .checkline label { font-size: .88rem; font-weight: 500; color: var(--ink-2); margin: 0; } .form-actions { display: flex; gap: .6rem; flex-wrap: wrap; padding-block-start: 1.1rem; margin-block-start: .4rem; border-block-start: 1px solid var(--line-2); } /* Search / filter bar */ .filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; } .filters .field { min-width: 150px; } .filters .field--grow { flex: 1; min-width: 220px; } /* ============================================================= Flash messages ============================================================= */ .flash { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: var(--radius-sm); margin-block-end: 1rem; border: 1px solid transparent; font-size: .92rem; } .flash--success { background: var(--ok-bg); color: var(--ok); border-color: #bfe6d1; } .flash--error { background: var(--err-bg); color: var(--err); border-color: #f3c9c9; } .flash--warn { background: var(--warn-bg); color: var(--warn); border-color: #f2ddba; } .flash--info { background: var(--info-bg); color: var(--info); border-color: #c9dcf2; } /* ============================================================= Timeline ============================================================= */ .timeline { list-style: none; margin: 0; padding: 0; position: relative; } .timeline::before { content: ""; position: absolute; inset-block: 14px 14px; inset-inline-start: 15px; width: 2px; background: var(--line); } .tl-item { position: relative; padding-inline-start: 46px; padding-block-end: 1.35rem; } .tl-item:last-child { padding-block-end: 0; } .tl-item__dot { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-size: .9rem; z-index: 1; } .tl-item--done .tl-item__dot { border-color: var(--ok); background: var(--ok-bg); } .tl-item--now .tl-item__dot { border-color: var(--brand-600); background: var(--brand-050); box-shadow: 0 0 0 4px var(--brand-050); } .tl-item__title { font-weight: 620; } .tl-item__meta { font-size: .82rem; color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; } .tl-item__note { font-size: .88rem; color: var(--ink-2); margin-block-start: .25rem; } /* Progress bar */ .progress { height: 8px; background: var(--line-2); border-radius: 999px; overflow: hidden; } .progress__bar { height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); border-radius: 999px; transition: width .4s ease; } html[dir="rtl"] .progress__bar { background: linear-gradient(270deg, var(--brand-600), var(--brand-500)); } /* ============================================================= Definition list used on detail pages ============================================================= */ .dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.1rem; font-size: .9rem; } .dl dt { color: var(--muted); font-weight: 550; } .dl dd { margin: 0; color: var(--ink); font-weight: 500; } /* A .mono element carries direction:ltr, so `text-align: start` inside it resolves to the LEFT even on an RTL page - which would leave a date hanging on the opposite side from its label. Pin these to the page's own side instead. */ html[dir="rtl"] .dl dd { text-align: right; } /* ============================================================= Pagination ============================================================= */ .pager { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .85rem 1.15rem; border-block-start: 1px solid var(--line-2); } .pager__info { color: var(--muted); font-size: .85rem; margin-inline-end: auto; } /* ============================================================= Login page ============================================================= */ .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(155deg, var(--brand-900), var(--brand-700) 65%, var(--brand-600)); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 2rem 1.85rem; } .auth-card__brand { text-align: center; margin-block-end: 1.5rem; } .auth-card__logo { width: 54px; height: 54px; margin: 0 auto .7rem; background: var(--brand-600); color: #fff; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; } .auth-card__sub { color: var(--muted); font-size: .9rem; margin: 0; } .auth-foot { text-align: center; margin-block-start: 1.25rem; font-size: .85rem; } /* ============================================================= Public tracking page ============================================================= */ .track-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .track-header { background: var(--brand-900); color: #fff; padding-block: .9rem; } .track-header__inner { max-width: 960px; margin: 0 auto; padding-inline: 1.25rem; display: flex; align-items: center; gap: 1rem; } .track-header__brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; } .track-main { flex: 1; max-width: 960px; width: 100%; margin: 0 auto; padding: 2rem 1.25rem 3rem; } .track-hero { text-align: center; margin-block-end: 1.75rem; } .track-hero h1 { font-size: 1.75rem; } .track-hero p { color: var(--muted); } .track-form { display: flex; gap: .6rem; max-width: 520px; margin: 0 auto; } .track-form input { flex: 1; padding: .8rem 1rem; font-size: 1.02rem; text-align: center; letter-spacing: .06em; text-transform: uppercase; direction: ltr; } .track-form .btn { padding-inline: 1.5rem; } .track-summary { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding: 1.15rem; background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); color: #fff; border-radius: var(--radius); } .track-summary__code { font-size: 1.3rem; font-weight: 700; } .track-summary__label { font-size: .78rem; color: #a8bdd6; text-transform: uppercase; letter-spacing: .06em; } html[dir="rtl"] .track-summary__label { text-transform: none; letter-spacing: 0; } .track-summary__spacer { margin-inline-start: auto; } .track-footer { text-align: center; padding: 1.25rem; color: var(--muted); font-size: .85rem; border-block-start: 1px solid var(--line); } /* ============================================================= Field mode - staff on a phone, at the port or the warehouse ------------------------------------------------------------- Designed for one hand and a bright day: large tap targets, few words, as little typing as possible. Deliberately separate from the desktop pages rather than a squeezed version of them. ============================================================= */ .field-page { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; } .field-bar { background: var(--brand-900); color: #fff; padding: .85rem 1rem; display: flex; align-items: center; gap: .75rem; position: sticky; inset-block-start: 0; z-index: 30; } .field-bar__title { font-weight: 650; font-size: 1.02rem; } .field-bar a { color: #cdd9e8; } .field-bar .spacer { margin-inline-start: auto; } .field-main { flex: 1; padding: 1rem; max-width: 680px; width: 100%; margin: 0 auto; } /* A shipment as a big tappable card */ .field-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .95rem 1.05rem; margin-block-end: .7rem; box-shadow: var(--shadow); color: inherit; } .field-card:hover, .field-card:active { text-decoration: none; border-color: var(--brand-500); } .field-card__code { font-weight: 700; font-size: 1.08rem; } .field-card__meta { color: var(--muted); font-size: .86rem; } /* Status chosen by tapping a tile, not picking from a dropdown */ .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; } .status-tile { position: relative; display: flex; align-items: center; gap: .6rem; padding: .9rem .85rem; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 560; line-height: 1.25; min-height: 62px; } .status-tile input { position: absolute; opacity: 0; pointer-events: none; } .status-tile__icon { font-size: 1.4rem; flex: 0 0 auto; } .status-tile:has(input:checked) { border-color: var(--brand-600); background: var(--brand-050); box-shadow: 0 0 0 3px var(--brand-050); } .status-tile:has(input:focus-visible) { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* Camera button, sized for a thumb */ .photo-drop { display: flex; align-items: center; justify-content: center; gap: .6rem; border: 2px dashed var(--line); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; color: var(--ink-2); font-weight: 560; cursor: pointer; background: var(--surface); } .photo-drop:active { background: var(--surface-2); } .photo-drop input { display: none; } .photo-preview { max-height: 180px; border-radius: var(--radius-sm); margin-block-start: .6rem; } /* The one button that matters, always reachable at the bottom */ .field-submit { position: sticky; inset-block-end: 0; background: linear-gradient(to top, var(--bg) 62%, transparent); padding: 1rem 0 .85rem; margin-block-start: 1rem; } .field-submit .btn { font-size: 1.05rem; padding-block: .85rem; } /* Anything a thumb must hit gets a real target on a phone */ @media (max-width: 560px) { .field-main { padding: .85rem; } .status-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .btn { min-height: 44px; } } /* ============================================================= Report bars ------------------------------------------------------------- Every chart here is a table with an inline bar: the value is readable as text, the bar makes it comparable, and it stays correct in RTL and on paper. One hue for every bar on purpose. Shading each bar darker where it is bigger would encode length twice and waste the only free channel - and the categories here (customers, ports) have no natural order anyway. ============================================================= */ .bar-track { position: relative; background: var(--line-2); border-radius: 3px; height: 14px; /* well under the 24px cap */ min-width: 60px; overflow: visible; } .bar-fill { height: 100%; background: var(--brand-600); /* square at the baseline, 4px rounded at the data end - and these are logical, so the rounding follows the text direction */ border-start-start-radius: 3px; border-end-start-radius: 3px; border-start-end-radius: 4px; border-end-end-radius: 4px; min-width: 2px; transition: width .3s ease; } .bar-fill--muted { background: var(--muted); } .bar-fill--warn { background: var(--warn); } .bar-fill--dead { background: var(--err); } table.data td.bar-cell { width: 38%; min-width: 110px; } /* The filter row sits above the charts, never between them */ .report-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; } .report-range { display: inline-flex; gap: 2px; background: var(--line-2); padding: 3px; border-radius: 999px; flex-wrap: wrap; } .report-range a { padding: .25rem .75rem; border-radius: 999px; font-size: .84rem; color: var(--ink-2); font-weight: 550; } .report-range a:hover { background: #fff; text-decoration: none; } .report-range a.is-active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow); } @media print { .bar-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; } } /* ============================================================= Map ============================================================= */ .shipment-map { width: 100%; min-height: 240px; background: #e8eef4; border-radius: 0 0 var(--radius) var(--radius); z-index: 0; /* keep Leaflet panes under the sidebar */ } /* Leaflet writes its own left/right positioning, which must not be flipped by the RTL layout - the map is geographic, not textual. */ .shipment-map, .shipment-map * { direction: ltr; } @media print { .shipment-map { height: 260px !important; } } /* ============================================================= Invoice print ============================================================= */ .invoice-sheet { background: #fff; padding: 2.25rem; border: 1px solid var(--line); border-radius: var(--radius); max-width: 860px; margin: 0 auto; } .invoice-head { display: flex; gap: 2rem; flex-wrap: wrap; margin-block-end: 2rem; } .invoice-head__spacer { margin-inline-start: auto; text-align: end; } .invoice-totals { margin-inline-start: auto; max-width: 320px; } .invoice-totals table { width: 100%; font-size: .92rem; } .invoice-totals td { padding: .35rem 0; } .invoice-totals td:last-child { text-align: end; font-weight: 600; } .invoice-totals tr.grand td { border-block-start: 2px solid var(--ink); padding-block-start: .6rem; font-size: 1.05rem; font-weight: 700; } /* Shown only on paper - the letterhead on a printed statement */ .print-only { display: none; } @media print { .sidebar, .topbar, .no-print, .form-actions, .page-head__actions { display: none !important; } .print-only { display: block !important; } /* A statement table must not be cut off at the page edge */ .table-wrap { overflow: visible !important; } table.data { font-size: 10.5px; } table.data th, table.data td { padding: .3rem .4rem; } .stat { break-inside: avoid; } body { background: #fff; font-size: 12px; } .content { padding: 0; } .invoice-sheet { border: none; padding: 0; max-width: none; } .card { box-shadow: none; border: none; } } /* ============================================================= Utilities ============================================================= */ .muted { color: var(--muted); } .small { font-size: .84rem; } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .text-end { text-align: end; } .text-center { text-align: center; } .mt-0 { margin-block-start: 0; } .mb-0 { margin-block-end: 0; } .mb-1 { margin-block-end: .5rem; } .mb-2 { margin-block-end: 1rem; } .stack { display: flex; flex-direction: column; gap: .15rem; } .row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .hidden { display: none !important; } /* ============================================================= Responsive ============================================================= */ @media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .sidebar { position: fixed; z-index: 60; inset-block: 0; inset-inline-start: 0; transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg); } html[dir="rtl"] .sidebar { transform: translateX(105%); } .sidebar.is-open { transform: translateX(0); } html[dir="rtl"] .sidebar.is-open { transform: translateX(0); } .menu-toggle { display: block; } .content { padding: 1rem; } .topbar { padding-inline: 1rem; } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); } .backdrop { position: fixed; inset: 0; background: rgba(11, 37, 69, .45); z-index: 50; } } @media (max-width: 560px) { .track-form { flex-direction: column; } .invoice-sheet { padding: 1.15rem; } .dl { grid-template-columns: minmax(0, 1fr); gap: .1rem 0; } .dl dd { margin-block-end: .6rem; } } /* Tracking form: code on its own row, phone digits + button below */ .track-form { flex-wrap: wrap; } .track-form .track-form__code { flex: 1 1 100%; } .track-form .track-form__phone { flex: 1 1 10rem; letter-spacing: .02em; text-transform: none; } .track-form .track-form__phone:not(:placeholder-shown) { letter-spacing: .4em; } @media (max-width: 560px) { /* stacked: a basis would become a height, so let each keep its own */ .track-form .track-form__code, .track-form .track-form__phone { flex: none; } } /* ---- Customer portal: shipments as cards ---------------------- */ .ship-list { display: grid; gap: .75rem; } .ship-card { display: grid; gap: .65rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); } .ship-card:hover, .ship-card:active { text-decoration: none; border-color: var(--brand-500); } .ship-card:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } .ship-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .ship-card__id { display: flex; flex-direction: column; min-width: 0; } .ship-card__id .mono { overflow-wrap: anywhere; } .ship-card__route { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .92rem; } .ship-card__arrow { color: var(--muted); } html[dir="rtl"] .ship-card__arrow { display: inline-block; transform: scaleX(-1); } .ship-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; } .ship-card__badge { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } .ship-card__go { font-size: 1.4rem; line-height: 1; color: var(--muted); } html[dir="rtl"] .ship-card__go { transform: scaleX(-1); } @media (min-width: 761px) { .ship-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Portal / tracking header on a phone: company name, languages and sign-out do not fit on one 375px row, so let them wrap cleanly instead of breaking words ("Sign / out") mid-way. */ @media (max-width: 480px) { .track-header__inner { flex-wrap: wrap; row-gap: .5rem; } .track-header__brand, .track-header__inner a.small { white-space: nowrap; } } /* ---- Privacy policy: long-form text ----------------------------- */ .policy { max-width: 720px; line-height: 1.7; } .policy h1 { margin-block-end: .25rem; } .policy h2 { margin-block: 1.75rem .5rem; font-size: 1.1rem; } .policy ul { padding-inline-start: 1.25rem; margin: 0; } .policy li { margin-block-end: .45rem; } .policy p { margin-block: .4rem; }