/* ═══════════════════════════════════════════════════════════════════════════ JP-SAAS-SHELL v1 · shared design system for JetPatient product surfaces ───────────────────────────────────────────────────────────────────────── Consumed by JetPatient_Passport.html (accent=teal), JetPatient_ClinicPortal_v2.html (accent=indigo), and JetPatient_Guardian.html (accent=green). Each app sets its own --accent / --accent-dk / --accent-soft on :root to tint interactive elements while the rest of the shell (typography, sidebar, topbar, cards, tables) stays identical across the product family. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Base tokens (harmonize with marketing site) ────────────────────────── */ :root { --navy:#0A2D6E; --navy-lt:#0e3b90; --ink:#0f172a; --text:#111827; --muted:#5A6B8C; --muted-2:#94a3b8; --off:#F6F8FC; --surface:#ffffff; --border:#E4E9F2; --border-strong:#d1d9e6; --warn:#f59e0b; --danger:#dc2626; --ok:#10b981; --info:#0ea5e9; --r:10px; --rl:14px; --rxl:20px; --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03); --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04); --shadow-lg: 0 12px 32px rgba(15,23,42,.10); /* Default accent (overridden per-app) */ --accent:#00A89F; --accent-dk:#00857F; --accent-soft:rgba(0,168,159,.10); --accent-ink:#00655f; } /* Per-app accent classes on */ body.jp-accent-passport { --accent:#00A89F; --accent-dk:#00857F; --accent-soft:rgba(0,168,159,.10); --accent-ink:#00655f; } body.jp-accent-clinic { --accent:#4f46e5; --accent-dk:#4338ca; --accent-soft:rgba(79,70,229,.10); --accent-ink:#312e81; } body.jp-accent-guardian { --accent:#047857; --accent-dk:#065f46; --accent-soft:rgba(4,120,87,.10); --accent-ink:#022c22; } /* ── Reset + base typography ────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--off); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 13px; } p { margin: 0; } a { color: var(--accent-dk); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--off); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); } /* ── Root layout: sidebar + main ────────────────────────────────────────── */ .jp-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: #f4f6fb; } .jp-sidebar { background: linear-gradient(182deg, #f7f9fd 0%, #ffffff 38%, #ffffff 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 10; box-shadow: inset -1px 0 0 rgba(10,45,110,.02); } .jp-sidebar-head { padding: 16px 16px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(10,45,110,.035), rgba(10,45,110,0)); } .jp-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; overflow: hidden; flex: 0 0 32px; } /* Wordmark variant — for products that use the full JetPatient brand image instead of the square mark */ .jp-logo.jp-logo-wordmark { width: auto; height: 34px; background: transparent; border-radius: 0; flex: 1 1 auto; display: flex; align-items: center; } .jp-logo.jp-logo-wordmark img { height: 34px; width: auto; display: block; } .jp-brand { display: flex; flex-direction: column; line-height: 1.2; } .jp-brand-a { font-weight: 700; color: var(--ink); font-size: 14px; } .jp-brand-b { font-size: 10.5px; color: var(--accent-ink); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; } .jp-product-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(0,168,159,.22); white-space: nowrap; } .jp-sidebar-body { padding: 12px 10px; flex: 1; overflow-y: auto; } .jp-nav-section { margin-bottom: 18px; } .jp-nav-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); padding: 8px 10px; font-weight: 600; } .jp-nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin: 1px 0; border-radius: 8px; color: #334155; font-weight: 500; font-size: 13.5px; cursor: pointer; transition: all .12s; text-decoration: none; } .jp-nav-link:hover { background: var(--off); color: var(--ink); text-decoration: none; } .jp-nav-link.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .jp-nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.8; } .jp-nav-link .badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; } .jp-sidebar-foot { padding: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .jp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: 0 0 32px; } .jp-user-name { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.1; } .jp-user-role { font-size: 11px; color: var(--muted); line-height: 1.3; } /* ── Top bar ────────────────────────────────────────────────────────────── */ .jp-main { display: flex; flex-direction: column; min-width: 0; background: #f4f6fb; } .jp-topbar { display: flex; align-items: center; gap: 12px; padding: 11px 22px; background: rgba(255,255,255,.88); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 9; box-shadow: 0 1px 0 rgba(10,45,110,.015); } .jp-topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--navy) 0%, var(--accent) 48%, var(--navy) 100%); opacity: .85; } .jp-page-title { font-weight: 600; font-size: 16px; color: var(--ink); margin-right: auto; } .jp-page-subtitle { font-size: 12px; color: var(--muted); margin-right: auto; font-weight: 500; } .jp-search { position: relative; width: 300px; max-width: 30vw; } .jp-search input { width: 100%; padding: 8px 10px 8px 32px; background: var(--off); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; transition: all .15s; color: var(--ink); } .jp-search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); } .jp-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; } .jp-top-btn { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: all .12s; position: relative; } .jp-top-btn:hover { color: var(--ink); border-color: var(--border-strong); } .jp-top-btn svg { width: 16px; height: 16px; stroke-width: 1.8; } .jp-top-btn .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; } /* ── Page containers ────────────────────────────────────────────────────── */ .jp-page { padding: 22px 24px 32px; max-width: 1400px; width: 100%; } .jp-panel { display: none; } .jp-panel.active { display: block; } .jp-page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .jp-page-lede { font-size: 13.5px; color: var(--muted); margin-top: 4px; max-width: 640px; } .jp-hero { background: linear-gradient(135deg, var(--accent-dk), var(--accent)); color: #fff; padding: 22px 26px; border-radius: var(--rl); margin-bottom: 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .jp-hero h1 { color: #fff; } .jp-hero p { color: rgba(255,255,255,.9); margin-top: 4px; font-size: 13.5px; } .jp-hero .hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ── Card / grid ────────────────────────────────────────────────────────── */ .jp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 18px 20px; box-shadow: var(--shadow-sm); } .jp-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; } .jp-card-head h2 { font-size: 15px; } .jp-card-link { font-size: 12px; color: var(--muted); font-weight: 500; } .jp-card-link:hover { color: var(--accent-dk); } .jp-grid { display: grid; gap: 16px; } .jp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jp-grid-a2b1 { grid-template-columns: 2fr 1fr; } .jp-grid-a1b2 { grid-template-columns: 1fr 2fr; } @media (max-width: 980px) { .jp-grid-2, .jp-grid-3, .jp-grid-4, .jp-grid-a2b1, .jp-grid-a1b2 { grid-template-columns: 1fr; } } /* ── KPIs ───────────────────────────────────────────────────────────────── */ .jp-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 18px; box-shadow: var(--shadow-sm); } .jp-kpi .label { font-size: 12px; color: var(--muted); font-weight: 500; } .jp-kpi .value { font-size: 24px; font-weight: 700; color: var(--ink); margin-top: 4px; letter-spacing: -.02em; } .jp-kpi .delta { font-size: 12px; font-weight: 600; margin-top: 4px; } .jp-kpi .delta.up { color: var(--ok); } .jp-kpi .delta.down { color: var(--danger); } .jp-kpi .delta.flat { color: var(--muted); } /* ── Chips / tags / status pills ────────────────────────────────────────── */ .jp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: var(--off); color: #475569; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); } .jp-chip.accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; } .jp-chip.ok { background: rgba(16,185,129,.10); color: #065f46; border-color: transparent; } .jp-chip.warn { background: rgba(245,158,11,.12); color: #92400e; border-color: transparent; } .jp-chip.danger { background: rgba(220,38,38,.10); color: #991b1b; border-color: transparent; } .jp-chip.info { background: rgba(14,165,233,.10); color: #075985; border-color: transparent; } .jp-chip.neutral { background: #f1f5f9; color: #475569; border-color: transparent; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .jp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .12s; background: transparent; color: var(--ink); font-family: inherit; } .jp-btn:hover { text-decoration: none; } .jp-btn svg { width: 14px; height: 14px; stroke-width: 2; } .jp-btn.primary { background: var(--accent); color: #fff; } .jp-btn.primary:hover { background: var(--accent-dk); } .jp-btn.ghost { background: transparent; border-color: var(--border); color: var(--ink); } .jp-btn.ghost:hover { background: var(--off); border-color: var(--border-strong); } .jp-btn.subtle { background: var(--off); color: var(--ink); } .jp-btn.subtle:hover { background: #eceff5; } .jp-btn.danger { background: var(--danger); color: #fff; } .jp-btn.danger:hover { background: #b91c1c; } .jp-btn.hero-primary { background: #fff; color: var(--accent-ink); } .jp-btn.hero-primary:hover { background: rgba(255,255,255,.92); } .jp-btn.hero-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); } .jp-btn.hero-ghost:hover { background: rgba(255,255,255,.24); } .jp-btn.sm { padding: 5px 10px; font-size: 12px; } .jp-btn[disabled] { opacity: .5; cursor: not-allowed; } /* ── Forms ──────────────────────────────────────────────────────────────── */ .jp-field { display: flex; flex-direction: column; gap: 6px; } .jp-field label { font-size: 12px; font-weight: 600; color: #334155; } .jp-input, .jp-select, .jp-textarea { width: 100%; padding: 9px 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; color: var(--ink); outline: none; transition: all .15s; font-family: inherit; } .jp-textarea { resize: vertical; min-height: 88px; } .jp-input:focus, .jp-select:focus, .jp-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .jp-hint { font-size: 11.5px; color: var(--muted); } /* ── Tables ─────────────────────────────────────────────────────────────── */ .jp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .jp-table th { background: var(--off); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); } .jp-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; } .jp-table tr:hover td { background: rgba(15,23,42,.015); } .jp-table tbody tr:last-child td { border-bottom: none; } /* ── List rows (records, messages, activity) ────────────────────────────── */ .jp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; } .jp-row + .jp-row { margin-top: 8px; } .jp-row:hover { border-color: var(--border-strong); } .jp-row-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex: 0 0 36px; } .jp-row-icon svg { width: 18px; height: 18px; stroke-width: 1.8; } .jp-row-body { flex: 1; min-width: 0; } .jp-row-title { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.3; } .jp-row-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .jp-row-actions { display: flex; gap: 6px; } /* ── Timeline / milestones (Pathway, journey) ───────────────────────────── */ .jp-timeline { position: relative; padding-left: 28px; } .jp-timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--border); border-radius: 2px; } .jp-ms { position: relative; padding: 0 0 18px 0; } .jp-ms:last-child { padding-bottom: 0; } .jp-ms::before { content: ""; position: absolute; left: -23px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--border); } .jp-ms.done::before { background: var(--ok); border-color: var(--ok); } .jp-ms.current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .jp-ms-title { font-weight: 600; font-size: 14px; color: var(--ink); } .jp-ms.upcoming .jp-ms-title { color: var(--muted); } .jp-ms-date { font-size: 12px; color: var(--muted); margin-top: 2px; } .jp-ms-body { font-size: 13px; color: #334155; margin-top: 6px; } .jp-ms-subtasks { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; } .jp-ms-subtask { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); } .jp-ms-subtask input { accent-color: var(--accent); } .jp-ms-subtask.done { text-decoration: line-through; color: var(--muted); } /* ── Chat (Navigator, Messages) ─────────────────────────────────────────── */ .jp-chat { display: flex; flex-direction: column; height: calc(100vh - 160px); min-height: 480px; max-height: 820px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; } .jp-chat-log { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .jp-msg { max-width: 76%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-wrap: break-word; } .jp-msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .jp-msg.them { align-self: flex-start; background: var(--off); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .jp-msg-meta { font-size: 11px; color: var(--muted); margin-top: 3px; } .jp-msg.me .jp-msg-meta { color: rgba(255,255,255,.85); text-align: right; } .jp-chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); } .jp-chat-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; outline: none; font-size: 13.5px; font-family: inherit; } .jp-chat-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .jp-chat-suggestions { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; } .jp-suggestion { font-size: 12px; padding: 5px 11px; background: var(--off); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: #334155; } .jp-suggestion:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; } /* ── Modal ──────────────────────────────────────────────────────────────── */ .jp-modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .jp-modal-bg.open { display: flex; } .jp-modal { background: var(--surface); border-radius: var(--rxl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .jp-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .jp-modal-body { padding: 20px 22px; } .jp-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .jp-modal-close { background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 8px; } /* ── Toast ──────────────────────────────────────────────────────────────── */ .jp-toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 200; opacity: 0; transform: translateY(10px); transition: all .25s; pointer-events: none; } .jp-toast.show { opacity: 1; transform: translateY(0); } /* ── Utility ─────────────────────────────────────────────────────────────── */ .jp-mb-0 { margin-bottom: 0 !important; } .jp-mb-4 { margin-bottom: 4px; } .jp-mb-8 { margin-bottom: 8px; } .jp-mb-12 { margin-bottom: 12px; } .jp-mb-16 { margin-bottom: 16px; } .jp-mb-24 { margin-bottom: 24px; } .jp-mt-8 { margin-top: 8px; } .jp-mt-12 { margin-top: 12px; } .jp-mt-16 { margin-top: 16px; } .jp-mt-24 { margin-top: 24px; } .jp-flex { display: flex; } .jp-flex-col { display: flex; flex-direction: column; } .jp-gap-4 { gap: 4px; } .jp-gap-6 { gap: 6px; } .jp-gap-8 { gap: 8px; } .jp-gap-12 { gap: 12px; } .jp-gap-16 { gap: 16px; } .jp-items-center { align-items: center; } .jp-items-start { align-items: flex-start; } .jp-justify-between { justify-content: space-between; } .jp-justify-end { justify-content: flex-end; } .jp-text-muted { color: var(--muted); } .jp-text-sm { font-size: 12px; } .jp-text-strong { font-weight: 600; color: var(--ink); } .jp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jp-wrap { flex-wrap: wrap; } .jp-hide { display: none !important; } .jp-progress { height: 6px; background: var(--off); border-radius: 999px; overflow: hidden; } .jp-progress-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s; } /* ── Mobile nav (hamburger) ─────────────────────────────────────────────── */ .jp-mobile-trigger { display: none; width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; place-items: center; cursor: pointer; } @media (max-width: 860px) { .jp-app { grid-template-columns: 1fr; } .jp-sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; transform: translateX(-100%); transition: transform .22s; box-shadow: var(--shadow-lg); } .jp-sidebar.open { transform: translateX(0); } .jp-mobile-trigger { display: grid; } .jp-page { padding: 18px; } .jp-search { width: 140px; } .jp-page-title { font-size: 14px; } }