/* Binfinity Shared Design System (Apple-Inspired Architecture) Single source of truth for design tokens, typography, surfaces, micro-interactions, and WCAG AA accessibility standards across: - index.html (Sign In / Auth) - dashboard.html (Operations & Hauler Hub) - driver.html (Mobile Driver PWA) - client.html (Customer Self-Service Portal) - admin.html (Master Admin HQ) Dark mode is driven by the `.dark` class on (Tailwind darkMode: 'class') and synchronized with native browser color-scheme. */ /* ===== 1. Tokens & Color-Scheme ===== */ :root { --primary-color: #10b981; --secondary-color: #18181b; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace; color-scheme: light dark; accent-color: var(--primary-color); } /* ===== 2. Apple Ambient Canvas & Typography ===== */ body { font-family: var(--font-sans); color: #18181b; background-color: #f6f7fb; background-image: radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 45%), radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.08) 0px, transparent 45%), radial-gradient(at 50% 100%, rgba(139, 92, 246, 0.05) 0px, transparent 50%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .dark body, html.dark body { color: #f4f4f5; background-color: #07080c !important; background-image: radial-gradient(ellipse at 12% 8%, rgba(16, 185, 129, 0.16) 0px, transparent 45%), radial-gradient(ellipse at 88% 12%, rgba(59, 130, 246, 0.14) 0px, transparent 45%), radial-gradient(ellipse at 45% 85%, rgba(139, 92, 246, 0.10) 0px, transparent 45%), radial-gradient(ellipse at 85% 90%, rgba(16, 185, 129, 0.08) 0px, transparent 35%) !important; background-attachment: fixed !important; } .font-mono-tech { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } /* ===== 3. Apple Adaptive Scrollbars ===== */ * { scrollbar-width: thin; scrollbar-color: rgba(160, 160, 160, 0.35) transparent; } .dark * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } @supports not (scrollbar-color: auto) { ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(160, 160, 160, 0.35); border-radius: 9999px; } .dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); } } /* Hide scrollbars cleanly when required */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ===== 4. WCAG AA Focus Indicators ===== */ :focus-visible { outline: 2px solid var(--primary-color) !important; outline-offset: 2px !important; } /* ===== 5. Dynamic Brand Tokens ===== */ .bg-brand-primary { background-color: var(--primary-color) !important; } .text-brand-primary { color: var(--primary-color) !important; } .border-brand-primary { border-color: var(--primary-color) !important; } .ring-brand-primary { --tw-ring-color: var(--primary-color) !important; } .bg-emerald-600 { background-color: var(--primary-color) !important; } .hover\:bg-emerald-500:hover { background-color: var(--primary-color) !important; opacity: 0.92; } /* ===== 6. Apple Glassmorphism & Surface Utilities ===== */ .glass-nav { background-color: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.04), 0 4px 20px -2px rgba(0, 0, 0, 0.03) !important; } .dark .glass-nav { background-color: rgba(10, 11, 16, 0.70) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.06), 0 8px 32px 0 rgba(0, 0, 0, 0.45) !important; } .glass-panel { background-color: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.85), 0 8px 30px rgba(0, 0, 0, 0.06) !important; } .dark .glass-panel { background-color: rgba(16, 18, 26, 0.70) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important; backdrop-filter: blur(24px) saturate(190%) !important; -webkit-backdrop-filter: blur(24px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16), 0 16px 40px -4px rgba(0, 0, 0, 0.7) !important; } /* Translucent Frosted Glass Sidebar */ #mainSidebar { background-color: rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-right: 1px solid rgba(0, 0, 0, 0.06) !important; } .dark #mainSidebar { background-color: rgba(10, 11, 16, 0.68) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.04) !important; } /* ===== 7. Authentic Apple Liquid Glass Cards & Material Surfaces ===== */ .glass-card, .apple-card, .card, .bg-white.dark\:bg-zinc-900 { background-color: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important; border-radius: 1.25rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .dark .glass-card, .dark .apple-card, .dark .card, .dark .bg-white.dark\:bg-zinc-900 { background-color: rgba(18, 20, 28, 0.65) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%) !important; backdrop-filter: blur(24px) saturate(190%) !important; -webkit-backdrop-filter: blur(24px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), 0 16px 36px -4px rgba(0, 0, 0, 0.65) !important; border-radius: 1.25rem; } .glass-card:hover, .apple-card:hover, .bg-white.dark\:bg-zinc-900:hover { border-color: rgba(255, 255, 255, 0.9) !important; } .dark .glass-card:hover, .dark .apple-card:hover, .dark .bg-white.dark\:bg-zinc-900:hover { border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), 0 20px 44px -4px rgba(0, 0, 0, 0.75) !important; } /* ===== 8. Apple Buttons & Micro-Interactions ===== */ .btn-primary { background-color: var(--primary-color, #059669); color: #ffffff; font-weight: 700; font-size: 0.75rem; line-height: 1rem; padding: 0.625rem 1.125rem; border-radius: 0.625rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04); display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; white-space: nowrap; cursor: pointer; border: none; transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, background-color 0.15s ease; user-select: none; } .btn-primary:hover { opacity: 0.94; } .btn-primary:active { transform: scale(0.98); } .dark .btn-primary { color: #09090b; } .btn-outline { background-color: transparent; border: 1px solid #d4d4d8; color: #3f3f46; font-size: 0.75rem; font-weight: 600; padding: 0.5rem 0.875rem; border-radius: 0.625rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; } .btn-outline:hover { background-color: rgba(0, 0, 0, 0.03); color: #18181b; border-color: #a1a1aa; } .btn-outline:active { transform: scale(0.98); } .dark .btn-outline { border-color: #3f3f46; color: #d4d4d8; } .dark .btn-outline:hover { background-color: rgba(255, 255, 255, 0.04); color: #ffffff; border-color: #71717a; } /* Touch targets for mobile / glove use */ .glove-touch { min-height: 48px; touch-action: manipulation; } /* ===== 9. WCAG AA Status Badges ===== */ .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-width: 1px; border-style: solid; white-space: nowrap; } .badge-emerald { background-color: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .dark .badge-emerald { background-color: rgba(6, 78, 59, 0.35); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); } .badge-amber { background-color: #fffbeb; color: #92400e; border-color: #fde68a; } .dark .badge-amber { background-color: rgba(120, 53, 15, 0.35); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); } .badge-rose { background-color: #fff1f2; color: #9f1239; border-color: #fecdd3; } .dark .badge-rose { background-color: rgba(136, 19, 55, 0.35); color: #fda4af; border-color: rgba(244, 63, 94, 0.3); } .badge-sky { background-color: #f0f9ff; color: #075985; border-color: #bae6fd; } .dark .badge-sky { background-color: rgba(12, 74, 110, 0.35); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.3); } .badge-zinc { background-color: #f4f4f5; color: #3f3f46; border-color: #e4e4e7; } .dark .badge-zinc { background-color: rgba(39, 39, 42, 0.5); color: #d4d4d8; border-color: rgba(63, 63, 70, 0.4); } .badge-purple { background-color: #faf5ff; color: #6b21a8; border-color: #e9d5ff; } .dark .badge-purple { background-color: rgba(88, 28, 135, 0.35); color: #d8b4fe; border-color: rgba(168, 85, 247, 0.3); } .badge-indigo { background-color: #eef2ff; color: #3730a3; border-color: #c7d2fe; } .dark .badge-indigo { background-color: rgba(49, 46, 129, 0.35); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.3); } /* ===== 10. Table Styling ===== */ .table-head { background-color: #fafafa; color: #52525b; font-size: 0.725rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .dark .table-head { background-color: rgba(9, 9, 11, 0.75); color: #a1a1aa; } /* ===== 11. Form Inputs ===== */ .form-input { width: 100%; padding: 0.5625rem 0.875rem; background-color: #fafafa; border: 1px solid #d4d4d8; border-radius: 0.625rem; font-size: 0.875rem; color: #18181b; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .form-input:focus { outline: none; background-color: #ffffff; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); } .dark .form-input { background-color: #09090b; border-color: #27272a; color: #f4f4f5; } .dark .form-input:focus { background-color: #121215; border-color: var(--primary-color); } /* ===== 12. Apple-Style Modals ===== */ .modal-overlay { position: fixed; inset: 0; background-color: rgba(9, 9, 11, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; } .dark .modal-overlay { background-color: rgba(0, 0, 0, 0.75); } .modal-box { background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 1.25rem; width: 100%; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04); } .dark .modal-box { background-color: #18181b; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04); } .modal-header { border-bottom: 1px solid #e4e4e7; padding-bottom: 0.75rem; margin-bottom: 1rem; } .dark .modal-header { border-color: #27272a; } .modal-footer { border-top: 1px solid #e4e4e7; padding-top: 0.75rem; margin-top: 1.25rem; display: flex; justify-content: flex-end; gap: 0.625rem; } .dark .modal-footer { border-color: #27272a; } /* ===== 13. Apple Floating Feedback Toast ===== */ .apple-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.125rem; background-color: rgba(9, 9, 11, 0.94); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(80px); opacity: 0; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .dark .apple-toast { background-color: rgba(24, 24, 27, 0.95); border-color: rgba(255, 255, 255, 0.16); } .apple-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } /* ===== 14. Reduced Motion Support ===== */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== 15. Leaflet Map Dark Basemap (Watermark-Free) ===== */ .dark .leaflet-tile-pane:not(.leaflet-tiles-native) { filter: brightness(0.6) invert(1) contrast(1.7) hue-rotate(190deg) saturate(0.35) brightness(0.85); } /* ===== 16. Leaflet Road Tooltips & Route Badges ===== */ .leaflet-tooltip { background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; color: #09090b !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important; padding: 4px 8px !important; } .dark .leaflet-tooltip { background: rgba(24, 24, 27, 0.92) !important; color: #f4f4f5 !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important; } .leaflet-tooltip::before { display: none !important; } /* ===== 17. Fullscreen Map Overlays ===== */ #dispatchMapWrapper.dispatch-map-fullscreen { position: fixed !important; inset: 0 !important; z-index: 9999 !important; border-radius: 0 !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; } #dispatchMapWrapper.dispatch-map-fullscreen #dispatchMap { height: calc(100vh - 52px) !important; } #overviewDispatchCard.overview-map-fullscreen { position: fixed !important; inset: 0 !important; z-index: 9999 !important; border-radius: 0 !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; } #overviewDispatchCard.overview-map-fullscreen #overviewMapWrapper { min-height: calc(100vh - 52px) !important; } /* ===== 18. Sidebar Pin (Frozen-Open State) ===== */ /* When pinned, the sidebar stays wide without needing a hover */ #mainSidebar.sidebar-pinned { width: 16rem !important; /* w-64 */ } /* Every group-hover:* label inside becomes permanently visible when pinned */ #mainSidebar.sidebar-pinned .group-hover\:block, #mainSidebar.sidebar-pinned .group-hover\:justify-start { display: block !important; opacity: 1 !important; } #mainSidebar.sidebar-pinned .group-hover\:justify-start { display: flex !important; justify-content: flex-start !important; } /* Main content shifts right when sidebar is pinned */ main.sidebar-pinned-main { margin-left: 16rem !important; /* ml-64 */ }