:root{--brand-blue:#17263d;--brand-grey:#fff;--brand:root { --brand-blue:#17263D; --brand-blue-light:#2a3f5f; --brand-blue-medium:#4a5f7f; --brand-red:#E44755; --text-body:#fff; --background-dark:#17263D; --background-light:#1f2e4a; --border-color:#4a5f7f; --error-color:var(--brand-red); --error-bg:#fdeaec; --border-radius:6px; --transition-speed:0.3s; --font-medium:500; --font-regular:400; } .solar-calculator-module *,.solar-calculator-module *::before,.solar-calculator-module *::after { box-sizing:border-box; } .solar-calculator-module { width:100%; max-width:100%; padding:20px; margin:20px auto; background-color:var(--background-dark) !important; border-radius:var(--border-radius); color:var(--text-body); font-family:"Poppins",sans-serif; overflow:hidden; } .solar-calculator-module h2 { text-align:center; margin-bottom:20px; font-size:1.8em; font-weight:var(--font-medium); } .solar-calculator-module h4 { margin-bottom:10px; font-weight:var(--font-medium); font-size:1.1em; } .input-section { display:grid; grid-template-columns:1fr 1fr; gap:40px; } .region-selector,.building-inputs { background-color:var(--background-dark); border:1px solid var(--border-color); border-radius:var(--border-radius); padding:20px; margin-bottom:20px; position:relative; } .building-input-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; } label { display:block; margin-bottom:6px; font-size:0.9em; text-transform:uppercase; } input[type="number"],select { width:100%; padding:12px; border:1px solid var(--border-color); border-radius:var(--border-radius); background-color:var(--background-light); font-size:1em; transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease; } input[type="number"]:focus,select:focus { border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(228,71,85,.25) ; outline:none; } input.invalid-input { border-color:var(--error-color) !important; box-shadow:0 0 0 3px rgba(228,71,85,.25) !important; } .add-building-btn,.remove-building-btn { width:36px; height:36px; border-radius:50%; background-color:var(--brand-blue-medium); color:#fff; border:1px solid var(--border-color); font-size:1.5em; cursor:pointer; transition:background-color var(--transition-speed) ease,transform var(--transition-speed) ease; display:flex; align-items:center; justify-content:center; } .add-building-btn { margin:0 auto 20px; } .add-building-btn:hover,.remove-building-btn:hover { background-color:var(--brand-blue-light); transform:scale(1.05); } .remove-building-btn { position:absolute; top:15px; right:15px; background-color:var(--brand-red); border-color:var(--brand-red); width:28px; height:28px; font-size:1.2em; } .calculate-button-container { margin-top:10px; } .calculate-btn { width:100%; padding:14px; background-color:var(--brand-red); color:#fff; border:none; border-radius:var(--border-radius); font-size:1.1em; cursor:pointer; transition:transform var(--transition-speed) ease,background-color var(--transition-speed) ease; } .calculate-btn:hover { background-color:#c53743; transform:translateY(-2px); } .error-message { display:none; background:var(--error-bg); border-left:3px solid var(--brand-red); padding:10px; margin-bottom:10px; color:#000; } .results-section { background:var(--background-light); border:1px solid var(--border-color); border-left:5px solid var(--border-color); border-radius:var(--border-radius); padding:25px; transition:border-left-color 0.5s ease; } .results-section:not(.placeholder-loading) { border-left-color:var(--brand-red); } .results-header,.results-values { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; text-align:center; } .results-header { font-weight:var(--font-medium); opacity:0.8; border-bottom:1px solid var(--border-color); padding-bottom:10px; font-size:0.85em; } .results-values div { background:var(--background-dark); border:1px solid var(--border-color); border-radius:var(--border-radius); padding:10px; font-size:1.4em; font-weight:600; display:flex; align-items:center; justify-content:center; } .results-breakdown-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:25px; border-top:1px dashed var(--border-color); padding-top:25px; } .results-breakdown-table { width:100%; border-collapse:collapse; } .results-breakdown-table th,.results-breakdown-table td { border:1px solid var(--border-color); padding:8px; font-size:0.9em; color:var(--text-body); } .results-breakdown-table th { background:var(--background-light); font-weight:var(--font-medium); white-space:nowrap; } .results-breakdown-table td:first-child { font-weight:var(--font-medium); text-align:left; } .additional-info { text-align:center; margin-top:25px; border-top:1px dashed var(--border-color); padding-top:25px; } .expert-cta-btn { display:inline-block; background:var(--brand-red); color:#fff; padding:12px 30px; border-radius:var(--border-radius); font-size:1.1em; text-decoration:none; transition:transform var(--transition-speed) ease; } .expert-cta-btn:hover { transform:translateY(-2px); } .placeholder-loading .results-values span,.placeholder-loading .results-values div { color:var(--border-color) !important; background:transparent !important; border-color:transparent !important; } .placeholder-loading .results-breakdown-wrapper::before { content:"Location breakdown will display here"; color:var(--border-color); display:block; text-align:center; padding:30px; } .placeholder-loading .additional-info { display:none; } .dsr-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.7) ; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:0.3s; } .dsr-modal-overlay.active { opacity:1; visibility:visible; } .dsr-modal-content { background:var(--background-dark); padding:30px; border-radius:var(--border-radius); max-width:550px; width:100%; max-height:90vh; overflow-y:auto; transform:scale(0.9); transition:0.3s; } .dsr-modal-overlay.active .dsr-modal-content { transform:scale(1); } .dsr-modal-close { position:absolute; top:10px; right:15px; font-size:2rem; background:none; border:none; color:#fff; opacity:0.7; cursor:pointer; } .dsr-modal-close:hover { opacity:1; } @media (max-width:900px) { .input-section { grid-template-columns:1fr; gap:30px; } }:root { --brand-blue:#17263D; --brand-grey:#fff; --brand:root { --brand-blue:#17263D; --brand-blue-light:#2a3f5f; --brand-blue-medium:#4a5f7f; --brand-red:#E44755; --text-body:#fff; --background-dark:#17263D; --background-light:#1f2e4a; --border-color:#4a5f7f; --error-color:var(--brand-red); --error-bg:#fdeaec; --border-radius:6px; --transition-speed:0.3s; --font-medium:500; --font-regular:400; } .solar-calculator-module *,.solar-calculator-module *::before,.solar-calculator-module *::after { box-sizing:border-box; } .solar-calculator-module { width:100%; max-width:100%; padding:20px; margin:20px auto; background-color:var(--background-dark) !important; border-radius:var(--border-radius); color:var(--text-body); font-family:"Poppins",sans-serif; overflow:hidden; } .solar-calculator-module h2 { text-align:center; margin-bottom:20px; font-size:1.8em; font-weight:var(--font-medium); } .solar-calculator-module h4 { margin-bottom:10px; font-weight:var(--font-medium); font-size:1.1em; } .input-section { display:grid; grid-template-columns:1fr 1fr; gap:40px; } .region-selector,.building-inputs { background-color:var(--background-dark); border:1px solid var(--border-color); border-radius:var(--border-radius); padding:20px; margin-bottom:20px; position:relative; } .building-input-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; } label { display:block; margin-bottom:6px; font-size:0.9em; text-transform:uppercase; } input[type="number"],select { width:100%; padding:12px; border:1px solid var(--border-color); border-radius:var(--border-radius); background-color:var(--background-light); font-size:1em; transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease; } input[type="number"]:focus,select:focus { border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(228,71,85,.25) ; outline:none; } input.invalid-input { border-color:var(--error-color) !important; box-shadow:0 0 0 3px rgba(228,71,85,.25) !important; } .add-building-btn,.remove-building-btn { width:36px; height:36px; border-radius:50%; background-color:var(--brand-blue-medium); color:#fff; border:1px solid var(--border-color); font-size:1.5em; cursor:pointer; transition:background-color var(--transition-speed) ease,transform var(--transition-speed) ease; display:flex; align-items:center; justify-content:center; } .add-building-btn { margin:0 auto 20px; } .add-building-btn:hover,.remove-building-btn:hover { background-color:var(--brand-blue-light); transform:scale(1.05); } .remove-building-btn { position:absolute; top:15px; right:15px; background-color:var(--brand-red); border-color:var(--brand-red); width:28px; height:28px; font-size:1.2em; } .calculate-button-container { margin-top:10px; } .calculate-btn { width:100%; padding:14px; background-color:var(--brand-red); color:#fff; border:none; border-radius:var(--border-radius); font-size:1.1em; cursor:pointer; transition:transform var(--transition-speed) ease,background-color var(--transition-speed) ease; } .calculate-btn:hover { background-color:#c53743; transform:translateY(-2px); } .error-message { display:none; background:var(--error-bg); border-left:3px solid var(--brand-red); padding:10px; margin-bottom:10px; color:#000; } .results-section { background:var(--background-light); border:1px solid var(--border-color); border-left:5px solid var(--border-color); border-radius:var(--border-radius); padding:25px; transition:border-left-color 0.5s ease; } .results-section:not(.placeholder-loading) { border-left-color:var(--brand-red); } .results-header,.results-values { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; text-align:center; } .results-header { font-weight:var(--font-medium); opacity:0.8; border-bottom:1px solid var(--border-color); padding-bottom:10px; font-size:0.85em; } .results-values div { background:var(--background-dark); border:1px solid var(--border-color); border-radius:var(--border-radius); padding:10px; font-size:1.4em; font-weight:600; display:flex; align-items:center; justify-content:center; } .results-breakdown-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:25px; border-top:1px dashed var(--border-color); padding-top:25px; } .results-breakdown-table { width:100%; border-collapse:collapse; } .results-breakdown-table th,.results-breakdown-table td { border:1px solid var(--border-color); padding:8px; font-size:0.9em; color:var(--text-body); } .results-breakdown-table th { background:var(--background-light); font-weight:var(--font-medium); white-space:nowrap; } .results-breakdown-table td:first-child { font-weight:var(--font-medium); text-align:left; } .additional-info { text-align:center; margin-top:25px; border-top:1px dashed var(--border-color); padding-top:25px; } .expert-cta-btn { display:inline-block; background:var(--brand-red); color:#fff; padding:12px 30px; border-radius:var(--border-radius); font-size:1.1em; text-decoration:none; transition:transform var(--transition-speed) ease; } .expert-cta-btn:hover { transform:translateY(-2px); } .placeholder-loading .results-values span,.placeholder-loading .results-values div { color:var(--border-color) !important; background:transparent !important; border-color:transparent !important; } .placeholder-loading .results-breakdown-wrapper::before { content:"Location breakdown will display here"; color:var(--border-color); display:block; text-align:center; padding:30px; } .placeholder-loading .additional-info { display:none; } .dsr-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.7) ; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:0.3s; } .dsr-modal-overlay.active { opacity:1; visibility:visible; } .dsr-modal-content { background:var(--background-dark); padding:30px; border-radius:var(--border-radius); max-width:550px; width:100%; max-height:90vh; overflow-y:auto; transform:scale(0.9); transition:0.3s; } .dsr-modal-overlay.active .dsr-modal-content { transform:scale(1); } .dsr-modal-close { position:absolute; top:10px; right:15px; font-size:2rem; background:none; border:none; color:#fff; opacity:0.7; cursor:pointer; } .dsr-modal-close:hover { opacity:1; } @media (max-width:900px) { .input-section { grid-template-columns:1fr; gap:30px; } } @media (max-width:600px) { .results-header,.results-values { grid-template-columns:repeat(3,1fr); } .results-values div { font-size:1.2em; min-height:50px; } .results-breakdown-wrapper { overflow-x:hidden; } .results-breakdown-table thead { display:none; } .results-breakdown-table,.results-breakdown-table tr,.results-breakdown-table td { display:block; width:100%; } .results-breakdown-table tr { margin-bottom:15px; border:1px solid var(--border-color); border-left:3px solid var(--brand-red); border-radius:var(--border-radius); padding:15px; background:var(--background-dark); } .results-breakdown-table td { position:relative; padding:5px 0; border:none; border-bottom:1px dashed var(--border-color); text-align:right; } .results-breakdown-table td:first-child { text-align:left; font-size:1.1em; margin-bottom:10px; } .results-breakdown-table td::before { content:attr(data-label); position:absolute; left:0; width:45%; padding-right:10px; font-weight:var(--font-medium); color:var(--border-color); } .results-breakdown-table td:first-child::before { content:none; } } @media (max-width:400px) { .input-section { gap:20px; } .building-input-fields { grid-template-columns:1fr; } input,select { font-size:0.9em; } .results-header,.results-values { grid-template-columns:repeat(2,1fr); } } -red:#E44755; --brand-blue-light:#2a3f5f; --brand-blue-medium:#4a5f7f; --primary-color:var(--brand-blue); --primary-dark:var(--brand-blue); --primary-light:var(--brand-blue-light); --secondary-color:var(--brand-red); --text-heading:var(--brand-grey); --text-body:var(--brand-grey); --text-body-alt:var(--brand-grey); --text-light-contrast:#ffffff; --background-light:#1f2e4a; --background-dark:#17263D; --background-grey:#17263D; --border-color:#4a5f7f; --placeholder-color:#6a7f9f; --error-color:var(--brand-red); --error-background:#fdeaec; --border-radius:6px; --box-shadow:0 3px 5px rgba(0,0,0,.15) ; --transition-speed:0.3s; --font-semibold:600; --font-medium:500; --font-regular:400; --font-light:300; } .solar-calculator-module *,.solar-calculator-module *::before,.solar-calculator-module *::after { box-sizing:border-box; } .solar-calculator-module { font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6; color:var(--text-body); font-weight:var(--font-regular); padding:30px 35px; max-width:1600px; margin:30px auto; background-color:var(--background-dark) !important; border-radius:var(--border-radius); overflow:hidden; } .solar-calculator-module h2 { color:var(--text-body) !important; margin:0 0 30px 0; text-align:center; font-size:1.8em; font-weight:var(--font-semibold); } .solar-calculator-module h4 { margin:0 0 10px 0; padding:0; color:var(--text-body); font-weight:var(--font-medium); font-size:1.1em; opacity:0.9; } .results-breakdown-wrapper h4 { text-align:center; margin-bottom:15px; font-size:1.2em; } .input-section { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .dimension-inputs p { text-align:left; margin:0 0 20px 0; color:var(--text-body); font-size:1em; font-weight:var(--font-regular); } .region-selector,.building-inputs { border:1px solid var(--border-color); border-radius:var(--border-radius); padding:20px; margin-bottom:20px; background-color:var(--background-dark); position:relative; } .region-selector,.building-input-fields > div { margin-bottom:18px; } .region-selector:last-child,.building-input-fields > div:last-child { margin-bottom:0; } .building-input-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .solar-calculator-module label { display:block; font-weight:var(--font-medium); margin:0 0 8px 0; color:var(--text-body); font-size:0.9em; padding:0; text-transform:uppercase; } .solar-calculator-module input[type="number"],.solar-calculator-module select { padding:12px 15px; border:1px solid var(--border-color); border-radius:var(--border-radius); font-size:1em; width:100%; background-color:var(--background-light); font-family:inherit; color:var(--text-body); transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease; margin:0; } .solar-calculator-module select { color-scheme:dark; cursor:pointer; } .solar-calculator-module input[type="number"]:hover,.solar-calculator-module select:hover { border-color:var(--brand-red) !important; } .solar-calculator-module input[type="number"]:focus,.solar-calculator-module select:focus { border-color:var(--brand-red); outline:none; box-shadow:0 0 0 3px rgba(228,71,85,.25) ; } .solar-calculator-module input.invalid-input { border-color:var(--error-color) !important; box-shadow:0 0 0 3px rgba(228,71,85,.25) !important; } .calculate-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background-color:var(--brand-red); background-image:none; color:var(--text-light-contrast); border:none; padding:14px 25px; border-radius:var(--border-radius); font-size:1.1em; font-weight:var(--font-medium); cursor:pointer; text-align:center; transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease,background-color var(--transition-speed) ease; width:100%; box-shadow:0 2px 4px rgba(0,0,0,.1) ; text-decoration:none; margin-top:10px; } .calculate-btn:hover { background-color:#c53743; transform:translateY(-2px); box-shadow:0 6px 10px rgba(0,0,0,.15) ; color:var(--text-light-contrast); } .calculate-btn:active { transform:translateY(0); background-color:#b32d39; box-shadow:0 2px 4px rgba(0,0,0,.1) ; } .add-building-btn,.remove-building-btn { display:flex; align-items:center; justify-content:center; background-color:var(--brand-blue-medium); color:var(--text-light-contrast); border:1px solid var(--border-color); border-radius:50%; font-size:1.5em; font-weight:bold; line-height:1; cursor:pointer; transition:background-color var(--transition-speed) ease,transform var(--transition-speed) ease; width:36px; height:36px; padding:0; margin:15px auto 0 auto; } .add-building-btn:hover,.remove-building-btn:hover { background-color:var(--brand-blue-light); transform:scale(1.05); } .remove-building-btn { position:absolute; top:15px; right:15px; font-size:1.2em; width:28px; height:28px; margin:0; background-color:var(--brand-red); border-color:var(--brand-red); } .remove-building-btn:hover { background-color:#c53743; } .calculate-button-container { margin-top:20px; } .error-message { color:#000; font-weight:var(--font-regular); margin:0 0 10px 0; min-height:1.2em; text-align:center; font-size:0.9em; background-color:var(--error-background); border:1px solid var(--brand-red); border-left:3px solid var(--brand-red); border-radius:4px; padding:10px 12px; display:none; width:100%; } .results-section { background-color:var(--background-light); border:1px solid var(--border-color); border-left:5px solid var(--border-color); border-radius:var(--border-radius); padding:25px; opacity:1; transition:opacity 0.5s ease,border-left-color 0.5s ease; } .results-section:not(.placeholder-loading) { border-left-color:var(--brand-red); } .results-header,.results-values { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; text-align:center; margin-bottom:10px; } .results-header { font-size:0.85em; color:var(--text-body); opacity:0.8; font-weight:var(--font-medium); padding-bottom:10px; border-bottom:1px solid var(--border-color); } .results-values div { font-size:1.4em; color:var(--text-body); font-weight:var(--font-semibold); line-height:1.2; padding:10px 5px; background-color:var(--background-dark); border-radius:var(--border-radius); border:1px solid var(--border-color); min-height:60px; display:flex; align-items:center; justify-content:center; } .results-breakdown-wrapper { margin-top:25px; min-height:100px; position:relative; border-top:1px dashed var(--border-color); padding-top:25px; } .results-breakdown-table { width:100%; border-collapse:collapse; font-size:0.9em; } .results-breakdown-table th,.results-breakdown-table td { border:1px solid var(--border-color); padding:8px 10px; text-align:right; font-weight:var(--font-regular); color:var(--text-body); } .results-breakdown-table th { background-color:var(--primary-light); color:var(--text-body); font-weight:var(--font-medium); text-align:center; white-space:nowrap; } .results-breakdown-table td:first-child { text-align:left; font-weight:var(--font-medium); } .additional-info { margin-top:25px; padding-top:25px; border-top:1px dashed var(--border-color); text-align:center; } .additional-info p { margin:0 0 20px 0; padding:0; color:var(--text-body); opacity:0.9; font-size:1em; font-weight:var(--font-regular); } .expert-cta-btn { background-color:var(--secondary-color); color:var(--text-light-contrast); display:inline-block; align-items:center; gap:8px; width:auto; padding:12px 30px; text-decoration:none; margin:0; border-radius:var(--border-radius); font-size:1.1em; font-weight:var(--font-medium); transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease,background-color var(--transition-speed) ease; border:none; cursor:pointer; } .expert-cta-btn:hover { background-color:#c53743; color:var(--text-light-contrast); transform:translateY(-2px); box-shadow:0 6px 10px rgba(0,0,0,.15) ; } .expert-cta-btn:active { background-color:#b32d39; transform:translateY(0); } .placeholder-loading .results-values span,.placeholder-loading #result-total-area-,.placeholder-loading #result-num-panels-,.placeholder-loading #result-array-size-,.placeholder-loading #result-pv-output-,.placeholder-loading #result-carbon-saving-,.placeholder-loading #result-cost-saving- { color:var(--placeholder-color) !important; } .placeholder-loading .results-values div { background-color:transparent; border-color:transparent; } .placeholder-loading .results-header { opacity:0.7; } .placeholder-loading .results-breakdown-wrapper::before { content:"Location breakdown will display here"; display:block; text-align:center; color:var(--placeholder-color); padding:30px 10px; font-size:0.9em; } .placeholder-loading .results-breakdown-wrapper .results-breakdown-table { display:none; } .placeholder-loading .results-breakdown-wrapper h4 { display:none; } .placeholder-loading .additional-info { display:none; } .dsr-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.7) ; display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:opacity 0.3s ease,visibility 0.3s ease; padding:20px; } .dsr-modal-overlay.active { opacity:1; visibility:visible; } .dsr-modal-content { background-color:var(--background-dark); color:var(--text-body); padding:30px 35px; border-radius:var(--border-radius); border:1px solid var(--border-color); box-shadow:0 5px 15px rgba(0,0,0,.3) ; position:relative; max-width:550px; width:100%; max-height:90vh; overflow-y:auto; transform:scale(0.9); transition:transform 0.3s ease; } .dsr-modal-overlay.active .dsr-modal-content { transform:scale(1); } .dsr-modal-content h4 { color:var(--text-body); margin:0 0 10px 0; text-align:center; font-size:1.5em; font-weight:var(--font-semibold); } .dsr-modal-content p { color:var(--text-body); text-align:center; margin:0 0 20px 0; font-size:1em; } .dsr-modal-close { position:absolute; top:10px; right:15px; background:none; border:none; font-size:2rem; line-height:1; color:var(--brand-grey); cursor:pointer; padding:5px; opacity:0.7; transition:opacity 0.2s ease; } .dsr-modal-close:hover { opacity:1; } #hubspotFormContainer- .hs-form fieldset { max-width:none !important; } #hubspotFormContainer- .hs-form legend,#hubspotFormContainer- .hs-form label { color:var(--text-body)!important; } #hubspotFormContainer- .hs-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),#hubspotFormContainer- .hs-form textarea,#hubspotFormContainer- .hs-form select { background-color:var(--background-light)!important; color:var(--text-body)!important; border-color:var(--border-color)!important; } #hubspotFormContainer- .hs-form .hs-button { width:100%; background-color:var(--secondary-color) !important; border-color:var(--secondary-color) !important; } #hubspotFormContainer- .hs-form .hs-button:hover { background-color:#c53743 !important; border-color:#c53743 !important; } #hubspotFormContainer- .hs-form .hs_error_rollup label { color:var(--error-color) !important; } #hubspotFormContainer- .hs-form .hs-error-msg { color:var(--error-color) !important; } form,.submitted-message { background-color:transparent!important; border:none!important; } h3.form-title { display:none!important;} body form .hs-input:hover,body form .hs-search-field__input:hover,body form select:hover,body form #hs-pwd-widget-password:hover,body form textarea:hover { } th,td { background-color:transparent!important; } @media (max-width:1024px) { .solar-calculator-module { padding:25px; } .input-section { grid-template-columns:1fr; gap:30px; } .results-section { margin-top:0; } } @media (max-width:767px) { .solar-calculator-module { padding:20px; } .input-section { gap:25px; } .solar-calculator-module h2 { font-size:1.5em; margin-bottom:20px; } .region-selector,.building-inputs { padding:15px; } .building-input-fields { gap:15px; } .solar-calculator-module label { font-size:0.85em; } .solar-calculator-module input[type="number"],.solar-calculator-module select { font-size:0.95em; padding:10px 12px; } .calculate-btn,.expert-cta-btn { font-size:1em; padding:12px 20px; } .add-building-btn { width:32px; height:32px; font-size:1.3em; } .remove-building-btn { width:24px; height:24px; font-size:1em; top:12px; right:12px;} .results-header,.results-values { grid-template-columns:repeat(3,1fr); } .results-header { font-size:0.75em; } .results-values div { font-size:1.2em; min-height:50px; } .results-breakdown-wrapper { margin-top:20px; padding-top:20px; min-height:auto; overflow-x:visible; } .results-breakdown-table thead { display:none; } .results-breakdown-table tbody,.results-breakdown-table tr,.results-breakdown-table td { display:block; width:100%; } .results-breakdown-table tr { margin-bottom:15px; border:1px solid var(--border-color); border-left:3px solid var(--brand-red); border-radius:var(--border-radius); padding:15px; background-color:var(--background-dark); } .results-breakdown-table tr:last-child { margin-bottom:0; } .results-breakdown-table td { border:none; padding:5px 0; text-align:right; position:relative; border-bottom:1px dashed var(--border-color); } .results-breakdown-table td:last-child { border-bottom:none; padding-bottom:0; } .results-breakdown-table td:first-child { text-align:left; font-weight:var(--font-semibold); font-size:1.1em; padding-bottom:10px; margin-bottom:10px; } .results-breakdown-table td::before { content:attr(data-label); position:absolute; left:0; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight:var(--font-medium); color:var(--placeholder-color); opacity:0.9; } .results-breakdown-table td:first-child::before { content:none; } .additional-info { margin-top:20px; padding-top:20px; } .additional-info p { font-size:0.9em; } .dsr-modal-content { padding:25px; } .dsr-modal-content h4 { font-size:1.3em; } } @media (max-width:480px) { .solar-calculator-module { padding:15px; border-radius:0; } .input-section { gap:20px; } .solar-calculator-module h2 { font-size:1.3em; } .building-input-fields { grid-template-columns:1fr; } .solar-calculator-module input[type="number"],.solar-calculator-module select { font-size:0.9em; } .results-header,.results-values { grid-template-columns:repeat(2,1fr); } .results-values div { font-size:1.1em; } .results-breakdown-table td { font-size:0.9em; } .results-breakdown-table td::before { width:40%; font-size:0.9em; } .calculate-btn,.expert-cta-btn { font-size:0.95em; padding:10px 15px; } .dsr-modal-content { padding:20px; } .dsr-modal-content h4 { font-size:1.2em; } .dsr-modal-content p { font-size:0.9em; } } @media (max-width:400px) { .input-section { gap:20px; } .building-input-fields { grid-template-columns:1fr; } input,select { font-size:0.9em; } .results-header,.results-values { grid-template-columns:repeat(2,1fr); } } -red:#E44755;--brand-blue-light:#2a3f5f;--brand-blue-medium:#4a5f7f;--primary-color:var(--brand-blue);--primary-dark:var(--brand-blue);--primary-light:var(--brand-blue-light);--secondary-color:var(--brand-red);--text-heading:var(--brand-grey);--text-body:var(--brand-grey);--text-body-alt:var(--brand-grey);--text-light-contrast:#fff;--background-light:#1f2e4a;--background-dark:#17263d;--background-grey:#17263d;--border-color:#4a5f7f;--placeholder-color:#6a7f9f;--error-color:var(--brand-red);--error-background:#fdeaec;--border-radius:6px;--box-shadow:0 3px 5px rgba(0,0,0,.15);--transition-speed:0.3s;--font-semibold:600;--font-medium:500;--font-regular:400;--font-light:300}.solar-calculator-module *,.solar-calculator-module :after,.solar-calculator-module :before{box-sizing:border-box}.solar-calculator-module{background-color:var(--background-dark)!important;border-radius:var(--border-radius);color:var(--text-body);font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:var(--font-regular);line-height:1.6;margin:30px auto;max-width:1600px;overflow:hidden;padding:30px 35px}.solar-calculator-module h2{color:var(--text-body)!important;font-size:1.8em;font-weight:var(--font-semibold);margin:0 0 30px;text-align:center}.solar-calculator-module h4{color:var(--text-body);font-size:1.1em;font-weight:var(--font-medium);margin:0 0 10px;opacity:.9;padding:0}.results-breakdown-wrapper h4{font-size:1.2em;margin-bottom:15px;text-align:center}.input-section{align-items:center;display:grid;gap:40px;grid-template-columns:1fr 1fr}.dimension-inputs p{color:var(--text-body);font-size:1em;font-weight:var(--font-regular);margin:0 0 20px;text-align:left}.building-inputs,.region-selector{background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:var(--border-radius);margin-bottom:20px;padding:20px;position:relative}.building-input-fields>div,.region-selector{margin-bottom:18px}.building-input-fields>div:last-child,.region-selector:last-child{margin-bottom:0}.building-input-fields{display:grid;gap:20px;grid-template-columns:1fr 1fr}.solar-calculator-module label{color:var(--text-body);display:block;font-size:.9em;font-weight:var(--font-medium);margin:0 0 8px;padding:0;text-transform:uppercase}.solar-calculator-module input[type=number],.solar-calculator-module select{background-color:var(--background-light);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-body);font-family:inherit;font-size:1em;margin:0;padding:12px 15px;transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease;width:100%}.solar-calculator-module select{color-scheme:dark;cursor:pointer}.solar-calculator-module input[type=number]:hover,.solar-calculator-module select:hover{border-color:var(--brand-red)!important}.solar-calculator-module input[type=number]:focus,.solar-calculator-module select:focus{border-color:var(--brand-red);box-shadow:0 0 0 3px rgba(228,71,85,.25);outline:none}.solar-calculator-module input.invalid-input{border-color:var(--error-color)!important;box-shadow:0 0 0 3px rgba(228,71,85,.25)!important}.calculate-btn{align-items:center;background-color:var(--brand-red);background-image:none;border:none;border-radius:var(--border-radius);box-shadow:0 2px 4px rgba(0,0,0,.1);color:var(--text-light-contrast);cursor:pointer;display:inline-flex;font-size:1.1em;font-weight:var(--font-medium);gap:8px;justify-content:center;margin-top:10px;padding:14px 25px;text-align:center;text-decoration:none;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease,background-color var(--transition-speed) ease;width:100%}.calculate-btn:hover{background-color:#c53743;box-shadow:0 6px 10px rgba(0,0,0,.15);color:var(--text-light-contrast);transform:translateY(-2px)}.calculate-btn:active{background-color:#b32d39;box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(0)}.add-building-btn,.remove-building-btn{align-items:center;background-color:var(--brand-blue-medium);border:1px solid var(--border-color);border-radius:50%;color:var(--text-light-contrast);cursor:pointer;display:flex;font-size:1.5em;font-weight:700;height:36px;justify-content:center;line-height:1;margin:15px auto 0;padding:0;transition:background-color var(--transition-speed) ease,transform var(--transition-speed) ease;width:36px}.add-building-btn:hover,.remove-building-btn:hover{background-color:var(--brand-blue-light);transform:scale(1.05)}.remove-building-btn{background-color:var(--brand-red);border-color:var(--brand-red);font-size:1.2em;height:28px;margin:0;position:absolute;right:15px;top:15px;width:28px}.remove-building-btn:hover{background-color:#c53743}.calculate-button-container{margin-top:20px}.error-message{background-color:var(--error-background);border-left:1px solid var(--brand-red);border:1px solid var(--brand-red);border-left-width:3px;border-radius:4px;color:#000;display:none;font-size:.9em;font-weight:var(--font-regular);margin:0 0 10px;min-height:1.2em;padding:10px 12px;text-align:center;width:100%}.results-section{background-color:var(--background-light);border-left:1px solid var(--border-color);border:1px solid var(--border-color);border-left-width:5px;border-radius:var(--border-radius);opacity:1;padding:25px;transition:opacity .5s ease,border-left-color .5s ease}.results-section:not(.placeholder-loading){border-left-color:var(--brand-red)}.results-header,.results-values{display:grid;gap:10px;grid-template-columns:repeat(6,1fr);margin-bottom:10px;text-align:center}.results-header{border-bottom:1px solid var(--border-color);color:var(--text-body);font-size:.85em;font-weight:var(--font-medium);opacity:.8;padding-bottom:10px}.results-values div{align-items:center;background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-body);display:flex;font-size:1.4em;font-weight:var(--font-semibold);justify-content:center;line-height:1.2;min-height:60px;padding:10px 5px}.results-breakdown-wrapper{border-top:1px dashed var(--border-color);margin-top:25px;min-height:100px;padding-top:25px;position:relative}.results-breakdown-table{border-collapse:collapse;font-size:.9em;width:100%}.results-breakdown-table td,.results-breakdown-table th{border:1px solid var(--border-color);color:var(--text-body);font-weight:var(--font-regular);padding:8px 10px;text-align:right}.results-breakdown-table th{background-color:var(--primary-light);color:var(--text-body);font-weight:var(--font-medium);text-align:center;white-space:nowrap}.results-breakdown-table td:first-child{font-weight:var(--font-medium);text-align:left}.additional-info{border-top:1px dashed var(--border-color);margin-top:25px;padding-top:25px;text-align:center}.additional-info p{color:var(--text-body);font-size:1em;font-weight:var(--font-regular);margin:0 0 20px;opacity:.9;padding:0}.expert-cta-btn{align-items:center;background-color:var(--secondary-color);border:none;border-radius:var(--border-radius);color:var(--text-light-contrast);cursor:pointer;display:inline-block;font-size:1.1em;font-weight:var(--font-medium);gap:8px;margin:0;padding:12px 30px;text-decoration:none;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease,background-color var(--transition-speed) ease;width:auto}.expert-cta-btn:hover{background-color:#c53743;box-shadow:0 6px 10px rgba(0,0,0,.15);color:var(--text-light-contrast);transform:translateY(-2px)}.expert-cta-btn:active{background-color:#b32d39;transform:translateY(0)}.placeholder-loading #result-array-size-,.placeholder-loading #result-carbon-saving-,.placeholder-loading #result-cost-saving-,.placeholder-loading #result-num-panels-,.placeholder-loading #result-pv-output-,.placeholder-loading #result-total-area-,.placeholder-loading .results-values span{color:var(--placeholder-color)!important}.placeholder-loading .results-values div{background-color:transparent;border-color:transparent}.placeholder-loading .results-header{opacity:.7}.placeholder-loading .results-breakdown-wrapper:before{color:var(--placeholder-color);content:"Location breakdown will display here";display:block;font-size:.9em;padding:30px 10px;text-align:center}.placeholder-loading .additional-info,.placeholder-loading .results-breakdown-wrapper .results-breakdown-table,.placeholder-loading .results-breakdown-wrapper h4{display:none}.dsr-modal-overlay{align-items:center;background-color:rgba(0,0,0,.7);display:flex;height:100%;justify-content:center;left:0;opacity:0;padding:20px;position:fixed;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden;width:100%;z-index:1000}.dsr-modal-overlay.active{opacity:1;visibility:visible}.dsr-modal-content{background-color:var(--background-dark);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 5px 15px rgba(0,0,0,.3);color:var(--text-body);max-height:90vh;max-width:550px;overflow-y:auto;padding:30px 35px;position:relative;transform:scale(.9);transition:transform .3s ease;width:100%}.dsr-modal-overlay.active .dsr-modal-content{transform:scale(1)}.dsr-modal-content h4{color:var(--text-body);font-size:1.5em;font-weight:var(--font-semibold);margin:0 0 10px;text-align:center}.dsr-modal-content p{color:var(--text-body);font-size:1em;margin:0 0 20px;text-align:center}.dsr-modal-close{background:none;border:none;color:var(--brand-grey);cursor:pointer;font-size:2rem;line-height:1;opacity:.7;padding:5px;position:absolute;right:15px;top:10px;transition:opacity .2s ease}.dsr-modal-close:hover{opacity:1}#hubspotFormContainer- .hs-form fieldset{max-width:none!important}#hubspotFormContainer- .hs-form label,#hubspotFormContainer- .hs-form legend{color:var(--text-body)!important}#hubspotFormContainer- .hs-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),#hubspotFormContainer- .hs-form select,#hubspotFormContainer- .hs-form textarea{background-color:var(--background-light)!important;border-color:var(--border-color)!important;color:var(--text-body)!important}#hubspotFormContainer- .hs-form .hs-button{background-color:var(--secondary-color)!important;border-color:var(--secondary-color)!important;width:100%}#hubspotFormContainer- .hs-form .hs-button:hover{background-color:#c53743!important;border-color:#c53743!important}#hubspotFormContainer- .hs-form .hs-error-msg,#hubspotFormContainer- .hs-form .hs_error_rollup label{color:var(--error-color)!important}.submitted-message,form{background-color:transparent!important;border:none!important}h3.form-title{display:none!important}td,th{background-color:transparent!important}@media (max-width:1024px){.solar-calculator-module{padding:25px}.input-section{gap:30px;grid-template-columns:1fr}.results-section{margin-top:0}}@media (max-width:767px){.solar-calculator-module{padding:20px}.input-section{gap:25px}.solar-calculator-module h2{font-size:1.5em;margin-bottom:20px}.building-inputs,.region-selector{padding:15px}.building-input-fields{gap:15px}.solar-calculator-module label{font-size:.85em}.solar-calculator-module input[type=number],.solar-calculator-module select{font-size:.95em;padding:10px 12px}.calculate-btn,.expert-cta-btn{font-size:1em;padding:12px 20px}.add-building-btn{font-size:1.3em;height:32px;width:32px}.remove-building-btn{font-size:1em;height:24px;right:12px;top:12px;width:24px}.results-header,.results-values{grid-template-columns:repeat(3,1fr)}.results-header{font-size:.75em}.results-values div{font-size:1.2em;min-height:50px}.results-breakdown-wrapper{margin-top:20px;min-height:auto;overflow-x:visible;padding-top:20px}.results-breakdown-table thead{display:none}.results-breakdown-table tbody,.results-breakdown-table td,.results-breakdown-table tr{display:block;width:100%}.results-breakdown-table tr{background-color:var(--background-dark);border:1px solid var(--border-color);border-left:3px solid var(--brand-red);border-radius:var(--border-radius);margin-bottom:15px;padding:15px}.results-breakdown-table tr:last-child{margin-bottom:0}.results-breakdown-table td{border:none;border-bottom:1px dashed var(--border-color);padding:5px 0;position:relative;text-align:right}.results-breakdown-table td:last-child{border-bottom:none;padding-bottom:0}.results-breakdown-table td:first-child{font-size:1.1em;font-weight:var(--font-semibold);margin-bottom:10px;padding-bottom:10px;text-align:left}.results-breakdown-table td:before{color:var(--placeholder-color);content:attr(data-label);font-weight:var(--font-medium);left:0;opacity:.9;padding-right:10px;position:absolute;text-align:left;white-space:nowrap;width:45%}.results-breakdown-table td:first-child:before{content:none}.additional-info{margin-top:20px;padding-top:20px}.additional-info p{font-size:.9em}.dsr-modal-content{padding:25px}.dsr-modal-content h4{font-size:1.3em}}@media (max-width:480px){.solar-calculator-module{border-radius:0;padding:15px}.input-section{gap:20px}.solar-calculator-module h2{font-size:1.3em}.building-input-fields{grid-template-columns:1fr}.solar-calculator-module input[type=number],.solar-calculator-module select{font-size:.9em}.results-header,.results-values{grid-template-columns:repeat(2,1fr)}.results-values div{font-size:1.1em}.results-breakdown-table td{font-size:.9em}.results-breakdown-table td:before{font-size:.9em;width:40%}.calculate-btn,.expert-cta-btn{font-size:.95em;padding:10px 15px}.dsr-modal-content{padding:20px}.dsr-modal-content h4{font-size:1.2em}.dsr-modal-content p{font-size:.9em}}