Personal Injury Calculator
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
background-color: #f0f4f8;
color: #2d3748;
line-height: 1.6;
padding: 20px;
}
a {
text-decoration: none;
color: inherit;
}
button {
outline: none;
}
/* Container */
#injury-calculator {
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
overflow: hidden;
transition: all 0.3s ease;
}
/* Header with Logo */
.calculator-header {
background: #2c5282;
padding: 20px;
text-align: center;
}
.calculator-header img {
max-width: 150px;
height: auto;
}
/* Step Progress Bar */
.step-progress {
display: flex;
justify-content: space-between;
padding: 20px;
background: #f7fafc;
position: relative;
}
.step {
flex: 1;
text-align: center;
position: relative;
}
.step:not(:last-child)::after {
content: ”;
position: absolute;
top: 15px;
right: 0;
width: 100%;
height: 2px;
background: #e2e8f0;
z-index: -1;
}
.step.active .step-circle {
background: #2c5282;
color: white;
}
.step.completed .step-circle {
background: #48bb78;
color: white;
}
.step-circle {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #e2e8f0;
color: #718096;
margin: 0 auto 10px;
transition: background 0.3s, color 0.3s;
}
.step-text {
font-weight: bold;
color: #718096;
transition: color 0.3s;
font-size: 14px;
}
.step.active .step-text {
color: #2c5282;
}
.step.completed .step-text {
color: #48bb78;
}
/* Sections */
.section {
padding: 30px;
display: none;
animation: fadeIn 0.5s ease-in-out;
}
.section.active {
display: block;
}
/* Headings */
.section h2 {
color: #2c5282;
font-size: 24px;
margin-bottom: 20px;
border-bottom: 2px solid #2c5282;
padding-bottom: 10px;
}
/* Informative Explanation */
.explanation {
margin-bottom: 25px;
font-size: 16px;
color: #4a5568;
line-height: 1.5;
}
/* Form Elements */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #2c5282;
font-size: 16px;
}
.form-group input[type=”number”],
.form-group input[type=”range”] {
width: 100%;
padding: 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-group input[type=”number”]:focus,
.form-group input[type=”range”]:focus {
border-color: #2c5282;
}
.form-group .helper-text {
font-size: 14px;
color: #718096;
margin-top: 5px;
}
/* Slider Labels */
.slider-labels {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #718096;
margin-top: 10px;
}
.slider-value {
text-align: center;
font-size: 20px;
font-weight: bold;
color: #2c5282;
margin-top: 10px;
}
/* Buttons */
.btn {
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
margin-top: 10px;
}
.btn-primary {
background: #2c5282;
color: white;
}
.btn-primary:hover {
background: #234b6d;
}
.btn-secondary {
background: #718096;
color: white;
}
.btn-secondary:hover {
background: #4a5568;
}
.btn-group {
display: flex;
gap: 15px;
}
.btn-group .btn {
flex: 1;
}
/* Results Section */
.results-section {
text-align: center;
animation: slideIn 0.5s ease-in-out;
}
.results-section h2 {
margin-top: 10px;
color: #2c5282;
font-size: 26px;
font-weight: bold;
}
.result-card {
background: #f7fafc;
padding: 15px 20px;
border-radius: 8px;
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
transition: transform 0.3s;
font-size: 16px;
color: #2d3748;
}
.result-card:hover {
transform: scale(1.02);
}
.total-settlement {
background: #2c5282;
color: white;
padding: 20px;
border-radius: 8px;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
transition: transform 0.3s;
}
.total-settlement:hover {
transform: scale(1.02);
}
.cta-button {
background: #48bb78;
color: white;
padding: 20px 40px;
border: none;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
margin-top: 20px;
width: 100%;
animation: pulse 2s infinite;
}
.cta-button:hover {
background: #38a169;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
/* Detailed Results */
.detailed-results {
text-align: left;
margin-top: 20px;
animation: fadeIn 0.5s ease-in-out;
}
.detailed-results h3 {
color: #2c5282;
margin-bottom: 10px;
font-size: 20px;
border-bottom: 1px solid #2c5282;
padding-bottom: 5px;
}
.detailed-results ul {
list-style: none;
margin-top: 10px;
}
.detailed-results li {
margin-bottom: 8px;
font-size: 16px;
color: #2d3748;
}
.detailed-results li span {
font-weight: bold;
color: #2c5282;
}
/* Disclaimer */
.disclaimer {
margin-top: 20px;
font-size: 14px;
color: #718096;
text-align: left;
line-height: 1.5;
border-top: 1px solid #e2e8f0;
padding-top: 15px;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-7px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
}
}
/* Additional Styles for Result Icon */
.result-icon {
margin-bottom: 20px;
}
.result-icon span {
font-size: 48px;
animation: bounce 1s infinite;
}
/* Mobile Responsive */
@media (max-width: 600px) {
.step-progress {
flex-direction: column;
}
.step:not(:last-child)::after {
width: 2px;
height: 100%;
top: 30px;
left: 50%;
}
.result-card {
flex-direction: column;
align-items: flex-start;
}
.total-settlement {
flex-direction: column;
align-items: flex-start;
}
}
1
Economic Damages
2
Non-Economic Damages
3
Results
Economic Damages
Welcome to the Personal Injury Settlement Calculator. This tool is designed to help you estimate the potential settlement you might receive in a personal injury case. By entering your economic and non-economic damages, you can gain a better understanding of the financial compensation you may be entitled to. Please provide accurate information to ensure the most reliable estimate.
Include all past and future medical costs
Include missed work and reduced earning capacity
Include vehicle repairs and other property losses
Non-Economic Damages
Minor
Moderate
Severe
1.5
Mild
Moderate
Severe
1.5
Minor
Moderate
Severe
1.5
🎉
Settlement Calculation Complete!
Economic Damages
$0
Pain & Suffering Multiplier
0.0x
Non-Economic Damages
$0
Total Estimated Settlement
$0
Detailed Breakdown:
- Medical Expenses: $0
- Lost Wages: $0
- Property Damage: $0
- Pain & Suffering Multiplier: 0.0x
- Non-Economic Damages: $0
Disclaimer: The results provided by this calculator are for informational purposes only and do not constitute legal advice. Settlement amounts can vary widely based on the specific circumstances of each case, including but not limited to the extent of injuries, financial losses, and applicable laws. For an accurate assessment of your situation, please consult with a qualified attorney.
