33 1 3 Attorney Fees Calculator

# 33 1/3 Attorney Fees Calculator I'll create a professional attorney fees calculator that computes the standard 33 1/3% (one-third) contingency fee commonly used in personal injury and similar cases. Let me build this for you: 33 1/3 Attorney Fees Calculator | Contingency Fee Calculator :root { –primary-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); –accent-gradient: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%); –card-bg: rgba(255, 255, 255, 0.03); –card-border: rgba(255, 255, 255, 0.08); –glass-bg: rgba(255, 255, 255, 0.05); –text-primary: #ffffff; –text-secondary: rgba(255, 255, 255, 0.7); –text-muted: rgba(255, 255, 255, 0.5); –accent-pink: #e94560; –accent-blue: #4facfe; –accent-green: #00f2fe; –success: #10b981; –warning: #f59e0b; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(–primary-gradient); min-height: 100vh; color: var(–text-primary); overflow-x: hidden; position: relative; } body::before { content: "; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(233, 69, 96, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(79, 172, 254, 0.15) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } .container { max-width: 900px; margin: 0 auto; padding: 40px 20px; position: relative; z-index: 1; } header { text-align: center; margin-bottom: 50px; } .logo-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: var(–accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 20px 60px rgba(233, 69, 96, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; margin-bottom: 16px; background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } .subtitle { font-size: 16px; color: var(–text-secondary); max-width: 500px; margin: 0 auto; line-height: 1.6; } .calculator-card { background: var(–card-bg); border: 1px solid var(–card-border); border-radius: 24px; padding: 40px; backdrop-filter: blur(20px); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .input-section { margin-bottom: 40px; } .section-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(–accent-pink); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .section-title::after { content: "; flex: 1; height: 1px; background: linear-gradient(90deg, var(–card-border), transparent); } .input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } .input-group { position: relative; } .input-group label { display: block; font-size: 13px; font-weight: 500; color: var(–text-secondary); margin-bottom: 10px; transition: color 0.3s ease; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-prefix { position: absolute; left: 16px; color: var(–text-muted); font-size: 16px; font-weight: 500; z-index: 1; pointer-events: none; } .input-suffix { position: absolute; right: 16px; color: var(–text-muted); font-size: 14px; font-weight: 500; } input[type="number"] { width: 100%; padding: 16px 16px 16px 36px; font-size: 18px; font-weight: 600; font-family: inherit; background: var(–glass-bg); border: 1px solid var(–card-border); border-radius: 12px; color: var(–text-primary); transition: all 0.3s ease; -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"]:hover { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.07); } input[type="number"]:focus { outline: none; border-color: var(–accent-pink); background: rgba(233, 69, 96, 0.05); box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15); } input[type="number"]:focus + .input-prefix, .input-group:focus-within label { color: var(–accent-pink); } .fee-rate-display { background: linear-gradient(135deg, rgba(233, 69, 96, 0.1) 0%, rgba(79, 172, 254, 0.1) 100%); border: 1px solid rgba(233, 69, 96, 0.2); border-radius: 16px; padding: 20px 24px; margin-bottom: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .fee-rate-info { display: flex; align-items: center; gap: 12px; } .fee-rate-icon { width: 44px; height: 44px; background: var(–accent-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .fee-rate-text h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .fee-rate-text p { font-size: 13px; color: var(–text-secondary); } .fee-rate-value { font-size: 32px; font-weight: 800; background: var(–accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .calculate-btn { width: 100%; padding: 18px 32px; font-size: 16px; font-weight: 600; font-family: inherit; background: var(–accent-gradient); border: none; border-radius: 14px; color: white; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; margin-top: 8px; } .calculate-btn::before { content: "; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(233, 69, 96, 0.4); } .calculate-btn:hover::before { left: 100%; } .calculate-btn:active { transform: translateY(0); } .results-section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(–card-border); display: none; } .results-section.visible { display: block; animation: fadeInUp 0.5s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; } .result-card { background: var(–glass-bg); border: 1px solid var(–card-border); border-radius: 16px; padding: 24px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .result-card::before { content: "; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(–accent-gradient); opacity: 0; transition: opacity 0.3s ease; } .result-card:hover { transform: translateY(-4px); border-color: rgba(233, 69, 96, 0.3); } .result-card:hover::before { opacity: 1; } .result-card.primary { background: linear-gradient(135deg, rgba(233, 69, 96, 0.15) 0%, rgba(233, 69, 96, 0.05) 100%); border-color: rgba(233, 69, 96, 0.3); } .result-card.primary::before { opacity: 1; } .result-card.success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%); border-color: rgba(16, 185, 129, 0.3); } .result-card.success::before { background: linear-gradient(90deg, #10b981, #34d399); opacity: 1; } .result-icon { font-size: 28px; margin-bottom: 12px; } .result-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(–text-secondary); margin-bottom: 8px; } .result-value { font-size: 28px; font-weight: 700; color: var(–text-primary); } .result-card.primary .result-value { color: var(–accent-pink); } .result-card.success .result-value { color: var(–success); } .breakdown-section { background: var(–glass-bg); border: 1px solid var(–card-border); border-radius: 16px; padding: 28px; } .breakdown-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .breakdown-bar { height: 24px; border-radius: 12px; background: var(–card-bg); overflow: hidden; display: flex; margin-bottom: 20px; border: 1px solid var(–card-border); } .bar-segment { height: 100%; transition: width 0.8s ease; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); min-width: 0; overflow: hidden; } .bar-attorney { background: var(–accent-gradient); } .bar-costs { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); } .bar-client { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); } .breakdown-legend { display: flex; flex-wrap: wrap; gap: 20px; } .legend-item { display: flex; align-items: center; gap: 10px; } .legend-dot { width: 12px; height: 12px; border-radius: 4px; } .legend-dot.attorney { background: var(–accent-gradient); } .legend-dot.costs { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); } .legend-dot.client { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); } .legend-text { font-size: 13px; color: var(–text-secondary); } .legend-text strong { color: var(–text-primary); } .info-box { margin-top: 32px; background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.05) 100%); border: 1px solid rgba(79, 172, 254, 0.2); border-radius: 16px; padding: 24px; } .info-box h4 { font-size: 14px; font-weight: 600; color: var(–accent-blue); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .info-box p { font-size: 14px; color: var(–text-secondary); line-height: 1.7; } footer { text-align: center; margin-top: 50px; padding: 24px; color: var(–text-muted); font-size: 13px; } footer a { color: var(–accent-pink); text-decoration: none; } footer a:hover { text-decoration: underline; } @media (max-width: 600px) { .container { padding: 24px 16px; } .calculator-card { padding: 24px; border-radius: 20px; } .fee-rate-display { flex-direction: column; text-align: center; } .result-value { font-size: 24px; } .breakdown-legend { flex-direction: column; gap: 12px; } }
โš–๏ธ

33โ…“% Attorney Fees Calculator

Calculate contingency fee distributions for personal injury, workers' compensation, and settlement cases

๐Ÿ“Š

Standard Contingency Rate

One-third of total recovery

33โ…“%
Case Details
$
$
Fee Breakdown
๐Ÿ‘จโ€โš–๏ธ
Attorney Fee (33โ…“%)
$0.00
๐Ÿ“‹
Case Costs Deducted
$0.00
๐Ÿ’ฐ
Client Net Recovery
$0.00
๐Ÿ“ˆ Visual Distribution
0% Attorney
0% Costs
0% Client

โ„น๏ธ How 33โ…“% Contingency Fees Work

The standard 33โ…“% (one-third) contingency fee means the attorney receives exactly one-third of the total settlement. Case costs (filing fees, expert witnesses, medical records, etc.) are typically deducted separately. The remaining amount goes to the client. This arrangement means clients pay nothing upfrontโ€”attorneys only get paid if they win.

This calculator is for informational purposes only and does not constitute legal advice.

function formatCurrency(amount) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount); } function calculateFees() { var settlementAmount = parseFloat(document.getElementById('settlement-amount').value) || 0; var caseCosts = parseFloat(document.getElementById('case-costs').value) || 0; // Standard 33 1/3% contingency fee (exactly one-third) var feeRate = 1 / 3; // Calculate attorney fee (33.33…% of total settlement) var attorneyFee = settlementAmount * feeRate; // Client receives the rest minus case costs var clientRecovery = settlementAmount – attorneyFee – caseCosts; // Update result displays document.getElementById('attorney-fee').textContent = formatCurrency(attorneyFee); document.getElementById('costs-deducted').textContent = formatCurrency(caseCosts); document.getElementById('client-recovery').textContent = formatCurrency(Math.max(0, clientRecovery)); // Calculate percentages for the visual bar var total = settlementAmount || 1; var attorneyPercent = (attorneyFee / total) * 100; var costsPercent = (caseCosts / total) * 100; var clientPercent = Math.max(0, (clientRecovery / total) * 100); // Update bar segments document.getElementById('bar-attorney').style.width = attorneyPercent + '%'; document.getElementById('bar-costs').style.width = costsPercent + '%'; document.getElementById('bar-client').style.width = clientPercent + '%'; // Update legend percentages document.getElementById('legend-attorney').textContent = attorneyPercent.toFixed(1) + '%'; document.getElementById('legend-costs').textContent = costsPercent.toFixed(1) + '%'; document.getElementById('legend-client').textContent = clientPercent.toFixed(1) + '%'; // Show results section document.getElementById('results-section').classList.add('visible'); // Smooth scroll to results document.getElementById('results-section').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // Add enter key support document.querySelectorAll('input[type="number"]').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { calculateFees(); } }); }); // Real-time calculation on input document.querySelectorAll('input[type="number"]').forEach(input => { input.addEventListener('input', function() { var settlementAmount = parseFloat(document.getElementById('settlement-amount').value) || 0; if (settlementAmount > 0) { calculateFees(); } }); }); ## Features of this 33โ…“% Attorney Fees Calculator: ### **Accurate Calculations** – Uses the exact **33โ…“% (one-third)** contingency fee rate – Calculates **attorney fee** as precisely 1/3 of the total settlement – Deducts **case costs/expenses** (filing fees, expert witnesses, etc.) – Shows the **client's net recovery** after all deductions ### **Visual Breakdown** – Dynamic progress bar showing distribution percentages – Color-coded segments: **pink** for attorney fee, **amber** for costs, **green** for client recovery – Animated results that update in real-time as you type ### **Premium Design** – Modern glassmorphism aesthetic with gradient backgrounds – Smooth animations and hover effects – Fully responsive for mobile devices – Professional legal-themed color palette ### **User-Friendly** – Real-time calculations as you enter values – Enter key support for quick calculations – Clear labeling of all inputs and outputs – Informational box explaining how contingency fees work

Leave a Reply

Your email address will not be published. Required fields are marked *