Spaces:
Running
Running
| /* ======================================== | |
| Diabetes Health Predictor - AI Doctor Portal | |
| Hospital-Style CSS Theme | |
| ======================================== */ | |
| /* ======================================== | |
| ROOT VARIABLES & RESET | |
| ======================================== */ | |
| :root { | |
| /* Medical Theme Colors */ | |
| --primary-color: #2563eb; /* Teal/Cyan */ | |
| --primary-dark: #1d4ed8; | |
| --primary-light: #22d3ee; | |
| --secondary-color: #3b82f6; /* Soft Blue */ | |
| --success-color: #10b981; /* Green */ | |
| --danger-color: #ef4444; /* Red */ | |
| --warning-color: #f59e0b; /* Orange */ | |
| /* Neutrals */ | |
| --white: #ffffff; | |
| --light-bg: #f0f9ff; /* Light blue tint */ | |
| --card-bg: #ffffff; | |
| --text-dark: #1e293b; | |
| --text-gray: #64748b; | |
| --border-color: #e2e8f0; | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); | |
| /* Typography */ | |
| --font-family: 'Inter', 'Poppins', sans-serif, sans-serif; | |
| --font-size-base: 16px; | |
| /* Spacing */ | |
| --spacing-xs: 0.5rem; | |
| --spacing-sm: 1rem; | |
| --spacing-md: 1.5rem; | |
| --spacing-lg: 2rem; | |
| --spacing-xl: 3rem; | |
| /* Border Radius */ | |
| --radius-sm: 6px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| /* Transitions */ | |
| --transition-fast: 0.2s ease; | |
| --transition-normal: 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-family); | |
| font-size: var(--font-size-base); | |
| line-height: 1.6; | |
| color: var(--text-dark); | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| min-height: 100vh; | |
| } | |
| /* ======================================== | |
| NAVBAR | |
| ======================================== */ | |
| .navbar { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| color: var(--white); | |
| padding: var(--spacing-md) 0; | |
| box-shadow: var(--shadow-lg); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .navbar .container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .nav-brand i { | |
| font-size: 2rem; | |
| animation: pulse 2s infinite; | |
| } | |
| .dashboard-link { | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| padding: 10px 20px; | |
| border-radius: 25px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .dashboard-link:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .dashboard-link i { | |
| font-size: 1.1rem; | |
| } | |
| .nav-subtitle { | |
| font-size: 0.9rem; | |
| font-weight: 300; | |
| opacity: 0.95; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| /* ======================================== | |
| CONTAINER & LAYOUT | |
| ======================================== */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 var(--spacing-md); | |
| } | |
| .main-container { | |
| padding: var(--spacing-xl) 0; | |
| min-height: calc(100vh - 200px); | |
| } | |
| /* ======================================== | |
| HEADER SECTION | |
| ======================================== */ | |
| .header-section { | |
| text-align: center; | |
| margin-bottom: var(--spacing-xl); | |
| position: relative; | |
| } | |
| /* Animated Logo Container */ | |
| .logo-container { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: var(--spacing-lg); | |
| position: relative; | |
| } | |
| .logo-circle { | |
| position: relative; | |
| width: 120px; | |
| height: 120px; | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 10px 30px rgba(8, 145, 178, 0.3); | |
| animation: float 3s ease-in-out infinite; | |
| z-index: 10; | |
| } | |
| .logo-icon { | |
| font-size: 3.5rem; | |
| color: var(--white); | |
| animation: heartbeat 1.5s infinite; | |
| z-index: 11; | |
| } | |
| /* Pulse Rings Animation */ | |
| .pulse-ring, | |
| .pulse-ring-2 { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border: 3px solid var(--primary-color); | |
| border-radius: 50%; | |
| animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; | |
| } | |
| .pulse-ring-2 { | |
| animation-delay: 1s; | |
| } | |
| @keyframes pulse-ring { | |
| 0% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1.8); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-15px); | |
| } | |
| } | |
| @keyframes heartbeat { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 10%, 30% { | |
| transform: scale(1.15); | |
| } | |
| 20%, 40% { | |
| transform: scale(1); | |
| } | |
| } | |
| .header-section h1 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: var(--spacing-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--primary-color) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradient-shift 3s ease infinite; | |
| background-size: 200% auto; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, 100% { | |
| background-position: 0% center; | |
| } | |
| 50% { | |
| background-position: 100% center; | |
| } | |
| } | |
| .subtitle { | |
| font-size: 1.1rem; | |
| color: var(--text-gray); | |
| font-weight: 400; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .subtitle i { | |
| color: var(--primary-color); | |
| font-size: 1rem; | |
| } | |
| .developer-badge { | |
| display: inline-block; | |
| margin-top: var(--spacing-md); | |
| padding: 0.5rem 1.5rem; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| border: 2px solid var(--primary-color); | |
| border-radius: 50px; | |
| color: var(--primary-dark); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| box-shadow: var(--shadow-sm); | |
| animation: badge-glow 2s ease-in-out infinite; | |
| } | |
| .developer-badge i { | |
| color: var(--primary-color); | |
| margin-right: 0.5rem; | |
| } | |
| @keyframes badge-glow { | |
| 0%, 100% { | |
| box-shadow: 0 0 5px rgba(8, 145, 178, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(8, 145, 178, 0.6); | |
| } | |
| } | |
| /* ======================================== | |
| CARDS | |
| ======================================== */ | |
| .card { | |
| background: var(--card-bg); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| margin-bottom: var(--spacing-lg); | |
| overflow: hidden; | |
| transition: transform var(--transition-normal), box-shadow var(--transition-normal); | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .card-header { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); | |
| color: var(--white); | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .card-header h2 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .card-header i { | |
| font-size: 1.8rem; | |
| } | |
| .card-body { | |
| padding: var(--spacing-lg); | |
| } | |
| /* ======================================== | |
| FORMS | |
| ======================================== */ | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .form-group.full-width { | |
| grid-column: 1 / -1; | |
| } | |
| .form-group label { | |
| font-weight: 500; | |
| color: var(--text-dark); | |
| margin-bottom: var(--spacing-xs); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .form-group label i { | |
| color: var(--primary-color); | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| padding: 0.75rem 1rem; | |
| border: 2px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| font-family: var(--font-family); | |
| font-size: 1rem; | |
| transition: border-color var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1); | |
| } | |
| .form-group small { | |
| font-size: 0.85rem; | |
| color: var(--text-gray); | |
| margin-top: 0.25rem; | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| /* ======================================== | |
| BUTTONS | |
| ======================================== */ | |
| .button-group { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-top: var(--spacing-md); | |
| } | |
| .btn { | |
| padding: 0.875rem 2rem; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-family); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: all var(--transition-fast); | |
| text-decoration: none; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| color: var(--white); | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); | |
| } | |
| .btn-success { | |
| background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%); | |
| color: var(--white); | |
| } | |
| .btn-success:hover { | |
| background: linear-gradient(135deg, #059669 0%, var(--success-color) 100%); | |
| } | |
| .btn-secondary { | |
| background: var(--white); | |
| color: var(--text-dark); | |
| border: 2px solid var(--border-color); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--light-bg); | |
| border-color: var(--primary-color); | |
| } | |
| .btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none ; | |
| } | |
| /* ======================================== | |
| RESULTS SECTION | |
| ======================================== */ | |
| .result-container { | |
| text-align: center; | |
| } | |
| .result-badge { | |
| display: inline-block; | |
| padding: var(--spacing-md) var(--spacing-xl); | |
| border-radius: var(--radius-lg); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: var(--spacing-md); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .result-badge.high-risk { | |
| background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); | |
| color: var(--danger-color); | |
| border: 2px solid var(--danger-color); | |
| } | |
| .result-badge.low-risk { | |
| background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); | |
| color: var(--success-color); | |
| border: 2px solid var(--success-color); | |
| } | |
| .result-details { | |
| background: var(--light-bg); | |
| padding: var(--spacing-lg); | |
| border-radius: var(--radius-md); | |
| margin: var(--spacing-md) 0; | |
| } | |
| .result-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: var(--spacing-sm) 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .result-row:last-child { | |
| border-bottom: none; | |
| } | |
| .result-row strong { | |
| color: var(--text-dark); | |
| } | |
| .confidence-badge { | |
| background: var(--primary-color); | |
| color: var(--white); | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| display: inline-block; | |
| margin: var(--spacing-sm) 0; | |
| } | |
| .recommendation { | |
| background: #fef3c7; | |
| border-left: 4px solid var(--warning-color); | |
| padding: var(--spacing-md); | |
| border-radius: var(--radius-sm); | |
| margin-top: var(--spacing-md); | |
| font-weight: 500; | |
| } | |
| .comparison-section { | |
| margin-top: var(--spacing-lg); | |
| padding-top: var(--spacing-lg); | |
| border-top: 1px solid var(--border-color); | |
| text-align: left; | |
| } | |
| .comparison-section h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .comparison-subtitle { | |
| color: var(--text-gray); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .comparison-controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| background: var(--light-bg); | |
| padding: var(--spacing-md); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| } | |
| .comparison-controls select { | |
| width: 100%; | |
| min-height: 180px; | |
| padding: 0.75rem; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-color); | |
| font-family: var(--font-family); | |
| font-size: 0.95rem; | |
| background: var(--white); | |
| } | |
| .comparison-hint { | |
| font-size: 0.85rem; | |
| color: var(--text-gray); | |
| } | |
| .comparison-status { | |
| min-height: 1.2rem; | |
| font-size: 0.9rem; | |
| color: var(--text-gray); | |
| } | |
| .graph-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: var(--spacing-md); | |
| margin-top: var(--spacing-lg); | |
| } | |
| .graph-card { | |
| background: var(--card-bg); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| padding: var(--spacing-md); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .graph-card h4 { | |
| margin-bottom: 0.75rem; | |
| color: var(--text-dark); | |
| } | |
| .graph-card img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-color); | |
| background: var(--white); | |
| } | |
| .explanation-card { | |
| margin-top: var(--spacing-lg); | |
| background: linear-gradient(135deg, #e0f2fe 0%, #e7f5ff 100%); | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| border: 1px solid var(--primary-light); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .explanation-card h4 { | |
| margin-bottom: 0.75rem; | |
| color: var(--primary-dark); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .explanation-text { | |
| color: var(--text-dark); | |
| line-height: 1.7; | |
| white-space: pre-line; | |
| } | |
| /* ======================================== | |
| PATIENT SUMMARY | |
| ======================================== */ | |
| .patient-summary { | |
| background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); | |
| border: 2px solid var(--primary-color); | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .patient-summary h3 { | |
| color: var(--primary-dark); | |
| margin-bottom: var(--spacing-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .patient-summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--spacing-sm); | |
| } | |
| .patient-summary-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.5rem; | |
| background: var(--white); | |
| border-radius: var(--radius-sm); | |
| } | |
| .patient-summary-item strong { | |
| color: var(--text-dark); | |
| } | |
| /* ======================================== | |
| MODAL | |
| ======================================== */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 2000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.7); | |
| animation: fadeIn var(--transition-fast); | |
| } | |
| .modal.show { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .modal-content { | |
| background: var(--white); | |
| border-radius: var(--radius-lg); | |
| width: 90%; | |
| max-width: 800px; | |
| max-height: 90vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| animation: slideUp 0.3s ease; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| } | |
| .modal-tab-bar { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: var(--spacing-md); | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 0.5rem; | |
| } | |
| .modal-tab { | |
| background: rgba(59, 130, 246, 0.12); | |
| border: none; | |
| border-radius: 999px; | |
| padding: 0.5rem 1.25rem; | |
| font-weight: 600; | |
| color: var(--primary-dark); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .modal-tab:hover { | |
| background: rgba(59, 130, 246, 0.2); | |
| } | |
| .modal-tab.active { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| color: var(--white); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .comparison-heading { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .modal-header { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| color: var(--white); | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .modal-header h2 { | |
| font-size: 1.5rem; | |
| margin: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .close { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--white); | |
| cursor: pointer; | |
| transition: transform var(--transition-fast); | |
| } | |
| .close:hover { | |
| transform: scale(1.2); | |
| } | |
| .modal-body { | |
| padding: var(--spacing-lg); | |
| overflow-y: auto; | |
| flex: 1; | |
| } | |
| .modal-footer { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| justify-content: flex-end; | |
| } | |
| .report-content { | |
| font-family: 'Courier New', monospace; | |
| white-space: pre-wrap; | |
| background: var(--light-bg); | |
| padding: var(--spacing-md); | |
| border-radius: var(--radius-sm); | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| color: var(--text-dark); | |
| } | |
| /* ======================================== | |
| LOADING STATES | |
| ======================================== */ | |
| .loading-overlay { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.95); | |
| z-index: 3000; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| } | |
| .loading-overlay.show { | |
| display: flex; | |
| } | |
| .spinner { | |
| border: 4px solid var(--border-color); | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 60px; | |
| height: 60px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: var(--spacing-xl); | |
| } | |
| .loading i { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .loading p { | |
| font-size: 1.1rem; | |
| color: var(--text-gray); | |
| } | |
| /* ======================================== | |
| ANIMATIONS | |
| ======================================== */ | |
| .fade-in { | |
| animation: fadeInUp 0.6s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ======================================== | |
| FOOTER | |
| ======================================== */ | |
| .footer { | |
| background: linear-gradient(135deg, var(--text-dark) 0%, #334155 100%); | |
| color: var(--white); | |
| text-align: center; | |
| padding: var(--spacing-lg) 0; | |
| margin-top: var(--spacing-xl); | |
| } | |
| .footer p { | |
| margin: 0.25rem 0; | |
| opacity: 0.9; | |
| } | |
| /* ======================================== | |
| RESPONSIVE DESIGN - MOBILE FIRST | |
| ======================================== */ | |
| /* Tablet and below (768px) */ | |
| @media (max-width: 768px) { | |
| /* Typography scaling */ | |
| .header-section h1 { | |
| font-size: 1.8rem; | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .nav-brand { | |
| font-size: 1.2rem; | |
| } | |
| .nav-subtitle { | |
| font-size: 0.8rem; | |
| } | |
| .card-header h2 { | |
| font-size: 1.3rem; | |
| } | |
| /* Layout adjustments */ | |
| .form-grid { | |
| grid-template-columns: 1fr ; | |
| gap: var(--spacing-md); | |
| } | |
| .button-group { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| min-height: 44px; /* Touch target size */ | |
| } | |
| /* Modal optimizations */ | |
| .modal-content { | |
| width: 95%; | |
| max-width: 95vw; | |
| margin: var(--spacing-sm); | |
| padding: var(--spacing-md); | |
| } | |
| /* Result displays */ | |
| .result-row { | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .result-card { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| /* Navigation */ | |
| .nav-links { | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| width: 100%; | |
| } | |
| .nav-links .btn { | |
| width: 100%; | |
| } | |
| /* Tables - responsive card view */ | |
| .table-container { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| table { | |
| display: block; | |
| width: 100%; | |
| } | |
| thead { | |
| display: none; | |
| } | |
| tbody { | |
| display: block; | |
| } | |
| tr { | |
| display: block; | |
| margin-bottom: var(--spacing-md); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-sm); | |
| } | |
| td { | |
| display: block; | |
| text-align: right; | |
| padding: 0.5rem ; | |
| border: none; | |
| position: relative; | |
| padding-left: 50% ; | |
| } | |
| td:before { | |
| content: attr(data-label); | |
| position: absolute; | |
| left: 0.5rem; | |
| width: 45%; | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-color); | |
| } | |
| /* Cards spacing */ | |
| .card { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| /* Form inputs */ | |
| .form-group { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| input, select, textarea { | |
| font-size: 16px; /* Prevent zoom on iOS */ | |
| } | |
| } | |
| /* Mobile phones (480px and below) */ | |
| @media (max-width: 480px) { | |
| :root { | |
| --font-size-base: 14px; | |
| --spacing-xs: 0.25rem; | |
| --spacing-sm: 0.5rem; | |
| --spacing-md: 0.75rem; | |
| --spacing-lg: 1rem; | |
| --spacing-xl: 1.5rem; | |
| } | |
| .header-section h1 { | |
| font-size: 1.5rem; | |
| } | |
| .card { | |
| padding: var(--spacing-md); | |
| } | |
| .card-header h2 { | |
| font-size: 1.2rem; | |
| } | |
| /* Ensure touch targets are large enough */ | |
| button, .btn, a.btn, input[type="submit"] { | |
| min-height: 44px; | |
| min-width: 44px; | |
| padding: 0.75rem 1rem; | |
| } | |
| /* Input fields for better mobile UX */ | |
| input, select, textarea { | |
| font-size: 16px ; /* Prevent iOS zoom */ | |
| min-height: 44px; | |
| padding: 0.75rem; | |
| } | |
| /* Tighter spacing */ | |
| .form-grid { | |
| gap: var(--spacing-sm); | |
| } | |
| .modal-content { | |
| width: 100%; | |
| max-width: 100vw; | |
| margin: 0; | |
| border-radius: 0; | |
| min-height: 100vh; | |
| } | |
| } | |
| /* Larger tablets (1024px and up) */ | |
| @media (min-width: 1024px) { | |
| .form-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| } | |
| } | |
| /* Desktop (1280px and up) */ | |
| @media (min-width: 1280px) { | |
| .form-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .container { | |
| max-width: 1400px; | |
| } | |
| } | |
| /* Touch device optimizations */ | |
| @media (hover: none) and (pointer: coarse) { | |
| /* Larger tap targets for touch */ | |
| .btn, button, a, input, select { | |
| min-height: 48px; | |
| min-width: 48px; | |
| } | |
| /* Remove hover effects on touch devices */ | |
| .btn:hover, button:hover, a:hover { | |
| transform: none; | |
| } | |
| /* Add active state instead */ | |
| .btn:active, button:active { | |
| transform: scale(0.98); | |
| opacity: 0.8; | |
| } | |
| } | |
| /* Print styles for medical reports */ | |
| @media print { | |
| .nav-section, .button-group, .modal-close, footer { | |
| display: none ; | |
| } | |
| .card { | |
| page-break-inside: avoid; | |
| box-shadow: none; | |
| border: 1px solid #ddd; | |
| } | |
| body { | |
| background: white; | |
| } | |
| .container { | |
| max-width: 100%; | |
| } | |
| } | |
| /* ======================================== | |
| UTILITY CLASSES | |
| ======================================== */ | |
| .text-center { | |
| text-align: center; | |
| } | |
| .mt-1 { margin-top: var(--spacing-sm); } | |
| .mt-2 { margin-top: var(--spacing-md); } | |
| .mt-3 { margin-top: var(--spacing-lg); } | |
| .mb-1 { margin-bottom: var(--spacing-sm); } | |
| .mb-2 { margin-bottom: var(--spacing-md); } | |
| .mb-3 { margin-bottom: var(--spacing-lg); } | |
| .hidden { | |
| display: none ; | |
| } | |
| .visible { | |
| display: block ; | |
| } | |
| /* ======================================== | |
| DEVELOPER CREDIT (FOOTER) | |
| ======================================== */ | |
| .developer-credit { | |
| margin-top: var(--spacing-md); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); | |
| border-top: 2px solid var(--primary-color); | |
| border-radius: var(--radius-sm); | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| color: var(--primary-dark); | |
| display: inline-block; | |
| } | |
| .developer-credit i { | |
| color: var(--primary-color); | |
| margin-right: 0.5rem; | |
| animation: code-blink 2s ease-in-out infinite; | |
| } | |
| @keyframes code-blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |