/* SailPing -- the page's one stylesheet (static/app.css), loaded by static/index.html after Leaflet's. It was the page's style block until 2026-10-18 (RULES.md 5.19 item 4, the split, S20d step 2); the tests read it joined back into the page: testkit.page_html(). */ /* ---- The brand's type (RULES.md 4.48): Geist for the interface, Sora for headlines and the wordmark, Geist Mono for container numbers and data. SELF-HOSTED, all SIL OFL (static/vendor/fonts/README.md): the page used to fetch Inter from Google on every load, which told Google about every visitor. Latin only for now; Arabic is a later phase. ---- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/vendor/fonts/geist-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/vendor/fonts/geist-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/vendor/fonts/geist-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/vendor/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/vendor/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/vendor/fonts/sora-latin-600-normal.woff2') format('woff2'); } /* ---- The brand's colours (RULES.md 4.48) ---- Deep Sea #0B1E3A · Lens Blue #1668E3 · Signal Blue #4FB8FF (on dark) Steel #5B6B82 (secondary text) · Mist #E8F0FC (tint) · Fog #F3F6FA (surface) ⚠ A branded forwarder's portal overrides --accent and --accent-text with ITS colour (applyBranding); everything here is ours, the default. */ :root { --font-ui: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Sora', 'Geist', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'SF Mono', Consolas, monospace; /* Look A v2, "Deep Sea" (RULES.md 5.20, his confirm 2026-10-19): light is shallow water -- a pale-blue band, white cards on a cool ground. */ --bg: #eef2f7; --surface: #ffffff; --surface-2: #f6f8fb; --border: #e1e7ef; --border-light: #edf1f6; --text: #0b1e3a; --text2: #44587a; --text3: #5c6d86; --accent: #1668e3; --accent-strong: #1257c2; --accent-bg: #e8f0fd; --accent-ring: rgba(22,104,227,0.16); /* The soft blue EDGE of the open page's pill and of today in the week (look A v2) -- from --accent, so a forwarder's portal draws it in his colour. */ --accent-edge: color-mix(in srgb, var(--accent) 38%, transparent); /* Accent used as TEXT. Lens Blue measures ~5.1:1 on white, so it clears WCAG AA as it is. A forwarder's own colour may not: the server sends a darkened variant for them (app._brand_from_company). */ --accent-text: #1668e3; --on-accent: #ffffff; /* text on an --accent surface */ /* A FILLED control -- the main button, the chosen chip, the active page's count -- with white words on it. Ours is Lens Blue; a forwarder's is his colour darkened until white reads on it (applyBranding: accent_text). */ --accent-fill: #1668e3; /* MOVING, as a status: in transit, at the port, a progress bar, a box on the journey line. Its own colour, never --accent: a forwarder's colour is his menu, buttons and links, and his In transit stays blue (RULES.md 5.20, "status colours fixed"; test_colour_meaning.py). */ --move: #1668e3; --move-text: #1459c7; --move-bg: #e7effc; /* The band across the top: the bar on every page, and on the home the sentence and the four numbers (fitHomeBand). Always three layers. */ --band-paint: radial-gradient(900px 300px at 86% -40%, rgba(22,104,227,0.22), transparent 70%), radial-gradient(560px 240px at 2% -20%, rgba(79,184,255,0.16), transparent 70%), linear-gradient(180deg, #dfe9f9 0%, #e9f0fa 100%); --band-base: #e4edf9; --band-line: rgba(22,104,227,0.10); --band-h: 64px; /* The side menu's own tint, in the band's family (his "a different color that goes with the same vibe, but still light"). */ --sidebar-tint: #f3f7fd; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --navy: #0b1e3a; /* OUR logo's two colours, ink and the blue of our box (RULES.md 4.69) -- the logo's own, never --accent, which a forwarder's portal makes his. */ --logo-ink: #0b1e3a; --logo-blue: #1668e3; /* Text and fills that sit ON a --navy surface. Needed because --navy INVERTS in dark mode -- it becomes near-white -- so anything that hardcoded #fff on top of it rendered white on white. Every primary button in the app was affected. */ --on-navy: #ffffff; /* What each colour MEANS, everywhere (Phase 4, test_colour_meaning.py): accent = moving normally · green = done · amber = look soon · red = costing money, or destructive · neutral = not started / not active. */ --green: #15803d; --red: #b91c1c; --amber: #b45309; --purple: #7c3aed; --neutral: #5b6b82; --neutral-bg: #eef2f7; /* A status's DOT (Needs attention, the week ahead, the four numbers): brighter than its words, which must read as text. */ --red-dot: #dc2626; --amber-dot: #e08a0b; --green-dot: #16a34a; --neutral-dot: #a9b5c6; /* The sidebar, and the margin the main column leaves for it. 232, not A v2's 240: those 8px were the operator's Users table's last room at a 1280px laptop (a table that scrolls a pixel sideways closes its row menus -- S25d's journey run found it). */ --sidebar-w: 232px; --green-bg: #e9f7ec; --red-bg: #fdeded; --amber-bg: #fdf2df; --purple-bg: #f3e8ff; --teal-bg: #e8f0fc; --card-shadow: 0 1px 1px rgba(11,30,58,0.04), 0 2px 6px -2px rgba(11,30,58,0.07), 0 16px 34px -22px rgba(11,30,58,0.28); --card-shadow-lg: 0 1px 2px rgba(11,30,58,0.05), 0 18px 36px -18px rgba(11,30,58,0.38); --pop-shadow: 0 12px 40px rgba(11,30,58,0.18); --ctl-ring: 0 0 0 1px rgba(11,30,58,0.09), 0 1px 2px rgba(11,30,58,0.05); --sidebar-bg: var(--sidebar-tint); --header-bg: var(--band-base); --table-stripe: #f6f8fb; --skeleton: #eceff1; --radius: 16px; --radius-sm: 10px; --radius-xs: 6px; } /* ---- Provider banner: the app's one honest answer to "is tracking working?" ---- */ .provider-banner { display: none; align-items: flex-start; gap: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; } .provider-banner.show { display: flex; } .provider-banner .pb-body { flex-grow: 1; min-width: 0; } .provider-banner > .ic { width: 18px; height: 18px; margin-top: 1px; } .provider-banner .pb-title { font-size: 13px; font-weight: 600; color: var(--text); } .provider-banner .pb-detail { font-size: 13px; color: var(--text2); margin-top: 2px; } /* From the status tokens, so dark mode has its own: the fixed pinks were light boxes with light words on the operator's dark dashboard. */ .pb-bad { border-color: color-mix(in srgb, var(--red) 28%, transparent); background: var(--red-bg); } .pb-warn { border-color: color-mix(in srgb, var(--amber) 28%, transparent); background: var(--amber-bg); } .pb-info { border-color: var(--border); background: var(--surface-2); } /* The operator's System status as ONE line, on every page but his dashboard (RULES.md 4.60, D8). The dashboard has the card; this hides itself there. */ .system-strip { display: none; align-items: center; gap: 10px; padding: 6px 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text2); } .system-strip.show { display: flex; } .system-strip > .ic { width: 16px; height: 16px; flex-shrink: 0; } .system-strip > span { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .system-strip b { color: var(--text); } body:not(.detail-mode) .content:has(> #view-dashboard:not(.hidden)) > .system-strip { display: none; } /* Two widgets side by side -- the dashboard's routes and map, Performance's lanes and chart. A class, not an inline style: an inline style beat the phone rule and squeezed them side by side on a phone (RULES.md 4.60, D9). */ .widget-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .routes-table td:last-child, .routes-table th:last-child { text-align: right; white-space: nowrap; } /* ---- Impersonation: deliberately loud, and dark so it cannot be mistaken for ordinary product chrome. ---- */ .impersonation-bar { display: none; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--radius); margin-bottom: 16px; background: var(--navy); color: var(--on-navy); font-size: 13px; } .impersonation-bar.show { display: flex; } .impersonation-bar .ic { color: var(--on-navy); flex-shrink: 0; } .impersonation-bar .btn { background: var(--on-navy); border-color: var(--on-navy); color: var(--navy); font-weight: 600; } /* Same trap as .bulk-bar: the rule above is more specific than .btn-danger and would win the background while .btn-danger kept the colour, leaving a red button unreadable. Nothing destructive sits here today -- the rule is here so that the first one to arrive is visible on the day it is added, rather than after somebody screenshots it. */ .impersonation-bar .btn-danger { background: var(--red); border-color: var(--red); color: #fff; } /* What this page holds, in one line, under the header (RULES.md 4.47, #3). */ .page-lede { font-size: 13px; color: var(--text2); margin: -4px 0 14px; } .page-lede.hidden { display: none; } /* ---- Compact dashboard stats ---- */ .stat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } /* A row of 3 or 4 tiles says so with a class, never an inline style: an inline style beats every phone rule, which is how five tiles were forced into one 390px line (DISCOVERY D2, test_phone.py). */ .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Look A v2 everywhere (part 2): a card has no border, 20px corners and the soft shadow; its label is written as it reads; its number is Sora. One you can open lifts 2px under a mouse, as the home's numbers do. */ .stat-card { background: var(--surface); border: none; border-radius: 20px; padding: 18px 20px; box-shadow: var(--card-shadow); cursor: pointer; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .stat-card[onclick]:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-lg); transition-duration: .16s; } } .stat-label { font-size: 13px; font-weight: 500; color: var(--text2); } .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; } .stat-note { font-size: 12px; color: var(--text2); margin-top: 4px; } /* ---- The home screen (RULES.md 5.20: item 24 part 1, then look A v2) ---- In this order: the band's sentence and the four numbers on its edge; the week ahead; Needs attention beside Top routes and the map; the journey line ("his correction: the journey line stays in the bottom"). Every card 20px round; a number, a day or a stop you can open lifts 2px on hover (motion 2: 160 ms in, 120 ms out -- a mouse only). */ .home-card { background: var(--surface); border: none; border-radius: 20px; box-shadow: var(--card-shadow); overflow: hidden; margin-bottom: 20px; } .card-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 20px; border-bottom: 1px solid var(--border-light); } .card-head h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; } .card-head > .ic { width: 16px; height: 16px; color: var(--text3); } .card-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; color: var(--text3); } /* The band's sentence: what is costing money now, and the boxes, each a round chip that opens it (RULES.md 4.47 stage 3, "in a good way so they can notice it"). Gone when nothing is past its last free day. */ .home-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 4px 0 24px; } .home-headline.hidden { display: none; } .home-headline p { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; margin-right: 8px; } .home-headline .hl-red { color: var(--red); } .box-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 12px; border: none; border-radius: 999px; background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent); font-family: var(--font-mono); font-size: 13px; font-weight: 500; cursor: pointer; } .box-chip .ic { width: 13px; height: 13px; } .box-more { font-size: 13px; color: var(--text2); } /* The four numbers: a dot and its words, the number, what it means. Red money, amber look soon, blue moving, grey nothing to do -- the number keeps its card's colour. Each is a button that opens the report it counted. */ .today-row { gap: 16px; margin-bottom: 20px; } /* Two by two once a quarter of the content is too narrow for a label on one line (a tablet beside the sidebar). */ @media (max-width: 1100px) { .today-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } button.stat-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; transition: border-color .15s, transform .16s var(--ease-out); } button.stat-card:active { transform: scale(0.97); transition-duration: .12s; } .today-card { position: relative; padding: 18px 20px; border: none; border-radius: 20px; box-shadow: var(--card-shadow); transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); } [data-theme="dark"] .today-card { background: linear-gradient(180deg, #15263f, #101e33); } .today-card .stat-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text2); text-transform: none; letter-spacing: 0; padding-right: 32px; } .today-card .stat-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--move); box-shadow: 0 0 0 4px var(--move-bg); } .today-card .stat-value { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; margin: 16px 0 8px; } .today-card .stat-note { display: block; font-size: 13px; color: var(--text3); min-height: 20px; } .today-card .stat-go { position: absolute; top: 14px; right: 16px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text3); box-shadow: inset 0 0 0 1px var(--border-light); } .today-card .stat-go .ic { width: 14px; height: 14px; } .today-card.bad .stat-value { color: var(--red); } .today-card.bad .stat-label::before { background: var(--red-dot); box-shadow: 0 0 0 4px var(--red-bg); } .today-card.warn .stat-value { color: var(--amber); } .today-card.warn .stat-label::before { background: var(--amber-dot); box-shadow: 0 0 0 4px var(--amber-bg); } .today-card.calm .stat-value { color: var(--text3); } .today-card.calm .stat-label::before { background: var(--neutral-dot); box-shadow: 0 0 0 4px var(--neutral-bg); } @media (hover: hover) and (pointer: fine) { .today-card:hover, .week-day.can-open:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-lg); transition-duration: .16s; } } /* The week ahead (his point 2): seven days in words -- today marked, what costs money now in red, what arrives in blue, free time ending amber when within 3 days (the tile's window) and grey after. A day opens its boxes. */ .week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 14px; } .week-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 104px; padding: 12px 14px 14px; border: none; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-light); font: inherit; color: var(--text); text-align: left; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); } .week-day.can-open { cursor: pointer; } .week-day.today { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-edge); } .week-day .wd-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; padding-right: 16px; } .week-day .wd-num { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1; } .week-day .wd-name { font-size: 13px; font-weight: 500; color: var(--text3); } .week-day.today .wd-name { color: var(--accent-text); font-weight: 600; } .week-day .wd-open { position: absolute; top: 14px; right: 12px; width: 14px; height: 14px; color: var(--text3); } .wd-ev { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.25; } .wd-ev::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--neutral-dot); } .wd-ev b { font-weight: 600; } .wd-ev.bad { color: var(--red); } .wd-ev.bad::before { background: var(--red-dot); box-shadow: 0 0 0 3px var(--red-bg); } .wd-ev.move { color: var(--move-text); } .wd-ev.move::before { background: var(--move); } .wd-ev.warn { color: var(--amber); } .wd-ev.warn::before { background: var(--amber-dot); } .wd-ev.calm { color: var(--text2); } .wd-none { font-size: 13px; color: var(--text3); } /* A day's boxes (motion 7): a small list that grows out of the day -- 180 ms open from 96%, 120 ms closed. */ .week-card { position: relative; overflow: visible; } .week-pop { position: absolute; z-index: 30; width: 272px; max-height: 320px; overflow-y: auto; padding: 8px 0; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--pop-shadow); transform-origin: top left; animation: pop-in .18s var(--ease-out); } .week-pop.closing { animation: pop-out .12s var(--ease-out) forwards; } .week-pop-head { padding: 4px 14px 8px; font-size: 12px; font-weight: 600; color: var(--text3); } .week-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; font-size: 13px; color: var(--text2); } .week-pop-row .cell-link { font-size: 13px; } @keyframes pop-in { from { opacity: 0; transform: scale(.96); } } @keyframes pop-out { to { opacity: 0; transform: scale(.96); } } /* Needs attention beside Top routes and the map; one column on a narrow screen. */ .dash-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; } .dash-grid > .home-card, .dash-side > .home-card { margin-bottom: 0; } .dash-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } @media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } } /* A card's count beside its title: red when money is at stake, amber when something should be looked at soon. */ .card-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--text2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } .card-count.bad { background: var(--red-bg); color: var(--red); } .card-count.warn { background: var(--amber-bg); color: var(--amber); } /* Top routes: the route, a bar for its share, how many. */ /* The header row is kept for a screen reader and sets the columns (a fixed table takes its widths from its first row), drawn at no height. */ .routes-table { table-layout: fixed; } .routes-table thead th { height: 0; padding: 0; border: 0; font-size: 0; line-height: 0; background: none; } .routes-table thead th:nth-child(2) { width: 84px; } .routes-table thead th:last-child { width: 52px; } .routes-table td { padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--border-light); font-size: 14px; } .routes-table td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .routes-table td.route-bar { padding-left: 0; padding-right: 0; } .routes-table td:last-child { padding-left: 12px; padding-right: 20px; text-align: right; font-family: var(--font-mono); font-size: 13px; font-weight: 500; } .routes-table tr:last-child td { border-bottom: none; } .routes-table tbody tr:hover td { background: none; } .share-bar { height: 6px; border-radius: 999px; background: var(--border-light); overflow: hidden; } .share-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } #shipmentMap.map-box { height: 200px; } /* The journey line ("Where everything is", B's): the four stops on one line, the sea given most of the width; every box at sea a dot at its own place on the voyage (getProgress); more than 3 at one place (a tenth of the voyage) one count. A stop opens its chip on the list. */ .journey { position: relative; height: 248px; margin: 0 20px; } .journey-line { position: absolute; top: 78px; left: 10%; right: 10%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--neutral-dot) 0%, var(--move) 27.5%, var(--move) 75%, var(--green-dot) 100%); } .stage-row { position: absolute; top: 46px; transform: translateX(-50%); width: 260px; display: flex; flex-direction: column; align-items: center; padding: 2px 8px 8px; border: none; border-radius: 20px; background: none; font: inherit; color: var(--text); text-align: center; cursor: pointer; transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out); } @media (hover: hover) and (pointer: fine) { .stage-row:hover { transform: translateX(-50%) translateY(-2px); box-shadow: none; } .stage-row:hover .stage-ring { box-shadow: 0 0 0 1px var(--border), var(--card-shadow-lg); } } .stage-ring { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--border), 0 6px 14px -8px rgba(11,30,58,0.3); transition: box-shadow .16s var(--ease-out); } .stage-core { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--neutral-bg); color: var(--text3); } .stage-core .ic { width: 20px; height: 20px; } .stage-row.moving .stage-core { background: var(--move-bg); color: var(--move); } .stage-row.done .stage-core { background: var(--green-bg); color: var(--green); } .stage-count { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stage-name { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; } .stage-note { display: block; margin-top: 2px; font-size: 12px; color: var(--text3); } .stage-mini { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin-top: 8px; } .stage-mini span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .stage-mini .bad { background: var(--red-bg); color: var(--red); } .stage-mini .warn { background: var(--amber-bg); color: var(--amber); } .box-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--move); box-shadow: 0 0 0 2px var(--surface); } .box-pile { position: absolute; top: 44px; transform: translateX(-50%); min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--move); color: #ffffff; font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 24px; text-align: center; box-shadow: 0 0 0 2px var(--surface), 0 6px 12px -6px var(--move); } [data-theme="dark"] .box-pile { color: #0b1e3a; } .box-pile::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--move); border-bottom: 0; } /* Motion 3: the boxes at sea slide in from the In transit stop, once, when the home opens (240 ms each, all done by 300); the count bubbles fade in last. --dx is how far each one travels, set as it is drawn. */ .journey.arriving .box-dot { animation: dot-in .24s var(--ease-out) both; } .journey.arriving .box-pile { animation: pile-in .12s ease .18s both; } @keyframes dot-in { from { opacity: 0; transform: translateX(calc(var(--dx, 0px) * -1)); } } @keyframes pile-in { from { opacity: 0; } } /* Narrower than a laptop (a tablet, or a small laptop beside the menu): the week is a row of days that scrolls sideways, the journey line its four stops without the dots, and the bar keeps its room for the search. The phone block below tightens the same three further. */ @media (max-width: 1100px) { .week-days { display: flex; overflow-x: auto; scrollbar-width: none; } .week-day { flex: none; width: 132px; } .journey { height: auto; margin: 0; padding: 16px 8px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .journey-line { top: 48px; left: 12.5%; right: 12.5%; } .stage-row, .stage-row:hover { position: relative; top: auto; left: auto !important; transform: none; width: auto; padding: 0; } .stage-mini { flex-wrap: wrap; } .box-dot, .box-pile, .journey-legend, .page-when { display: none; } } .legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--move); } .legend-pile { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--move); color: #ffffff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; } [data-theme="dark"] .legend-pile { color: #0b1e3a; } /* ---- Needs attention ---- One line a box on a laptop: the number, why, the route, when -- fixed columns, so the reasons line up down the card. Two lines when narrow. */ .att-row { display: grid; grid-template-columns: 8px 104px minmax(0, 1fr) 132px 80px; align-items: center; column-gap: 12px; min-height: 46px; margin: 0 20px; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; } .att-row:last-child { border-bottom: none; } .att-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--neutral-dot); box-shadow: 0 0 0 4px var(--neutral-bg); } .att-dot.bad { background: var(--red-dot); box-shadow: 0 0 0 4px var(--red-bg); } .att-dot.warn { background: var(--amber-dot); box-shadow: 0 0 0 4px var(--amber-bg); } .att-reason, .att-route { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-reason { font-size: 14px; font-weight: 500; color: var(--text2); } .att-reason.bad { color: var(--red); } .att-reason.warn { color: var(--amber); } .att-route { color: var(--text3); } .att-when { color: var(--text3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .att-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 20px; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--text3); } @media (max-width: 1100px) { .att-row { grid-template-columns: 8px minmax(0, 1fr) auto; row-gap: 2px; grid-template-areas: "dot num when" ". reason reason" ". route route"; } .att-dot { grid-area: dot; } .att-num { grid-area: num; } .att-when { grid-area: when; } .att-reason { grid-area: reason; white-space: normal; } .att-route { grid-area: route; font-size: 12px; } } /* ---- Detail fact cards ---- Four across, not three: the vessel was buried in an eleven-field grid below the fold, and "which ship is it on" is a question people ask out loud. Wraps to two, then one, so it never squeezes to unreadable. */ .fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } @media (max-width: 1100px) { .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .fact-row { grid-template-columns: 1fr; } } .fact-card { background: var(--surface); border: none; border-radius: 20px; padding: 18px 20px; box-shadow: var(--card-shadow); } .fact-label { font-size: 13px; font-weight: 500; color: var(--text2); } .fact-value { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin-top: 8px; } .fact-note { font-size: 13px; color: var(--text2); margin-top: 2px; } /* Look soon / money: the status's own wash and edge -- from the tokens, so dark mode has its own (the fixed creams were light cards on a dark page). */ .fact-card.warn { background: var(--amber-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 28%, transparent), var(--card-shadow); } .fact-card.warn .fact-label, .fact-card.warn .fact-value, .fact-card.warn .fact-note { color: var(--amber); } .fact-card.bad { background: var(--red-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 28%, transparent), var(--card-shadow); } .fact-card.bad .fact-label, .fact-card.bad .fact-value, .fact-card.bad .fact-note { color: var(--red); } /* ---- The route strip ---- Load port on the left, discharge port on the right, the box somewhere between them. It is the first thing on the detail page because it is the thing people open the page to find out, and reading it needs no numbers: how far along the bar the ship sits IS the answer. Mohammad, 2026-09-15, with SafeCube's screens attached: "for any shippment or container when you click on it they have a more relerfing UI". */ .route-strip { background: var(--surface); border: none; border-radius: 20px; padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--card-shadow); } .rs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .rs-port { min-width: 0; flex: 1 1 0; } .rs-port.to { text-align: right; } .rs-label { font-size: 13px; font-weight: 500; color: var(--text3); } .rs-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin-top: 4px; word-break: break-word; } .rs-date { font-size: 13px; color: var(--text2); margin-top: 2px; } .rs-rail { position: relative; height: 28px; margin: 18px 2px 0; } .rs-track { position: absolute; left: 0; right: 0; top: 11px; height: 6px; background: var(--border-light); border-radius: 999px; } .rs-fill { position: absolute; left: 0; top: 11px; height: 6px; background: var(--green); border-radius: 999px; transition: width .24s var(--ease-out); } .rs-end { position: absolute; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); box-sizing: border-box; } .rs-end.start { left: 0; background: var(--green); border-color: var(--green); } .rs-end.finish { right: 0; } .rs-end.finish.done { background: var(--green); border-color: var(--green); } /* The marker is clamped to 2%..98% in JS so it never hangs off either end. */ .rs-boat { position: absolute; top: 0; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--move); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--move-bg); box-sizing: border-box; } .rs-boat .ic { width: 14px; height: 14px; color: var(--move); } .rs-boat.done { border-color: var(--green); box-shadow: none; } .rs-boat.done .ic { color: var(--green); } .rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--text2); flex-wrap: wrap; } .rs-foot b { color: var(--text); font-weight: 600; } /* ---- The event timeline, as a table ---- It was a stacked list where every row repeated the same three shapes at three different sizes. A table lets the eye run down one column -- which is how somebody actually reads a timeline: dates first, then across. */ .ev-table { width: 100%; border-collapse: collapse; } .ev-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--border-light); white-space: nowrap; } .ev-table td { padding: 10px; border-bottom: 1px solid var(--border-light); font-size: 13px; vertical-align: top; } .ev-table tbody tr:last-child td { border-bottom: 0; } .ev-rail { width: 24px; padding: 10px 0 10px 2px !important; position: relative; } /* One continuous line down the column, trimmed at the first and last dot so it does not float above the top row or below the bottom one. */ .ev-rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border-light); transform: translateX(-50%); } .ev-table tbody tr:first-child .ev-rail::before { top: 14px; } .ev-table tbody tr:last-child .ev-rail::before { bottom: calc(100% - 16px); } .ev-dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); margin: 4px auto 0; box-sizing: border-box; } .ev-dot.done { background: var(--green); border-color: var(--green); } .ev-dot.current { background: var(--move); border-color: var(--move); box-shadow: 0 0 0 3px var(--move-bg); } .ev-dot.est { border-style: dashed; border-color: var(--text3); background: var(--surface); } .ev-when { white-space: nowrap; font-weight: 600; } .ev-sub { font-size: 11px; color: var(--text3); font-weight: 400; margin-top: 1px; } /* "Journey so far" and "Expected next" (RULES.md 4.60, D2). */ .ev-table tr.ev-group td { font-size: 12px; font-weight: 600; color: var(--text2); padding: 14px 10px 6px; border-bottom: 1px solid var(--border-light); } .ev-table tr.ev-group:first-child td { padding-top: 8px; } .ev-table tr.ev-none td { font-weight: 400; color: var(--text3); border-bottom: 0; } .ev-loc { color: var(--text2); } /* Where an event came from (RULES.md 4.65 item 18): a quiet outlined tag, so it reads as a label and not as a status. */ .ev-source { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 400; color: var(--text2); white-space: nowrap; vertical-align: middle; } .ev-scroll { max-height: 420px; overflow-y: auto; } /* ---- The paste grid on the import screen ---- A spreadsheet is the shape this data already lives in, so the manual entry is a spreadsheet too: paste a block out of Excel and it lands in the right columns. Column A is the identifier; the rest are the customer's OWN fields, by name (RULES.md 4.6a). */ .pg-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--text3); font-size: 12px; } .pg-or::before, .pg-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* A real spreadsheet, not one enormous column. `width: 100%` used to stretch whatever columns existed across the whole dialogue, so an account with no custom fields got ONE column a thousand pixels wide — which is what he reported. Columns are a fixed width now and a spacer cell absorbs the leftover, exactly as a sheet looks. */ .pg-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: 40vh; background: var(--surface); } .pg { border-collapse: collapse; width: 100%; font-size: 12px; } .pg th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-light); padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text2); white-space: nowrap; letter-spacing: .02em; } /* A width AND a floor. `table-layout: auto` treats width as a suggestion and sizes to the heading, so "PICKUP#" came out 67px while "DEPOSCO DELIVERY LOCATION" took 192 — the floor evens that out without clipping a field name the way `table-layout: fixed` would. */ .pg th, .pg td { width: 165px; min-width: 125px; } /* The slack. Not a data column: it has no input and is never read, it just stops the real columns being stretched to fill the dialogue. */ .pg th.pg-sp, .pg td.pg-sp { width: auto; min-width: 0; border-right: 0; background: var(--surface); } .pg th.pg-n, .pg td.pg-n { width: 34px; min-width: 34px; text-align: right; color: var(--text3); background: var(--surface-2); font-variant-numeric: tabular-nums; padding-right: 8px; } .pg td { border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light); padding: 0; } .pg input { width: 100%; border: 0; background: none; padding: 4px 8px; font: inherit; color: var(--text); outline: none; } .pg input:focus { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); } .pg tr:last-child td { border-bottom: 0; } .pg-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text2); flex-wrap: wrap; } /* ---- Brand preview: what their customer actually meets ---- A colour picker tells you nothing about what a stranger will see, so the screen shows the sign-in page itself, twice: as it is now and as it would be. Preview-before-publish is the standard pattern for white-label settings and this is why (RULES.md 4.32). */ .bp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 860px) { .bp-pair { grid-template-columns: 1fr; } } .bp-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .bp { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; } .bp-chrome { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #eceff3; border-bottom: 1px solid #dfe3e9; } .bp-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8cdd6; } .bp-url { margin-left: 6px; font-size: 11px; color: #5b6472; background: #fff; border-radius: 20px; padding: 4px 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono, monospace); } /* The screen inside the frame IS the sign-in page: drawn at 1280x760 from the page's own classes and scaled to fit (fitBrandPreviews) -- a true small copy, not a drawing of one, so it cannot fall out of step with the real page (RULES.md 4.56). Nothing in it can be clicked. */ .bp-screen { position: relative; overflow: hidden; background: var(--surface); height: calc(760px * var(--bp-scale, .4)); } .bp-scale { position: absolute; top: 0; left: 0; width: 1280px; height: 760px; transform: scale(var(--bp-scale, .4)); transform-origin: top left; pointer-events: none; user-select: none; /* The frame the copy is sized by -- see the .sp rules beside .lh-title. */ container-type: size; } .sp { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); width: 100%; height: 100%; background: var(--bg); text-align: left; } /* 🔴 Our card ("Without your branding") wears OUR colours whoever looks at it. Not inherited: on a forwarder's Settings the page around it wears HIS (applyBranding sets them on the root), and our card showed his button. Not written onto the card either: that pinned the light blue in dark mode. These are the stylesheet's own values for our page, light and dark. */ .sp.sp-ours { --accent: #1668e3; --accent-text: #1668e3; --on-accent: #ffffff; --accent-fill: #1668e3; } [data-theme="dark"] .sp.sp-ours { --accent: #4fb8ff; --accent-text: #4fb8ff; --on-accent: #0b1e3a; --accent-fill: #2a72e5; } .sp .bp-flabel { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .sp .bp-input { height: 48px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } /* ---- Table cell sub-labels ---- */ .cell-sub { font-size: 12px; color: var(--text2); margin-top: 1px; } .cell-main { font-weight: 500; } .route-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .route-cell .ic { color: var(--text3); width: 13px; height: 13px; flex-shrink: 0; } /* Dark: Deep Sea surfaces, Signal Blue for actions (RULES.md 4.48 — "on dark"). */ /* Look A v2's dark: the deep sea -- a darker ground, cards a step up from it, the band a blue glow, the menu deep water. Signal Blue stays the words' blue (RULES.md 4.48); a filled button is a deeper blue with white on it. */ [data-theme="dark"] { /* The browser's own controls (tick-boxes, selects' lists, scrollbars) in their dark form too: a white tick-box on every row of a dark list. */ color-scheme: dark; --bg: #070f1b; --surface: #0f1c2f; --surface-2: #132239; --border: #233149; --border-light: #1a283e; --text: #e7eef8; --text2: #b3c1d4; --text3: #94a4bb; --accent: #4fb8ff; --accent-strong: #2fa4f5; --accent-bg: rgba(79,163,255,0.13); --accent-ring: rgba(79,184,255,0.24); --accent-edge: color-mix(in srgb, var(--accent) 55%, transparent); --accent-text: #4fb8ff; --on-accent: #0b1e3a; /* Signal Blue is light: Deep Sea text on it */ --accent-fill: #2a72e5; /* A v2 drew #2f7ff0; this is the nearest that carries white at 4.5:1 */ --move: #4fa3ff; --move-text: #8cc4ff; --move-bg: rgba(79,163,255,0.15); --band-paint: radial-gradient(1000px 380px at 84% -36%, rgba(47,127,240,0.58), transparent 70%), radial-gradient(640px 300px at 8% -46%, rgba(79,184,255,0.22), transparent 70%), linear-gradient(180deg, #0d1d35 0%, #0a1626 100%); --band-base: #0c1a2f; --band-line: rgba(255,255,255,0.06); --sidebar-tint: #0a1626; --navy: #e8f0fc; --on-navy: #0b1e3a; --logo-ink: #e7eef8; --logo-blue: #4fb8ff; --green: #4ade80; --red: #f87171; --amber: #fbbf24; --purple: #c4b5fd; --neutral: #a3b3c9; --neutral-bg: rgba(255,255,255,0.07); --red-dot: #f26464; --amber-dot: #f2b33d; --green-dot: #34c46e; --neutral-dot: #5d6e88; --green-bg: rgba(74,222,128,0.13); --red-bg: rgba(255,110,110,0.15); --amber-bg: rgba(251,194,60,0.14); --purple-bg: rgba(196,181,253,0.14); --teal-bg: rgba(79,184,255,0.14); --card-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.06), 0 20px 40px -26px rgba(0,0,0,0.9); --card-shadow-lg: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 40px -20px rgba(0,0,0,0.95); --pop-shadow: 0 12px 40px rgba(0,0,0,0.55); --ctl-ring: 0 0 0 1px rgba(255,255,255,0.10); --table-stripe: #122137; --skeleton: #1a283e; } /* A forwarder's portal (RULES.md 5.20, his "A", 2026-10-19): the band and the side menu take HIS colour -- a light tint of it in light mode (mixed into white), a deep one in dark (into a neutral near-black, so his hue shows; into our navy it stayed navy) -- by a recipe that gives back ours, within a shade, from Lens Blue; ours stays exactly as above wherever no brand is set (test_brand_tint.py). applyBranding marks the root data-branded and writes his colour (--accent) and his two text colours; a value written on the root would beat the dark theme, so the choice is made here. His preview card (.sp, Settings → Branding) wears data-branded too. */ [data-branded] { --accent-text: var(--accent-on-light); --accent-strong: var(--accent-on-light); } [data-theme="dark"][data-branded], [data-theme="dark"] [data-branded] { --accent-text: var(--accent-on-dark); --accent-strong: var(--accent-on-dark); } :root[data-branded] { --band-paint: radial-gradient(900px 300px at 86% -40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(560px 240px at 2% -20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, #ffffff) 0%, color-mix(in srgb, var(--accent) 8%, #ffffff) 100%); --band-base: color-mix(in srgb, var(--accent) 11%, #ffffff); --band-line: color-mix(in srgb, var(--accent) 12%, transparent); --sidebar-tint: color-mix(in srgb, var(--accent) 4%, #ffffff); } :root[data-branded][data-theme="dark"] { --band-paint: radial-gradient(1000px 380px at 84% -36%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%), radial-gradient(640px 300px at 8% -46%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, #0a0e14) 0%, color-mix(in srgb, var(--accent) 9%, #0a0e14) 100%); --band-base: color-mix(in srgb, var(--accent) 13%, #0a0e14); --band-line: rgba(255,255,255,0.06); --sidebar-tint: color-mix(in srgb, var(--accent) 9%, #0a0e14); } * { margin:0; padding:0; box-sizing:border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); display: flex; min-height: 100vh; font-size: 16px; line-height: 1.5; letter-spacing: -0.006em; } /* Read by assistive technology, not drawn. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- The SailPing logo (RULES.md 4.69, his pick 2026-10-20): the Stack "Ribs" MARK -- three containers, ours (the middle one, pulled out) in blue -- beside the WORD SailPing in Sora SemiBold, as one lockup. Drawn here, not an image, so it takes the theme: --logo-ink and --logo-blue, Deep Sea and Lens Blue in light, #e7eef8 and Signal Blue in dark and on the dark sign-in panel (.login-hero). Light and dark only, no one-colour set (his words: "no need for others colords, like the full black or full white"). Never --accent: that is a forwarder's colour on his portal. The word is sized to the mark as his lockup draws it: its capitals 0.46 of the mark's height (font-size ~0.63 of it), -0.015em the lockup's width. The mark (clMark) fills its slot; each slot gives it its size. ---- */ .cl-word { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--logo-ink); white-space: nowrap; } .cl-mark { display: block; width: 100%; height: 100%; } .cl-ink { fill: var(--logo-ink); } .cl-blue { fill: var(--logo-blue); } /* "Powered by SailPing" under a forwarder's form (brandFootHTML): our small mark -- the 16 px drawing, at 16 px -- and our name in our ink, as his file powered-by-sailping draws it; "Powered by" stays the line's grey. */ .cl-by { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; vertical-align: middle; } .cl-by .cl-mark { width: 16px; height: 16px; flex: none; } .cl-by .cl-word { font-size: 12px; } b, strong { font-weight: 600; } ::selection { background: var(--accent); color: var(--on-accent); } /* Icon system */ .ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; flex-shrink: 0; } /* ---------- Sidebar ---------- Look A v2 (RULES.md 5.20): its own light tint in the band's family (deep water in dark), the open page a soft round pill with a blue edge, live counts, the four groups kept (4.22), the account card pinned to its foot, and it folds to icons (toggleNavFold, remembered on this browser). */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; } /* Motion 6, the fold (220 ms): ONLY while the person folds it (body.nav-folding, set by toggleNavFold) -- a width transition left on for good also ran whenever the window's height was re-measured, and a full-page picture drew the menu 30px too wide over the page. */ body.nav-folding .sidebar { transition: width .22s var(--ease-in-out); } body.nav-folding .main { transition: margin-left .22s var(--ease-in-out); } .sidebar-logo { padding: 20px 24px 8px; min-height: 64px; display: flex; align-items: center; gap: 12px; } .logo-mark { width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #0b1e3a); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .logo-mark .ic { width: 16px; height: 16px; } /* OUR mark SHOWS again, beside the word (RULES.md 4.69, his new logo, the lockup). Until then it was hidden (4.49, 4.50: "remove the eye from the beginning of the brand name") -- that was about the old eye. `.is-ours` (set by applyBranding) now only sizes ours: no box, no gradient, the mark's own two colours; a forwarder's mark -- his logo, or the ship -- keeps its box. 32px, not the 28 his preview drew: the 32-grid mark is sharp only at whole multiples of 32 -- at 28 its ribs smeared to grey on a 1x screen -- and the word at 20 is the lockup's size for it. */ .sidebar-logo .logo-mark.is-ours { width: 32px; height: 32px; border-radius: 0; } .sidebar-logo .logo-text { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .sidebar-logo .logo-text .cl-word { font-size: 20px; } .sidebar-nav { flex: 1; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; } /* One section: a quiet heading, then its screens. */ .nav-group { display: flex; flex-direction: column; gap: 2px; } .nav-head { font-size: 11px; font-weight: 600; color: var(--text3); white-space: nowrap; text-transform: uppercase; letter-spacing: .12em; padding: 8px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 8px 8px 12px; border-radius: 999px; color: var(--text2); cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color .12s, color .12s, box-shadow .12s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; position: relative; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-edge), 0 8px 18px -12px var(--accent); } [data-theme="dark"] .nav-item.active { background: var(--accent-bg); } .nav-item .nav-icon { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--text3); } .nav-item.active .nav-icon { color: var(--accent-text); } .nav-item .nav-icon .ic { width: 18px; height: 18px; } .nav-item .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .1s ease; } /* How many are on the screen that button opens. Empty when there is nothing to say, and `:empty` keeps the padding from drawing an empty pill. Red when money is at stake (Dashboard: Needs attention holds a red item). */ .nav-count { min-width: 24px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--neutral-bg); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text2); font-variant-numeric: tabular-nums; } .nav-count:empty { display: none; } .nav-count.is-bad { background: var(--red-dot); color: #ffffff; box-shadow: 0 4px 10px -4px var(--red-dot); } /* The fold, at the menu's edge. Only where the menu stands beside the page. */ .nav-fold { position: absolute; top: 24px; right: -14px; z-index: 2; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--surface); color: var(--text3); cursor: pointer; box-shadow: var(--ctl-ring), 0 6px 14px -8px rgba(11,30,58,0.3); } .nav-fold:hover { color: var(--text); } .nav-fold .ic { width: 14px; height: 14px; transition: transform .22s var(--ease-in-out); } body.nav-folded .nav-fold .ic { transform: rotate(180deg); } /* The account card, pinned to the menu's foot (his note on A v2: "bottom left"). The ONE account button: on a phone placeAccount() moves it into the header, where the drawer cannot hide it. */ .sidebar-foot { padding: 8px 8px 12px; } .sidebar-foot .account-wrap { width: 100%; } .sidebar-foot .account-btn { width: 100%; max-width: none; min-height: 56px; padding: 8px; gap: 8px; border: none; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-light); text-align: left; } [data-theme="dark"] .sidebar-foot .account-btn { background: rgba(255,255,255,0.04); } .sidebar-foot .account-btn:hover, .sidebar-foot .account-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--border); } .sidebar-foot .account-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; } .account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .account-sub { font-size: 12px; font-weight: 400; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Folded: icons only (72px); a name shows beside its icon on hover, in ONE tip drawn over the page (#navTip, showNavTip -- the menu scrolls, and a name inside it would be cut at its edge): the first after 300 ms, the next ones at once while the pointer stays in the menu. The name stays in the button for a screen reader. The foot is the round initials alone. */ @media (min-width: 769px) { body.nav-folded { --sidebar-w: 72px; } body.nav-folded .sidebar-logo { padding: 20px 0 8px; justify-content: center; } /* Folded, the mark alone -- ours or his -- and the name is put away. */ body.nav-folded .sidebar-logo .logo-text { display: none; } body.nav-folded .sidebar-nav { padding: 4px 12px 16px; align-items: center; } body.nav-folded .nav-group { align-items: center; } body.nav-folded .nav-head { font-size: 0; padding: 0; width: 32px; height: 1px; margin: 6px 0; background: var(--border); } body.nav-folded .nav-item { width: 48px; padding: 8px; justify-content: center; } body.nav-folded .nav-item .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .nav-tip { position: fixed; z-index: 130; padding: 6px 12px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--pop-shadow); pointer-events: none; opacity: 0; transition: opacity .12s ease; } .nav-tip.show { opacity: 1; } .nav-tip.instant { transition: none; } body.nav-folded .nav-count { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; box-shadow: 0 0 0 2px var(--sidebar-bg); } body.nav-folded .sidebar-foot { display: flex; justify-content: center; } body.nav-folded .sidebar-foot .account-btn { width: auto; min-height: 0; padding: 6px; border-radius: 50%; background: none; box-shadow: none; } body.nav-folded .sidebar-foot .account-text, body.nav-folded .sidebar-foot .account-caret { display: none; } body.nav-folded .sidebar-foot .account-menu { left: 0; } } /* ---------- Header ---------- */ /* appShell is a flex item of , and a flex item defaults to min-width:auto -- it refuses to shrink below its own content. So the widest table on a page (Users, at ~1063px) dragged the entire shell past the viewport and the whole window scrolled sideways: sidebar and header included, which looks broken rather than merely tight. min-width:0 lets the shell match the window, and the wide table then scrolls inside its own .table-scroll container, which is what every other table already did. */ #appShell { flex: 1 1 auto; min-width: 0; width: 100%; } /* The band (look A v2): one paint, --band-paint, drawn on the main column from its top to --band-h -- the bar's height on every page, and on the home down to the middle of the four numbers (fitHomeBand), so they sit on its edge. The bar carries the same paint at the same size, so where the two overlap they are the same pixels, and a scrolled bar still wears the band's top. The line under the band is the first layer. */ .main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; background-image: linear-gradient(var(--band-line), var(--band-line)), var(--band-paint); background-size: 100% 1px, 100% var(--band-h), 100% var(--band-h), 100% var(--band-h); background-position: 0 var(--band-h), 0 0, 0 0, 0 0; background-repeat: no-repeat; } .header { min-height: 64px; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background-color: var(--header-bg); background-image: var(--band-paint); background-size: 100% var(--band-h); background-position: 0 0; background-repeat: no-repeat; box-shadow: 0 1px 0 var(--band-line); position: sticky; top: 0; z-index: 40; } body.home-band .header { box-shadow: none; } .header-left { font-family: var(--font-display); font-weight: 600; font-size: 20px; display: flex; align-items: center; gap: 12px; letter-spacing: -0.01em; min-width: 0; } /* The day, beside Dashboard (the reader's zone). */ .page-when { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--text2); white-space: nowrap; letter-spacing: 0; } .page-when::before { content: "\00b7"; margin: 0 8px 0 2px; } .header-center { flex: 1; max-width: 400px; margin-left: auto; position: relative; } .header-right { display: flex; gap: 8px; align-items: center; } /* Never wraps or shrinks: on a phone, a 2px step in the spacing scale was enough to fold "← Back" onto two lines. There the arrow stands alone. */ .back-btn { background: var(--surface); border: none; box-shadow: var(--ctl-ring); border-radius: 999px; padding: 6px 14px; cursor: pointer; color: var(--text2); font-size: 14px; font-family: inherit; display: none; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } @media (max-width: 560px) { .back-btn .back-word { display: none; } } .back-btn:hover { color: var(--text); background: var(--surface-2); } /* Global search */ .global-search { width: 100%; height: 40px; padding: 8px 16px 8px 40px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; outline: none; background: var(--surface); box-shadow: var(--ctl-ring); color: var(--text); font-family: var(--font-ui); transition: border-color .15s, box-shadow .15s; } [data-theme="dark"] .global-search { background: rgba(255,255,255,0.06); } .global-search:hover { border-color: var(--border); } .global-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .global-search::placeholder { color: var(--text3); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); display: flex; pointer-events: none; } .search-icon .ic { width: 15px; height: 15px; } /* Notifications bell */ .bell-wrap { position: relative; } /* Phone only: the search button and the bottom bar (see the phone block). */ .search-toggle, .tabbar { display: none; } /* Round, on the band (look A v2): the bell, the phone's search. */ .search-toggle { background: var(--surface); border: none; box-shadow: var(--ctl-ring); border-radius: 50%; width: 40px; height: 40px; padding: 0; justify-content: center; cursor: pointer; color: var(--text); align-items: center; } .search-toggle .ic { width: 18px; height: 18px; } .bell-btn { background: var(--surface); border: none; box-shadow: var(--ctl-ring); border-radius: 50%; width: 40px; height: 40px; padding: 0; justify-content: center; cursor: pointer; color: var(--text); position: relative; transition: box-shadow .12s; display: flex; align-items: center; } [data-theme="dark"] .bell-btn, [data-theme="dark"] .search-toggle { background: rgba(255,255,255,0.06); } .bell-btn:hover { box-shadow: var(--ctl-ring), 0 6px 14px -8px rgba(11,30,58,0.35); } .bell-btn .ic { width: 18px; height: 18px; } .bell-badge { position: absolute; top: -4px; right: -4px; background: var(--red-dot); color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--band-base); } .bell-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 384px; max-width: 90vw; max-height: 480px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--pop-shadow); z-index: 120; display: none; } .bell-dropdown.show { display: block; } .bell-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-light); position: sticky; top: 0; background: var(--surface); z-index: 2; } .bell-head b { font-size: 15px; font-weight: 650; } .bell-empty { padding: 32px 16px; text-align: center; color: var(--text3); font-size: 14px; } .bell-empty .ic { width: 22px; height: 22px; margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto; } .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border-light); display: flex; gap: 12px; align-items: flex-start; cursor: pointer; transition: background 0.1s; } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: var(--accent-bg); } .notif-icon { flex-shrink: 0; margin-top: 1px; color: var(--text2); width: 18px; height: 18px; } .notif-icon .ic { width: 18px; height: 18px; } .notif-item.unread .notif-icon { color: var(--accent-text); } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 14px; font-weight: 600; } .notif-detail { font-size: 13px; color: var(--text2); margin-top: 1px; } .notif-time { font-size: 12px; color: var(--text3); margin-top: 4px; } /* The account button and its menu (Phase 4, the app frame): who you are, Settings, dark mode, Sign out. Sized like the bell beside it. */ .account-wrap { position: relative; } .account-btn { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 4px; background: none; border: none; border-radius: 999px; cursor: pointer; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; transition: box-shadow .12s, background-color .12s; } .account-initials { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent-fill), color-mix(in oklab, var(--accent-fill) 55%, #0b1e3a)); color: #ffffff; font-size: 13px; font-weight: 600; } .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-caret { width: 16px; height: 16px; flex-shrink: 0; color: var(--text3); } .account-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 264px; max-width: 90vw; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--pop-shadow); z-index: 120; display: none; font-family: var(--font-ui); } .account-menu.show { display: block; } .account-head { padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border-light); } .account-head-name { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } .account-head-sub { font-size: 12px; color: var(--text3); margin: 2px 0 8px; overflow-wrap: anywhere; } .account-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 10px; background: none; color: var(--text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; } .account-item:hover, .account-item:focus-visible { background: var(--surface-2); } .account-item .ic { width: 16px; height: 16px; color: var(--text2); } /* A row's secondary actions behind "…" (RULES.md 4.60, D11): rowMenu(). */ details.row-menu { display: inline-block; } /* Framed wherever it sits -- on Team it was a bare glyph, framed only on Users by .user-actions (checker, 2026-10-12). */ details.row-menu > summary { list-style: none; border: 1px solid var(--border); border-radius: 999px; } details.row-menu > summary::-webkit-details-marker { display: none; } /* Closed is gone, not merely unseen: a fixed list left in the layout read as running off a phone's edge. */ details.row-menu:not([open]) > .row-menu-list { display: none; } .row-menu-list { position: fixed; z-index: 120; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--pop-shadow); } .row-menu-list hr { border: 0; border-top: 1px solid var(--border-light); margin: 4px 0; } .row-menu-list .rm-danger, .row-menu-list .rm-danger .ic { color: var(--red); } /* ---------- Buttons ---------- */ /* Round (look A v2: B's round buttons and chips, one shape everywhere). A press shrinks it to 97% and lets it spring back (motion 4: 120 ms down, 160 ms back) -- never on a phone's long-press, never for reduced motion. */ .btn { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color .12s, border-color .12s, color .12s, transform .16s var(--ease-out); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: inherit; box-shadow: 0 1px 2px rgba(11,30,58,0.05); } .btn:hover { background: var(--surface-2); border-color: var(--text3); } .btn:active { transform: scale(0.97); transition-duration: .12s; } .btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; } .btn .ic { width: 15px; height: 15px; } /* ONE button set (Phase 4, test_buttons.py): .btn, .btn-sm, .btn-lg, and .btn-block for full width; .btn-icon for an icon alone (.btn-tiny inside a tree). No button sizes itself by hand. */ .btn-lg { padding: 12px 20px; font-size: 15px; } .btn-block { width: 100%; justify-content: center; } .btn-icon.btn-tiny { padding: 2px 4px; margin-top: 1px; min-width: 0; } /* The brand's action colour (RULES.md 4.48: Lens Blue — "actions"). Through --accent-text, never --accent: on a forwarder's portal that is THEIR colour, darkened by the server until white text on it reads (app._brand_from_company). It was --navy, so every primary button ignored the brand entirely (open item 17 since 2026-09-12). */ /* --accent-fill since look A v2: ours Lens Blue in light and a deeper blue in dark, both carrying white words; a forwarder's is still his darkened --accent-text (applyBranding sets both). */ .btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 22px -12px var(--accent-fill); } .btn-primary:hover { opacity: 0.92; background: var(--accent-fill); border-color: var(--accent-fill); } .btn-danger { background: var(--red); border-color: var(--red); color: #fff; } .btn-danger:hover { opacity: 0.92; background: var(--red); border-color: var(--red); } /* Destructive, but one step quieter than Stop: Archive (his "as you said", RULES.md 4.65 item 14, audit CL-29). Stop stays filled red (4.1). The text is red on the card's own surface, so it never goes white-on-white the way the bulk bar once made it (test_danger_buttons_visible.py). */ .btn-danger-outline { background: var(--surface); border-color: var(--red); color: var(--red); } .btn-danger-outline:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); } .btn-ghost { background: none; border-color: transparent; box-shadow: none; } .btn-sm { padding: 6px 10px; font-size: 13px; } .btn-sm .ic { width: 14px; height: 14px; } .btn-icon { padding: 8px; min-width: 32px; justify-content: center; background: none; border: none; box-shadow: none; } .btn-icon:hover { background: var(--surface-2); border-color: transparent; } .content { padding: 20px 28px 32px; overflow-y: auto; flex: 1; } /* ---------- KPI Cards ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } /* Four across where the markup says so: .cols-4 stands earlier in this sheet and lost to the rule above, so the operator's Billing and a customer's page put their fourth card on a line of its own. */ .kpi-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-card { background: var(--surface); border: none; border-radius: 20px; padding: 20px 24px; box-shadow: var(--card-shadow); } .kpi-header { font-size: 14px; font-weight: 500; color: var(--text2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .kpi-header .ic { width: 16px; height: 16px; color: var(--text3); } .kpi-value { font-family: var(--font-display); font-size: 34px; font-weight: 600; text-align: center; margin-bottom: 8px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi-divider { height: 1px; background: var(--border-light); margin: 14px 0; } .kpi-modes { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--text2); } .kpi-modes span { display: flex; align-items: center; gap: 4px; } .kpi-card.in-transit .kpi-value { color: var(--move-text); } .kpi-card.delivered-card .kpi-value { color: var(--green); } .kpi-card.pending .kpi-value { color: var(--neutral); } .kpi-hint { text-align: center; font-size: 12px; color: var(--text3); margin-top: 4px; } .kpi-mini { margin-top: 10px; font-size: 13px; color: var(--text2); } .kpi-mini-item { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border-light); } .kpi-mini-item:last-child { border-bottom: none; } .kpi-mini-item span:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--text2); } /* ---------- Tabs ---------- ONE tab style (Phase 4, test_tabs.py):
of