.calculator-page {
background-color: var(--color-light-bg);
}
.calculator-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-xl);
padding: var(--spacing-section) 0;
}
.calculator-main {
min-width: 0;
} .calculator-card {
background-color: #fff;
border: 1px solid var(--color-light-border);
border-radius: var(--radius-lg);
padding: 32px;
margin-bottom: var(--spacing-xl);
}
.calculator-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-light-border);
}
.calculator-card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-accent);
border-radius: var(--radius-md);
color: #fff;
flex-shrink: 0;
}
.calculator-card-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 0;
line-height: var(--line-height-tight);
}
.calculator-card-subtitle {
font-size: var(--font-size-sm);
color: var(--color-light-text-muted);
margin: 4px 0 0 0;
} .calc-form-group {
margin-bottom: 20px;
}
.calc-form-group label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-light-text-secondary);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.calc-form-group .calc-label-hint {
font-weight: var(--font-weight-regular);
color: var(--color-light-text-muted);
font-size: var(--font-size-xs);
}
.calc-select,
.calc-input {
width: 100%;
padding: 12px 16px;
background-color: #f9fafb;
border: 1px solid var(--color-light-border);
border-radius: var(--radius-md);
color: var(--color-light-text-primary);
font-family: var(--font-primary);
font-size: var(--font-size-base);
transition: border-color var(--transition-fast);
appearance: none;
}
.calc-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236b7280'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-color: #f9fafb;
padding-right: 40px;
cursor: pointer;
}
.calc-select:focus,
.calc-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(194, 109, 40, 0.1);
}
.calc-select option {
background-color: #fff;
color: var(--color-light-text-primary);
}
.calc-input[type="number"] {
-moz-appearance: textfield;
}
.calc-input[type="number"]::-webkit-inner-spin-button,
.calc-input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
} .calc-checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.calc-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-size-sm);
color: var(--color-light-text-secondary);
cursor: pointer;
padding: 8px 12px;
border-radius: var(--radius-md);
transition: background-color var(--transition-fast);
}
.calc-checkbox-label:hover {
background-color: #f3f4f6;
}
.calc-checkbox-label input[type="checkbox"],
.calc-checkbox-label input[type="radio"] {
accent-color: var(--color-accent);
width: 18px;
height: 18px;
flex-shrink: 0;
} .calc-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
background-color: var(--color-accent);
color: #fff;
border: none;
border-radius: 0;
font-family: var(--font-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.calc-submit-btn:hover {
background-color: var(--color-accent-hover);
} .calc-result {
display: none;
margin-top: 24px;
padding: 24px;
background-color: #0a0a0a;
border: 1px solid rgba(194, 109, 40, 0.3);
border-radius: var(--radius-lg);
}
.calc-result.active {
display: block;
}
.calc-result-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.calc-result-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.calc-result-range {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-extrabold);
color: #fff;
margin: 0 0 8px 0;
line-height: 1.1;
}
.calc-result-detail {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.7);
margin: 0 0 8px 0;
line-height: var(--line-height-normal);
}
.calc-result-zone {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
margin-top: 8px;
}
.calc-result-zone--a { background-color: rgba(34, 197, 94, 0.15); color: #22c55e; }
.calc-result-zone--b { background-color: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.calc-result-zone--c { background-color: rgba(234, 179, 8, 0.15); color: #eab308; }
.calc-result-zone--d { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; } .calc-reference-table {
margin-top: 32px;
}
.calc-reference-table h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 0 0 16px 0;
}
.calc-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.calc-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-xs);
}
.calc-table th,
.calc-table td {
padding: 8px 10px;
text-align: center;
border: 1px solid var(--color-light-border);
}
.calc-table th {
background-color: #f3f4f6;
color: var(--color-light-text-secondary);
font-weight: var(--font-weight-semibold);
position: sticky;
top: 0;
}
.calc-table td {
color: var(--color-light-text-secondary);
}
.calc-table tr:hover td {
background-color: rgba(194, 109, 40, 0.05);
}
.calc-table .calc-table-highlight td {
background-color: rgba(194, 109, 40, 0.12);
color: var(--color-light-text-primary);
font-weight: var(--font-weight-semibold);
}
.calc-table td:first-child,
.calc-table th:first-child {
text-align: left;
font-weight: var(--font-weight-semibold);
color: var(--color-light-text-primary);
position: sticky;
left: 0;
background-color: #fff;
z-index: 1;
}
.calc-table .calc-table-highlight td:first-child {
background-color: rgba(194, 109, 40, 0.12);
} .calc-disclaimer {
margin-top: 24px;
padding: 16px;
background-color: #f9fafb;
border: 1px solid var(--color-light-border);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
color: var(--color-light-text-muted);
line-height: var(--line-height-normal);
}
.calc-disclaimer strong {
color: var(--color-light-text-secondary);
} .calc-cta {
background-color: var(--color-accent);
border-radius: var(--radius-lg);
padding: 24px;
text-align: center;
margin-top: 24px;
}
.calc-cta-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: #fff;
margin: 0 0 8px 0;
}
.calc-cta-desc {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.85);
margin: 0 0 16px 0;
}
.calc-cta-phone {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background-color: #fff;
color: var(--color-accent);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
text-decoration: none;
border-radius: 0;
transition: background-color var(--transition-fast);
}
.calc-cta-phone:hover {
background-color: rgba(255, 255, 255, 0.9);
color: var(--color-accent);
} .calc-lead-capture {
margin-top: 24px;
background-color: #0a0a0a;
border: 1px solid rgba(194, 109, 40, 0.3);
border-radius: var(--radius-lg);
padding: 32px;
}
.calc-lead-capture-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.calc-lead-capture-header svg {
color: var(--color-accent);
flex-shrink: 0;
margin-top: 2px;
}
.calc-lead-capture-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: #fff;
margin: 0 0 4px 0;
}
.calc-lead-capture-subtitle {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.6);
margin: 0;
line-height: var(--line-height-normal);
}
.calc-lead-fields {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.calc-lead-field label {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: rgba(255, 255, 255, 0.7);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.calc-lead-field input {
width: 100%;
padding: 12px 16px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
color: #fff;
font-family: var(--font-primary);
font-size: var(--font-size-sm);
transition: border-color var(--transition-fast);
box-sizing: border-box;
}
.calc-lead-field input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.calc-lead-field input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(194, 109, 40, 0.15);
}
.calc-lead-field input.calc-lead-error {
border-color: #ef4444;
}
.calc-lead-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
background-color: var(--color-accent);
color: #fff;
border: none;
border-radius: 0;
font-family: var(--font-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.calc-lead-submit:hover {
background-color: var(--color-accent-hover);
}
.calc-lead-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.calc-lead-message {
margin-top: 16px;
padding: 14px 16px;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.calc-lead-message--success {
background-color: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22c55e;
}
.calc-lead-message--error {
background-color: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
}
.calc-lead-privacy {
margin: 12px 0 0 0;
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.35);
text-align: center;
}
@media (max-width: 640px) {
.calc-lead-fields {
grid-template-columns: 1fr;
}
.calc-lead-capture {
padding: 20px 16px;
}
} .calc-seo-content {
margin-top: var(--spacing-xl);
}
.calc-seo-content h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 0 0 16px 0;
}
.calc-seo-content h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 32px 0 12px 0;
}
.calc-seo-content p {
font-size: var(--font-size-base);
color: var(--color-light-text-secondary);
line-height: var(--line-height-relaxed);
margin: 0 0 16px 0;
}
.calc-seo-content ul,
.calc-seo-content ol {
margin: 0 0 16px 0;
padding-left: 24px;
color: var(--color-light-text-secondary);
line-height: var(--line-height-relaxed);
}
.calc-seo-content li {
margin-bottom: 6px;
}
.calc-seo-content strong {
color: var(--color-light-text-primary);
} .calculators-hub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.calculator-hub-card {
background-color: #fff;
border: 1px solid var(--color-light-border);
border-radius: var(--radius-lg);
padding: 24px;
transition: border-color var(--transition-fast);
text-decoration: none;
display: block;
}
.calculator-hub-card:hover {
border-color: var(--color-accent);
}
.calculator-hub-card-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 0 0 8px 0;
line-height: var(--line-height-snug);
}
.calculator-hub-card-desc {
font-size: var(--font-size-sm);
color: var(--color-light-text-muted);
margin: 0;
line-height: var(--line-height-normal);
}
.calculator-hub-category {
margin-bottom: var(--spacing-xl);
}
.calculator-hub-category h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 0 0 8px 0;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-accent);
} .calc-print-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-primary);
font-size: var(--font-size-xs);
cursor: pointer;
border-radius: var(--radius-sm);
transition: border-color var(--transition-fast);
margin-top: 12px;
}
.calc-print-btn:hover {
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
@media print {
.site-header, .site-footer, .news-sidebar, .calc-cta, .calc-lead-capture, .calc-submit-btn, .calc-print-btn, .video-cta-section {
display: none !important;
}
.calculator-layout {
display: block;
}
.calc-result {
display: block !important;
}
.calculator-card {
border: 1px solid #ccc;
break-inside: avoid;
}
} @media (max-width: 1024px) {
.calculator-layout {
grid-template-columns: 1fr;
}
.calculators-hub-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.calculator-card {
padding: 20px 16px;
}
.calc-result-range {
font-size: var(--font-size-2xl);
}
.calculators-hub-grid {
grid-template-columns: 1fr;
}
} .calc-conviction-row {
background: #f9fafb;
border: 1px solid var(--color-light-border);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 12px;
}
.calc-conviction-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.calc-conviction-num {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-light-text-secondary);
}
.calc-remove-btn {
background: none;
border: none;
color: rgba(239, 68, 68, 0.7);
font-size: var(--font-size-xs);
cursor: pointer;
padding: 4px 8px;
}
.calc-remove-btn:hover {
color: #ef4444;
}
.calc-conviction-fields .calc-form-group {
margin-bottom: 12px;
} .calc-related-section {
margin-top: 32px;
}
.calc-related-section h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
margin: 0 0 4px 0;
}
.calc-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.calc-related-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background-color: #f9fafb;
border: 1px solid var(--color-light-border);
border-radius: var(--radius-md);
text-decoration: none;
transition: border-color var(--transition-fast);
}
.calc-related-card:hover {
border-color: var(--color-accent);
}
.calc-related-category {
font-size: 0.6875rem;
font-weight: var(--font-weight-semibold);
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.calc-related-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-light-text-primary);
line-height: var(--line-height-snug);
}
.calc-related-desc {
font-size: var(--font-size-xs);
color: var(--color-light-text-muted);
line-height: var(--line-height-normal);
}
@media (max-width: 1024px) {
.calc-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.calc-related-grid {
grid-template-columns: 1fr;
}
}