/* ============================================================ Kiteview POD — Proof of Delivery · Design System Shared tokens + primitives for Control Center and Driver App. Plain CSS, no build step. Aesthetic: refined logistics ops — Kiteview navy + orange, slate ink, tabular numbers. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Sora:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); /* Kiteview POD — navy + orange identity. The two brand hexes are sampled from the Kiteview logo: navy #01476b (the KITEVIEW wordmark), orange #f37c20 (the kite swoosh). Navy carries every primary action; orange is the accent only, because orange on white is 2.7:1 and would both fail contrast as a button and collide with the amber "pending" semantic. Token names are unchanged, so the whole app re-themes from this block — same contract as prototype/assets/css/app.css, which this is kept in step with. */ :root { /* Brand shell — deep navy (sidebar / dark surfaces) */ --ink: #012538; /* deep navy sidebar shell */ --ink-2: #01324c; /* raised navy panel */ --ink-3: #014a6f; /* navy hover / border */ /* Brand — Kiteview navy */ --brand: #01476b; /* resting primary (logo navy)*/ --brand-700: #013c5b; /* pressed / dark gradient end*/ --brand-600: #01689d; /* hover / lighter accent */ --brand-300: #3fbdfd; /* on-dark accent / gradient */ --brand-tint: #d6eaf5; /* soft tint / selected fill */ --brand-rgb: 1, 71, 107; /* Accent — Kiteview orange (never a white-text button) */ --accent: #f37c20; /* charts, pins, active marks */ --accent-700: #a04c08; /* accent text on light */ --accent-400: #f69951; /* on-dark accent / gradient */ --accent-tint: #fce8d9; --accent-rgb: 243, 124, 32; /* Status — semantic */ --teal: #0f9d8f; /* success / paid / delivered */ --teal-tint: #d7f2ee; --teal-700: #0b7a70; /* delivered text on tint */ --amber: #f59e0b; /* warning / pending */ --amber-tint: #fef3c7; --danger: #ef4444; /* danger / failed */ --danger-tint:#fee2e2; --info: #0ea5e9; /* info / en-route */ --info-tint: #e0f2fe; --info-700: #0369a1; /* en-route text on tint */ --low: #c2410c; /* low-stock burnt-orange */ --low-tint: #ffedd5; /* On-dark neutrals — navy-tinted greys for the shell */ --on-dark: #c6d5de; /* body text on navy */ --on-dark-2: #9fb8c6; /* muted text on navy */ --on-dark-3: #6a8798; /* dim text on navy */ --dark-line: #0d4560; /* border inside navy panels */ /* Neutrals — slate on cool white */ --bg: #f8f9fb; /* off-white canvas */ --surface: #ffffff; --surface-2: #f8fafc; --line: #e2e8f0; --line-2: #eef2f6; --text: #1e293b; /* slate-800 */ --text-2: #556173; /* slate-500/600 — AA on white (was #64748b, borderline) */ --text-3: #94a3b8; --label: #475569; /* slate-600 — AA-compliant for small-caps labels/headers/captions */ /* Status-pill "planned/neutral" + "returned/orange" fills (documented map in status-pill block) */ --slate-tint: #e6ebf1; --slate-ink: #3f4b5e; /* Type — demo system B: Bricolage display, Sora body, Space Mono numbers */ --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif; --font-body: 'Sora', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Shape & depth — soft slate-tinted elevation */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --sh-1: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --sh-2: 0 4px 12px rgba(15,23,42,.08); --sh-3: 0 12px 30px rgba(15,23,42,.14); --sh-pop: 0 18px 50px rgba(15,23,42,.22); --maxw: 1600px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; letter-spacing: -.02em; line-height: 1.12; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .muted { color: var(--text-2); } .dim { color: var(--text-3); } /* ---- Buttons ------------------------------------------------ */ .btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; border: 1px solid transparent; border-radius: var(--r-sm); padding: 9px 16px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; justify-content: center; transition: .16s ease; background: var(--surface); color: var(--text); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(var(--brand-rgb),.28); } .btn-primary:hover { background: var(--brand-600); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--text-2); } .btn-ghost:hover { border-color: var(--text-3); color: var(--text); } .btn-dark { background: var(--ink-3); color: #fff; } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-block { width: 100%; } .btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn.is-disabled:hover { transform: none; } /* ---- Status pills ------------------------------------------ ONE documented status → colour map (see StatusPill.Map + _StatusPill.cshtml). Emerald = success/active, amber = in-progress/partial, orange = returned, red = failed/blocked, slate = planned/assigned/en-route, grey = idle/off. No generic blue — it is off-brand. All fills meet AA on their text colour. */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--line-2); color: var(--text-2); letter-spacing: .01em; } .pill::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.ok { background: var(--teal-tint); color: #097055; } /* delivered / completed / active */ .pill.late { background: var(--amber-tint); color: #98650f; } /* in-progress / partial */ .pill.fail { background: var(--danger-tint); color: #c5372c; } /* failed / refused / blocked */ .pill.orange { background: var(--low-tint); color: #b34712; } /* returned to depot */ .pill.planned { background: var(--slate-tint); color: var(--slate-ink); } /* planned / assigned / en-route (neutral, NOT blue) */ .pill.route { background: var(--slate-tint); color: var(--slate-ink); } /* legacy alias → neutral slate (was off-brand blue) */ .pill.brand { background: var(--brand-tint); color: var(--brand); } /* released */ .pill.idle { background: var(--line-2); color: var(--slate-ink); } /* unassigned / off / inactive */ /* Source marker — NEUTRAL secondary style, deliberately distinct from status pills (no dot, squared). */ .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--label); } /* ---- Cards & surfaces -------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .card-pad { padding: 20px 22px; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line-2); } .card-head h3 { font-size: 15px; font-weight: 700; } /* ---- Tables ------------------------------------------------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--label); font-weight: 700; padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl th.num { text-align: right; } /* numeric header aligns over its right-aligned column */ .tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .tbl tbody tr { transition: background .12s; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl tr:last-child td { border-bottom: 0; } .tbl .num { text-align: right; font-family: var(--font-mono); } .tbl tbody tr.unassigned { background: #fffbf9; } .tbl tbody tr.unassigned:hover { background: #fff6f0; } .tbl tbody tr.unassigned td:first-child { border-left: 3px solid var(--amber); padding-left: 13px; } /* ---- Utility ------------------------------------------------ */ .row { display: flex; } .col { display: flex; flex-direction: column; } .between { justify-content: space-between; } .center { align-items: center; } .gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px} .wrap { flex-wrap: wrap; } .grow { flex: 1; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff; font-family: var(--font-display); background: linear-gradient(135deg, var(--brand), var(--brand-600)); flex: none; } .avatar.teal { background: linear-gradient(135deg,var(--teal-700),var(--teal)); } .avatar.ink { background: linear-gradient(135deg,var(--ink),var(--ink-3)); } .dot { width:8px;height:8px;border-radius:50%;display:inline-block; } /* scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #d5d8e0; border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #c2c6d1; } /* prototype banner */ .proto-note { position: fixed; bottom: 14px; right: 14px; z-index: 90; background: var(--ink); color: #cbd2e6; font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; box-shadow: var(--sh-3); display: flex; align-items: center; gap: 8px; letter-spacing: .02em; } .proto-note .dot { background: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.2); } /* ============================================================ UI/UX + brand-consistency pass — shared utilities ============================================================ */ /* ---- Monospace numerals (brand rule: ALL numerals are mono) ---- Apply to every count, id, date, time, distance, %, currency, qty and numeric . Font only — alignment stays with the caller (e.g. .tbl .num). */ .num, input.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---- Kiteview POD wordmark (shared _Wordmark.cshtml) ---- "Kiteview" normal weight in the surrounding ink colour, "POD" bold in the accent, with a hair gap so the words never run together. */ .wordmark { font-family: var(--font-display); letter-spacing: -.01em; white-space: nowrap; } .wordmark .wm-zip { font-weight: 600; color: currentColor; } .wordmark .wm-pod { font-weight: 800; color: var(--accent-700); margin-left: .16em; } /* On the navy sidebar and the login card, --accent-700 is far too dark to read; the full orange is what the demo video uses there and it has plenty of contrast on navy. */ .side .wordmark .wm-pod, .login-card .wordmark .wm-pod { color: var(--accent-400); } /* ---- Focus-visible (keyboard operability, AA) ---- */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .btn:focus-visible, .seg button:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible, .driver-pick:focus-visible, .close-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .side .nav-item:focus-visible { outline-color: var(--brand-600); } .form-field input:focus-visible, .form-field select:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* ---- Form controls: the one base style every select / input / textarea gets ---- Wrapped in :where() so it carries zero specificity: any component rule (.form-field input, .filter-bar select, .login-card input, .search input …) still wins without !important. Before this, a control outside .form-field / .filter-bar rendered with the browser's own box, and every select everywhere showed the native arrow. Component rules must set background-COLOR, never the `background` shorthand, or they wipe the select arrow below. */ :where(select, textarea, input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden], [type=submit], [type=button], [type=reset], [type=image])) { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--text); background-color: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 38px; outline: none; margin: 0; transition: border-color .12s ease, box-shadow .12s ease; } :where(select, textarea, input):where(:not([type=checkbox], [type=radio], [type=range])):hover { border-color: var(--text-3); } :where(select, textarea, input):where(:not([type=checkbox], [type=radio], [type=range])):focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); } :where(select, textarea, input):disabled { background-color: var(--surface-2); color: var(--text-3); cursor: not-allowed; } :where(input)::placeholder, :where(textarea)::placeholder { color: var(--text-3); } /* Custom dropdown arrow (slate chevron, --text-2). Multi-row selects keep the native look. */ :where(select:not([multiple], [size])) { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23556173' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px; } /* Dates and times are numbers: mono (brand rule). The picker glyph is muted to match the arrow. */ :where(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Chrome pads the date fields and the glyph, which made a date input 2px taller than a select with the same padding. Zeroed so the two line up in a row. */ :where(input)::-webkit-datetime-edit, :where(input)::-webkit-datetime-edit-fields-wrapper { padding: 0; } :where(input)::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; border-radius: 4px; padding: 0; margin: 0 0 0 6px; width: 16px; height: 16px; } :where(input)::-webkit-calendar-picker-indicator:hover { opacity: .9; background-color: var(--surface-2); } /* A field stacked under its uppercase label: