Spaces:
Running
Running
| /* DoctorKavach Clinical Theme & Animations */ | |
| :root { | |
| --bg-slate: #F8FAFC; | |
| --navy-dark: #0F172A; | |
| --navy-light: #1E293B; | |
| --trust-green: #16A34A; | |
| --trust-green-light: #DCFCE7; | |
| --alert-amber: #F97316; | |
| --alert-amber-light: #FFEDD5; | |
| --alert-red: #DC2626; | |
| --alert-red-light: #FEE2E2; | |
| --medical-blue: #0284C7; | |
| --medical-blue-light: #E0F2FE; | |
| } | |
| body { | |
| background-color: var(--bg-slate); | |
| color: var(--navy-dark); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #F1F5F9; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #CBD5E1; | |
| border-radius: 9999px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94A3B8; | |
| } | |
| /* Pulse animation for Verified Shield */ | |
| @keyframes shield-pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); | |
| } | |
| } | |
| .shield-pulse { | |
| animation: shield-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); | |
| } | |
| /* Warning pulse */ | |
| @keyframes warning-pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); | |
| } | |
| } | |
| .warning-pulse { | |
| animation: warning-pulse 2.2s infinite; | |
| } | |
| /* Phone Simulator Mockup */ | |
| .phone-mockup { | |
| width: 320px; | |
| min-height: 590px; | |
| background: #020617; | |
| border: 10px solid #1E293B; | |
| border-radius: 44px; | |
| box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .phone-screen { | |
| background: #0F172A; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .phone-notch { | |
| width: 120px; | |
| height: 22px; | |
| background: #1E293B; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-bottom-left-radius: 14px; | |
| border-bottom-right-radius: 14px; | |
| z-index: 30; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .camera-lens { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| background: #0B1120; | |
| border: 1px solid #334155; | |
| } | |
| .speaker-bar { | |
| width: 38px; | |
| height: 3px; | |
| border-radius: 2px; | |
| background: #334155; | |
| } | |
| /* Phone Push Notification slide in */ | |
| @keyframes push-slide-down { | |
| 0% { | |
| transform: translateY(-50px) scale(0.92); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translateY(0) scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .animate-push-slide { | |
| animation: push-slide-down 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| /* Timeline vertical connector */ | |
| .timeline-stem { | |
| position: absolute; | |
| left: 20px; | |
| top: 32px; | |
| bottom: 0; | |
| width: 2px; | |
| background: #E2E8F0; | |
| } | |
| /* Toast notifications */ | |
| #toast-container { | |
| position: fixed; | |
| bottom: 1.5rem; | |
| right: 1.5rem; | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| pointer-events: none; | |
| } | |
| .toast-item { | |
| pointer-events: auto; | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| /* Print optimizations for emergency card */ | |
| @media print { | |
| body * { | |
| visibility: hidden; | |
| } | |
| #offline-card-printable, #offline-card-printable * { | |
| visibility: visible; | |
| } | |
| #offline-card-printable { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| margin: 0; | |
| padding: 20px; | |
| box-shadow: none; | |
| border: 2px solid #0F172A; | |
| } | |
| } | |