/* /d/ — Driver portal stylesheet * * Phase 2a scope: * - Mobile-first base layout (single column, 480px max, full- * bleed on phones) * - Login + placeholder home use these primitives * - Periva brand palette (cribbed from app-wide CSS so the * driver portal feels like part of the same product) * * Step-toggle pattern (used by login): * shows #d-form-email, * hides #d-form-code + #d-form-fleet * shows #d-form-code, hides others * shows #d-form-fleet, hides others * JS swaps the class on submit; CSS does the rest. */ :root { /* Brand palette pulled from drivers.css (the operator-side * /drivers/ page); kept identical so the driver portal feels * like the same product, just laid out for mobile. */ --d-brand: #004E51; /* Periva dark teal — primary actions */ --d-brand-dark: #003436; --d-accent: #00C48C; /* Periva green — success / positive */ --d-text: #1a1a1a; --d-text-muted: #555; --d-text-fine: #9FA4B1; --d-bg: #F4F7FF; /* Periva light-grey-2 page background */ --d-card: #ffffff; --d-border: #e3e6ea; --d-error: #d93025; --d-radius: 10px; --d-tap: 48px; /* min mobile tap target */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--d-text); background: var(--d-bg); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .d-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* ===== Header (visible on authenticated screens) ===== */ .d-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--d-border); } .d-header-brand { font-weight: 600; font-size: 17px; color: var(--d-brand); } .d-header-link { font-size: 14px; color: var(--d-text-muted); text-decoration: none; } /* ===== Main column ===== */ .d-main { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 16px 80px; } .d-main-narrow { max-width: 420px; } /* ===== Brand block (login screen) ===== */ .d-brand-block { text-align: center; padding: 28px 0 18px; } .d-brand { font-size: 28px; font-weight: 600; color: var(--d-brand); letter-spacing: -0.5px; } .d-tagline { font-size: 13px; color: var(--d-text-muted); margin-top: 4px; } /* ===== Card ===== */ .d-card { background: var(--d-card); border-radius: var(--d-radius); border: 1px solid var(--d-border); padding: 24px 22px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .d-card-title { font-size: 20px; margin: 0 0 6px; font-weight: 600; } .d-card-body { font-size: 14px; color: var(--d-text-muted); margin: 0 0 18px; line-height: 1.5; } /* ===== Forms ===== */ .d-form { display: flex; flex-direction: column; gap: 14px; } .d-field { display: flex; flex-direction: column; gap: 6px; } .d-field-label { font-size: 13px; color: var(--d-text-muted); font-weight: 500; } .d-field input { font: inherit; font-size: 16px; /* >=16px stops iOS auto-zoom on focus */ padding: 14px; border: 1px solid var(--d-border); border-radius: 8px; min-height: var(--d-tap); background: #fff; color: var(--d-text); } .d-field input:focus { outline: 2px solid var(--d-brand); outline-offset: -1px; border-color: var(--d-brand); } .d-field input::placeholder { color: #aaa; } /* ===== Buttons ===== */ .d-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--d-tap); padding: 12px 18px; border: 0; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.12s ease, opacity 0.12s ease; } .d-btn-primary { background: var(--d-brand); color: #fff; } .d-btn-primary:hover:not(:disabled) { background: var(--d-brand-dark); } .d-btn-secondary { background: #fff; color: var(--d-text); border: 1px solid var(--d-border); } .d-btn-link { background: transparent; color: var(--d-brand); font-weight: 500; min-height: 40px; padding: 6px; } .d-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ===== Form errors ===== */ .d-form-error { color: var(--d-error); font-size: 13px; background: #fdecea; border: 1px solid #f5c6c2; border-radius: 6px; padding: 10px 12px; margin: -4px 0 4px; } /* ===== Auth screen — show/hide steps ===== */ .d-auth #d-form-code, .d-auth #d-form-fleet { display: none; } .d-auth.d-step-email #d-form-email { display: flex; } .d-auth.d-step-code #d-form-email { display: none; } .d-auth.d-step-code #d-form-code { display: flex; } .d-auth.d-step-fleet #d-form-email { display: none; } .d-auth.d-step-fleet #d-form-fleet { display: flex; } /* ===== Fleet picker ===== */ .d-fleet-list { display: flex; flex-direction: column; gap: 10px; } .d-fleet-pick { display: block; width: 100%; background: #fff; border: 1px solid var(--d-border); border-radius: 8px; padding: 14px 16px; font-size: 15px; color: var(--d-text); cursor: pointer; text-align: left; min-height: var(--d-tap); } .d-fleet-pick:hover { background: #f8f9fa; } /* ===== Misc ===== */ .d-fineprint { text-align: center; font-size: 12px; color: var(--d-text-fine); margin: 24px 0 0; } .d-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 14px; margin: 0 0 18px; } .d-meta dt { color: var(--d-text-muted); font-weight: 500; } .d-meta dd { margin: 0; color: var(--d-text); } /* ========================================================= * Phase 2b additions * Driver header (signed-in), bottom-tab nav, vehicle cards, * confirm modal, toggle switch, status pills, skeleton. * ========================================================= */ .d-header-driver { font-size: 13px; color: var(--d-text-muted); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== Navigation ===================================== * * Two presentations of the SAME

rendered once in * _chrome.php's

: * * Mobile (<520px): fixed bottom-tab bar (thumb-friendly, * mobile-app convention). * Desktop (≥520px): inline tabs in the page header. The * fixed-footer pattern reads as a footer on big screens * and the user reported it was easy to miss. * * Default styles here are the MOBILE bottom-tab; the @media * query below switches to inline-header for desktop. * ====================================================== */ .d-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .d-tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--d-border); z-index: 100; /* iOS safe-area: keep the tabs above the home-bar */ padding-bottom: env(safe-area-inset-bottom); } .d-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; gap: 2px; color: var(--d-text-fine); text-decoration: none; font-size: 11px; font-weight: 500; } .d-tab-active { color: var(--d-brand); } .d-tab-icon { width: 22px; height: 22px; display: inline-flex; } .d-tab-icon svg { width: 100%; height: 100%; } /* Bump main padding so content doesn't slide under the * fixed bottom bar on mobile. Reset by the desktop query. */ .d-app[class*="d-page-"] .d-main { padding-bottom: 96px; } @media (min-width: 520px) { .d-header { gap: 18px; padding: 12px 24px; } .d-header-brand { flex-shrink: 0; } .d-header-driver { flex-shrink: 0; max-width: none; } /* Un-fix the nav; it now sits in the header's flex row, * between brand and driver-name, and uses inline pill tabs. */ .d-tabs { position: static; display: flex; gap: 4px; background: transparent; border-top: 0; padding-bottom: 0; margin: 0 auto; /* eat the spare flex space; center the nav */ } .d-tab { flex-direction: row; min-height: 40px; padding: 8px 14px; gap: 8px; font-size: 14px; border-radius: 8px; } .d-tab:hover { background: rgba(0, 78, 81, 0.06); } .d-tab-active { background: rgba(0, 78, 81, 0.10); } .d-tab-icon { width: 18px; height: 18px; } /* No bottom bar = no need for the extra bottom padding. */ .d-app[class*="d-page-"] .d-main { padding-bottom: 32px; } } /* ===== Card variants ===== */ .d-card + .d-card { margin-top: 14px; } .d-card-eyebrow { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--d-text-fine); margin: 0 0 4px; font-weight: 600; } .d-card-title-sm { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .d-card-subtitle { font-size: 13px; color: var(--d-text-muted); margin: 0 0 12px; } .d-card-secondary { background: #fafbfc; } .d-card-loading { min-height: 120px; } /* ===== Skeleton placeholders ===== */ @keyframes d-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .d-skeleton-line { height: 14px; background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%); background-size: 400px 100%; border-radius: 6px; margin: 6px 0; animation: d-shimmer 1.4s linear infinite; } .d-skeleton-line:nth-child(1) { width: 60%; } .d-skeleton-line:nth-child(2) { width: 80%; } .d-skeleton-line:nth-child(3) { width: 40%; } /* ===== Status pills ===== */ .d-pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; margin-bottom: 10px; } .d-pill-on { background: rgba(0, 196, 140, 0.12); color: #00795A; } .d-pill-muted { background: #f0f2f5; color: var(--d-text-muted); } /* ===== Vehicle list ===== */ .d-veh-list[hidden] { display: none; } .d-veh-list:not([hidden]) { display: flex; flex-direction: column; gap: 10px; } .d-veh { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--d-border); border-radius: 10px; padding: 14px 16px; min-height: var(--d-tap); font: inherit; color: var(--d-text); text-align: left; cursor: pointer; transition: background 0.12s ease, transform 0.06s ease; } .d-veh:hover, .d-veh:focus-visible { background: #f8f9fa; } .d-veh:active { transform: scale(0.99); } .d-veh-main { flex: 1; min-width: 0; } .d-veh-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-veh-plate { font-size: 13px; color: var(--d-text-muted); margin-top: 2px; } .d-veh-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; } .d-veh-meta-fresh { font-size: 11px; color: var(--d-text-fine); } .d-veh-meta-pill { background: rgba(0, 78, 81, 0.08); color: var(--d-brand); font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; } /* ===== Modal (confirm-claim) ===== * * IMPORTANT: scope display:flex behind :not([hidden]) so the * `hidden` HTML attribute actually hides the modal. Without the * scoping, `display: flex` here wins over the UA's * `[hidden] { display: none }` and the modal stays visible on * page load even though the markup has `hidden`. Caught on * staging /d/vehicles/ when the picker had no available * vehicles — the confirm popup was floating over the empty- * state card with non-working buttons. Same pattern would * silently break any other [hidden]-toggled element with an * explicit display rule, hence the dedicated comment here. */ .d-modal[hidden] { display: none; } .d-modal:not([hidden]) { position: fixed; inset: 0; background: rgba(20, 24, 32, 0.55); z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: d-fade-in 0.16s ease; } @media (min-width: 520px){ .d-modal { align-items: center; padding: 24px; } } @keyframes d-fade-in { from { opacity: 0; } to { opacity: 1; } } .d-modal-card { background: #fff; border-radius: 14px 14px 0 0; padding: 22px 22px 28px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,0.18); /* iOS safe-area: keep buttons above home-bar */ padding-bottom: calc(28px + env(safe-area-inset-bottom)); } @media (min-width: 520px){ .d-modal-card { border-radius: 14px; padding-bottom: 28px; } } .d-modal-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; } .d-modal-vehicle { font-size: 15px; color: var(--d-text-muted); margin: 0 0 18px; } .d-modal-section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--d-text-muted); margin: 6px 0 8px; } .d-modal-actions { display: flex; gap: 10px; margin-top: 18px; } .d-modal-actions .d-btn { flex: 1; } /* ===== Duration picker (radio "pills") ===== */ .d-duration { display: flex; flex-wrap: wrap; gap: 8px; } .d-duration-opt { flex: 1 1 calc(50% - 4px); min-width: 100px; cursor: pointer; } .d-duration-opt input { position: absolute; opacity: 0; pointer-events: none; } .d-duration-opt span { display: block; text-align: center; padding: 12px 8px; border: 1px solid var(--d-border); border-radius: 8px; font-size: 14px; background: #fff; color: var(--d-text); min-height: var(--d-tap); display: flex; align-items: center; justify-content: center; } .d-duration-opt input:checked + span { border-color: var(--d-brand); background: rgba(0, 78, 81, 0.06); color: var(--d-brand); font-weight: 600; } /* ===== Toggle switch (notification opt-in) ===== */ .d-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; min-height: var(--d-tap); } .d-toggle-label { font-size: 14px; color: var(--d-text); line-height: 1.4; flex: 1; } .d-toggle-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; } .d-toggle-switch input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; } .d-toggle-track { position: absolute; inset: 0; background: #cfd4da; border-radius: 999px; transition: background 0.18s ease; } .d-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .d-toggle-switch input:checked ~ .d-toggle-track { background: var(--d-brand); } .d-toggle-switch input:checked ~ .d-toggle-track::after { transform: translateX(20px); } .d-toggle-switch input:disabled ~ .d-toggle-track { opacity: 0.5; }