:root {
--primary-green: #16a34a;
--primary-blue: #2563eb;
--warning-orange: #ea580c;
--error-red: #dc2626;
--neutral-gray: #6b7280;
--light-bg: #f9fafb;
--white: #ffffff;
--dark-text: #111827;
--radius: 12px;
--shadow: 0 10px 20px rgba(17, 24, 39, 0.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--dark-text);
background: var(--light-bg);
}
.energy-calculator-wrapper {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 28px 20px;
}
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: static;
width: auto; height: auto;
padding: 8px 12px;
background: var(--primary-blue);
color: var(--white);
border-radius: 6px;
}
.card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 24px;
margin-bottom: 28px;
}
.card-header h1, .card-header h2 { margin: 0 0 6px; }
.card-sub { margin-top: 20px; }
.muted { color: var(--neutral-gray); }
.help { color: var(--neutral-gray); font-size: 0.95rem; margin-top: 8px; }
.error { color: var(--error-red); font-size: 0.95rem; min-height: 1.25em; }
.success { color: var(--primary-green); font-weight: 600; margin-top: 10px; }
.required { color: var(--error-red); }
.form-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.form-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
.form-control label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.input-wrap { position: relative; display: flex; align-items: stretch; gap: 10px; }
.input-wrap .unit { align-self: center; color: var(--neutral-gray); font-size: 0.95rem; }
input[type="number"], input[type="text"], input[type="email"], select {
width: 100%;
appearance: none;
-moz-appearance: textfield;
border: 1px solid #e5e7eb;
background: var(--white);
padding: 14px 14px;
border-radius: 10px;
font-size: 1rem;
color: var(--dark-text);
}
input:focus, select:focus, button:focus, a.btn:focus {
outline: 3px solid rgba(37,99,235,0.35);
outline-offset: 2px;
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error-red); }
.actions { margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
border: 0;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.btn-primary { background: var(--primary-blue); color: var(--white); }
.btn-secondary { background: #0ea5e9; color: var(--white); }
.btn-cta { background: var(--primary-green); color: var(--white); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.result {
transition: transform 300ms ease, opacity 300ms ease;
}
.result.show { opacity: 1; transform: translateY(0); } .result .card-header { margin-bottom: 12px; }
.result-class {
height: 56px;
border-radius: 10px;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
letter-spacing: 0.5px;
margin: 8px 0 16px;
}
.result-summary { margin-top: 16px; }
.result-summary p { margin: 10px 0; }
.scale { margin: 24px 0 12px; }
.scale-bar {
height: 10px;
border-radius: 8px;
background: linear-gradient(90deg,
#16a34a 0%, #22c55e 11%, #84cc16 22%, #eab308 33%, #f59e0b 44%,
#ea580c 55%, #dc2626 66%, #991b1b 77%, #7f1d1d 100%);
position: relative;
}
.scale-bar span {
position: absolute;
top: 18px;
font-size: 12px;
color: var(--neutral-gray);
}
.scale-bar span:nth-child(1) { left: 0%; transform: translateX(0); }
.scale-bar span:nth-child(2) { left: 12%; transform: translateX(-50%); }
.scale-bar span:nth-child(3) { left: 24%; transform: translateX(-50%); }
.scale-bar span:nth-child(4) { left: 36%; transform: translateX(-50%); }
.scale-bar span:nth-child(5) { left: 48%; transform: translateX(-50%); }
.scale-bar span:nth-child(6) { left: 60%; transform: translateX(-50%); }
.scale-bar span:nth-child(7) { left: 72%; transform: translateX(-50%); }
.scale-bar span:nth-child(8) { left: 84%; transform: translateX(-50%); }
.scale-bar span:nth-child(9) { left: 100%; transform: translateX(-100%); }
.savings.card-sub, .recommendations.card-sub, .lead.card-sub { margin-top: 28px; }
.recommendations ul { margin: 12px 0 0 0; padding-left: 22px; }
.recommendations li { margin: 8px 0; }
.lead-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.call { color: var(--primary-blue); font-weight: 600; text-decoration: none; }
.email-form label { display: block; margin-bottom: 8px; }
.email-form .input-wrap { gap: 14px; }
.email-form input { flex: 1; } @media (max-width: 768px) {
.container {
padding: 16px 12px;
}
.card {
padding: 16px;
}
.form-grid {
grid-template-columns: 1fr;
}
.lead-actions {
flex-direction: column;
align-items: stretch;
}
.btn {
justify-content: center;
}
} @media print {
.email-form,
.lead-actions {
display: none;
}
} @media (prefers-contrast: high) {
.btn {
border: 2px solid currentColor;
}
} @media (prefers-reduced-motion: reduce) {
.result {
transition: none;
}
}html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html{
scroll-behavior: auto;
}
}
#wpforms-submit-151 {
background-color: #f31212;
}
a {
text-decoration-thickness: 1px !important;
text-underline-offset: .1em;
}
div[data-block-id="0ae1df6"] a {
text-decoration: none;
}
div[data-block-id="0ae1df6"] a:hover {
text-decoration: underline;
} :where(.wp-site-blocks *:focus) {
outline-width: 2px;
outline-style: solid;
} .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
margin-bottom: 3px;
} .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
outline-offset: 4px;
} .wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
outline-offset: 0;
} h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
text-wrap: pretty;
} .more-link {
display: block;
}