/* =========================================
THERMAX V3 CALCULATOR
GLOBAL
========================================= */
.thermax-v3-calculator-form,
.thermax-v3-calculator-form *,
.thermax-v3-result-popup,
.thermax-v3-result-popup * {
box-sizing: border-box;
}
/* =========================================
FORM WRAPPER
========================================= */
.thermax-v3-calculator-form {
width: 100%;
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
/* =========================================
FIELD
========================================= */
.thermax-v3-field {
width: 100%;
margin: 0 0 18px 0;
}
/* =========================================
LABEL
========================================= */
.thermax-v3-label {
display: block;
margin: 0 0 7px 0;
color: #404040;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.35;
text-transform: uppercase;
letter-spacing: 0.01em;
}
/* =========================================
INPUT + SELECT
========================================= */
.thermax-v3-field input,
.thermax-v3-field select {
display: block;
width: 100%;
height: 46px;
margin: 0;
padding: 10px 14px;
background: #FFFFFF;
color: #242424;
border: 1px solid #D9D9D9;
border-radius: 9px;
outline: none;
box-shadow: none;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.thermax-v3-field input:focus,
.thermax-v3-field select:focus {
border-color: #A6A6A6;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.025);
}
/* =========================================
READONLY EFFICIENCY FIELD
========================================= */
.thermax-v3-field input[readonly] {
background: #FFFFFF !important;
color: #242424 !important;
border: 1px solid #D9D9D9 !important;
opacity: 1 !important;
}
/* =========================================
SELECT
========================================= */
.thermax-v3-field select {
cursor: pointer;
}
/* =========================================
TWO COLUMN
========================================= */
.thermax-v3-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
width: 100%;
}
/* =========================================
EQUIPMENT TABS
========================================= */
.thermax-v3-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
}
.thermax-v3-tab {
min-height: 46px;
padding: 9px 10px;
background: #FFFFFF !important;
color: #404040 !important;
border: 1px solid #D7D7D7 !important;
border-radius: 9px !important;
outline: none !important;
box-shadow: none !important;
font-family: "Poppins", sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
text-align: center;
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease,
background-color 0.2s ease;
}
.thermax-v3-tab:hover {
border-color: #BEBEBE !important;
}
.thermax-v3-tab.active {
background: #FFF7F7 !important;
color: #ED1C24 !important;
border-color: #ED1C24 !important;
}
.thermax-v3-tab:focus,
.thermax-v3-tab:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* =========================================
CALCULATE BUTTON
========================================= */
.thermax-v3-calc-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
margin: 2px 0 0 0;
padding: 12px 18px;
background: #ED1C24 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 9px !important;
outline: none !important;
box-shadow: none !important;
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.thermax-v3-calc-button:hover {
background: #D91920 !important;
transform: translateY(-1px);
}
.thermax-v3-calc-button:active {
transform: translateY(0);
}
/* =========================================
RESULT POPUP OVERLAY
========================================= */
.thermax-v3-result-popup {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.55);
z-index: 999999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}
.thermax-v3-result-popup.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* =========================================
RESULT CARD
========================================= */
.thermax-v3-result-card {
position: relative;
width: 100%;
max-width: 410px;
margin: 0;
padding: 28px 26px 24px;
background: #F8F8F7;
border-radius: 20px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.22);
transform: translateY(10px) scale(0.985);
transition:
transform 0.25s ease;
font-family: "Poppins", sans-serif;
}
.thermax-v3-result-popup.is-open
.thermax-v3-result-card {
transform: translateY(0) scale(1);
}
/* =========================================
RESULT HEADER
========================================= */
.thermax-v3-result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 22px 0;
}
.thermax-v3-result-title-wrap {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.thermax-v3-result-title {
flex: 0 0 auto;
color: #ED1C24;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
.thermax-v3-result-title-line {
display: block;
flex: 1;
height: 1px;
background: #D5D5D5;
}
/* =========================================
CLOSE BUTTON
========================================= */
.thermax-v3-result-close {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
background: transparent !important;
color: #1F1F1F !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
font-family: Arial, sans-serif !important;
font-size: 27px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer;
}
.thermax-v3-result-close:hover {
color: #ED1C24 !important;
}
/* =========================================
RESULT BOX
========================================= */
.thermax-v3-result-box {
width: 100%;
padding: 20px 18px;
background: #F3F3F2;
border: 1.5px solid #ED1C24;
border-radius: 18px;
}
/* =========================================
RESULT ROW
========================================= */
.thermax-v3-result-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.thermax-v3-result-label {
color: #3B3B3B;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
.thermax-v3-result-value {
flex: 0 0 auto;
color: #191919;
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
text-align: right;
}
.thermax-v3-result-saving {
color: #ED1C24;
font-size: 25px;
}
/* =========================================
RESULT DIVIDER
========================================= */
.thermax-v3-result-divider {
width: 100%;
height: 1px;
margin: 18px 0;
background: #D4D4D4;
}
/* =========================================
BOTTOM DIVIDER
========================================= */
.thermax-v3-result-bottom-line {
width: 100%;
height: 1px;
margin: 22px 0 14px;
background: #D7D7D7;
}
/* =========================================
DISCLAIMER
========================================= */
.thermax-v3-result-disclaimer {
margin: 0;
padding: 0;
color: #777777;
font-family: "Poppins", sans-serif;
font-size: 9.5px;
font-weight: 400;
line-height: 1.55;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1024px) {
.thermax-v3-result-popup {
padding: 18px;
}
.thermax-v3-result-card {
max-width: 390px;
padding: 26px 24px 22px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.thermax-v3-field {
margin-bottom: 16px;
}
.thermax-v3-two-col {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.thermax-v3-tabs {
gap: 8px;
}
.thermax-v3-tab {
min-height: 44px;
padding: 8px 7px;
font-size: 11px !important;
}
.thermax-v3-label {
font-size: 11px;
}
.thermax-v3-field input,
.thermax-v3-field select {
height: 44px;
padding: 9px 11px;
font-size: 12px;
}
.thermax-v3-calc-button {
min-height: 49px;
font-size: 13px !important;
}
.thermax-v3-result-popup {
padding: 12px;
}
.thermax-v3-result-card {
max-width: 370px;
padding: 24px 20px 20px;
border-radius: 18px;
}
.thermax-v3-result-header {
margin-bottom: 18px;
}
.thermax-v3-result-title {
font-size: 17px;
}
.thermax-v3-result-box {
padding: 18px 16px;
border-radius: 16px;
}
.thermax-v3-result-value {
font-size: 20px;
}
.thermax-v3-result-saving {
font-size: 22px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.thermax-v3-two-col {
grid-template-columns: 1fr;
gap: 0;
}
.thermax-v3-tabs {
grid-template-columns: 1fr 1fr;
}
.thermax-v3-tab {
padding: 8px 5px;
font-size: 10.5px !important;
}
.thermax-v3-result-card {
width: 100%;
max-width: 350px;
padding: 22px 17px 19px;
border-radius: 16px;
}
.thermax-v3-result-row {
gap: 12px;
}
.thermax-v3-result-label {
font-size: 10.5px;
}
.thermax-v3-result-value {
font-size: 18px;
}
.thermax-v3-result-saving {
font-size: 20px;
}
.thermax-v3-result-disclaimer {
font-size: 9px;
}
}
/* =========================================
VERY SMALL MOBILE
========================================= */
@media (max-width: 360px) {
.thermax-v3-tab {
font-size: 9.5px !important;
}
.thermax-v3-result-card {
padding: 20px 14px 18px;
}
.thermax-v3-result-box {
padding: 16px 13px;
}
.thermax-v3-result-row {
align-items: flex-start;
}
.thermax-v3-result-label {
flex: 0 0 42%;
}
.thermax-v3-result-value {
flex: 1;
min-width: 0;
font-size: 17px;
overflow-wrap: anywhere;
}
.thermax-v3-result-saving {
font-size: 18px;
}
}
/* =========================================
RESULT POPUP - TABLET & MOBILE FIX
========================================= */
@media (max-width: 1024px) {
.thermax-v3-result-popup {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.thermax-v3-result-card {
width: 100% !important;
max-width: 380px !important;
margin-left: auto !important;
margin-right: auto !important;
left: auto !important;
right: auto !important;
}
}
/* =========================================
MOBILE RESULT POPUP
========================================= */
@media (max-width: 767px) {
.thermax-v3-result-popup {
padding: 16px !important;
align-items: center !important;
justify-content: center !important;
}
.thermax-v3-result-card {
width: calc(100% - 32px) !important;
max-width: 330px !important;
margin: 0 auto !important;
padding: 22px 18px 20px !important;
}
}
/* =========================================
SMALL MOBILE RESULT POPUP
========================================= */
@media (max-width: 480px) {
.thermax-v3-result-popup {
padding: 14px !important;
}
.thermax-v3-result-card {
width: calc(100% - 28px) !important;
max-width: 310px !important;
margin: 0 auto !important;
padding: 20px 16px 18px !important;
border-radius: 16px !important;
}
.thermax-v3-result-title {
font-size: 16px !important;
}
.thermax-v3-result-saving {
font-size: 19px !important;
}
.thermax-v3-result-value {
font-size: 17px !important;
}
}
/* =========================================
RESULT POPUP - TRUE VIEWPORT CENTER FIX
========================================= */
.thermax-v3-result-popup {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw !important;
max-width: none !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
padding: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
box-sizing: border-box !important;
z-index: 9999999 !important;
}
/* =========================================
TABLET POPUP
========================================= */
@media (max-width: 1024px) {
.thermax-v3-result-popup {
width: 100vw !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
padding: 20px !important;
}
.thermax-v3-result-card {
position: relative !important;
width: 360px !important;
max-width: calc(100vw - 40px) !important;
margin: 0 !important;
left: auto !important;
right: auto !important;
}
}
/* =========================================
MOBILE POPUP
========================================= */
@media (max-width: 767px) {
.thermax-v3-result-popup {
left: 50% !important;
right: auto !important;
width: 100vw !important;
transform: translateX(-50%) !important;
padding: 16px !important;
align-items: center !important;
justify-content: center !important;
}
.thermax-v3-result-card {
position: relative !important;
width: 320px !important;
max-width: calc(100vw - 40px) !important;
margin: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
.thermax-v3-result-popup.is-open
.thermax-v3-result-card {
transform: none !important;
}
}
/* =========================================
SMALL MOBILE POPUP
========================================= */
@media (max-width: 480px) {
.thermax-v3-result-popup {
padding: 14px !important;
}
.thermax-v3-result-card {
width: 300px !important;
max-width: calc(100vw - 32px) !important;
margin: 0 !important;
padding: 20px 16px 18px !important;
}
}
/* =========================================
THERMAX V3 CALCULATOR
FUEL DATA
========================================= */
const thermaxFuelData = {
fo: {
cv: 9650,
unit: "kg",
price: 55,
effPercent: 88,
eff: 0.88,
name: "FO"
},
hsd: {
cv: 10200,
unit: "L",
price: 95,
effPercent: 88,
eff: 0.88,
name: "HSD"
},
briquette: {
cv: 4500,
unit: "kg",
price: 7,
effPercent: 70,
eff: 0.70,
name: "Briquette"
},
coal: {
cv: 5000,
unit: "kg",
price: 9,
effPercent: 70,
eff: 0.70,
name: "Coal"
},
ng: {
cv: 8500,
unit: "SCM",
price: 48,
effPercent: 88,
eff: 0.88,
name: "NG"
},
lpg: {
cv: 11000,
unit: "kg",
price: 90,
effPercent: 88,
eff: 0.88,
name: "LPG"
}
};
/* =========================================
CONSTANTS
========================================= */
const THERMAX_STEAM_FACTOR = 540;
let thermaxCurrentEquip = "boiler";
/* =========================================
EQUIPMENT TAB
========================================= */
function thermaxSetEquip(type) {
thermaxCurrentEquip = type;
const boilerButton =
document.getElementById("thermax-btn-boiler");
const hwgButton =
document.getElementById("thermax-btn-hwg");
const boilerField =
document.getElementById("thermax-field-boiler");
const hwgField =
document.getElementById("thermax-field-hwg");
if (boilerButton) {
boilerButton.classList.toggle(
"active",
type === "boiler"
);
}
if (hwgButton) {
hwgButton.classList.toggle(
"active",
type === "hwg"
);
}
if (boilerField) {
boilerField.style.display =
type === "boiler"
? "block"
: "none";
}
if (hwgField) {
hwgField.style.display =
type === "hwg"
? "block"
: "none";
}
thermaxCalculate();
}
/* =========================================
UPDATE FUEL DEFAULTS
========================================= */
function thermaxUpdateFuelDefaults() {
const fuelSelect =
document.getElementById(
"thermax-fuel-type"
);
if (!fuelSelect) {
return;
}
const fuelType =
fuelSelect.value;
const fuel =
thermaxFuelData[fuelType];
if (!fuel) {
return;
}
const priceField =
document.getElementById(
"thermax-fuel-price"
);
if (priceField) {
priceField.value =
fuel.price;
}
const efficiencyField =
document.getElementById(
"thermax-efficiency-display"
);
if (efficiencyField) {
efficiencyField.value =
fuel.effPercent
+
"% (auto-calculated for "
+
fuel.name
+
")";
}
thermaxCalculate();
}
/* =========================================
INR FORMATTER
========================================= */
function thermaxFmtINR(num) {
if (
isNaN(num)
||
!isFinite(num)
) {
return "—";
}
return "₹"
+
Math.round(num)
.toLocaleString("en-IN");
}
/* =========================================
MAIN CALCULATION
========================================= */
function thermaxCalculate() {
const fuelSelect =
document.getElementById(
"thermax-fuel-type"
);
if (!fuelSelect) {
return;
}
const fuelType =
fuelSelect.value;
const fuel =
thermaxFuelData[fuelType];
if (!fuel) {
return;
}
const priceField =
document.getElementById(
"thermax-fuel-price"
);
const price =
priceField
? parseFloat(priceField.value) || 0
: 0;
const hoursField =
document.getElementById(
"thermax-op-hours"
);
const hours =
hoursField
? parseFloat(hoursField.value) || 0
: 0;
const daysField =
document.getElementById(
"thermax-op-days"
);
const days =
daysField
? parseFloat(daysField.value) || 0
: 0;
let capacity = 0;
let baseFuelValue = 0;
/* =========================================
BOILER
((Capacity × 540) / GCV)
× Efficiency
========================================= */
if (thermaxCurrentEquip === "boiler") {
const capacityField =
document.getElementById(
"thermax-boiler-capacity"
);
capacity =
capacityField
? parseFloat(capacityField.value) || 0
: 0;
baseFuelValue =
(
(
capacity
*
THERMAX_STEAM_FACTOR
)
/
fuel.cv
)
*
fuel.eff;
}
/* =========================================
HOT WATER GENERATOR
Capacity / GCV
× Efficiency
========================================= */
else {
const capacityField =
document.getElementById(
"thermax-hwg-capacity"
);
capacity =
capacityField
? parseFloat(capacityField.value) || 0
: 0;
baseFuelValue =
(
capacity
/
fuel.cv
)
*
fuel.eff;
}
/* =========================================
ANNUAL SAVINGS
========================================= */
const annualSavings =
baseFuelValue
*
hours
*
days
*
price
*
12;
const savingsResult =
document.getElementById(
"thermax-r-savings"
);
if (savingsResult) {
savingsResult.textContent =
thermaxFmtINR(
annualSavings
);
}
const paybackResult =
document.getElementById(
"thermax-r-payback"
);
if (paybackResult) {
paybackResult.textContent =
"2–3 Years";
}
return annualSavings;
}
/* =========================================
CALCULATE + OPEN POPUP
========================================= */
function thermaxCalculateAndOpenPopup() {
thermaxCalculate();
const popup =
document.getElementById(
"thermax-result-popup"
);
if (!popup) {
return;
}
popup.classList.add("is-open");
popup.setAttribute(
"aria-hidden",
"false"
);
document.body.style.overflow =
"hidden";
}
/* =========================================
CLOSE POPUP
========================================= */
function thermaxCloseResultPopup() {
const popup =
document.getElementById(
"thermax-result-popup"
);
if (!popup) {
return;
}
popup.classList.remove("is-open");
popup.setAttribute(
"aria-hidden",
"true"
);
document.body.style.overflow =
"";
}
/* =========================================
OUTSIDE CLICK
========================================= */
document.addEventListener(
"click",
function(event) {
const popup =
document.getElementById(
"thermax-result-popup"
);
if (
popup
&&
event.target === popup
) {
thermaxCloseResultPopup();
}
}
);
/* =========================================
ESCAPE KEY
========================================= */
document.addEventListener(
"keydown",
function(event) {
if (event.key === "Escape") {
const popup =
document.getElementById(
"thermax-result-popup"
);
if (
popup
&&
popup.classList.contains(
"is-open"
)
) {
thermaxCloseResultPopup();
}
}
}
);
/* =========================================
INITIALIZE
========================================= */
function thermaxInitCalculatorV3() {
thermaxCurrentEquip =
"boiler";
thermaxUpdateFuelDefaults();
}
/* =========================================
PAGE LOAD
========================================= */
if (
document.readyState
===
"loading"
) {
document.addEventListener(
"DOMContentLoaded",
thermaxInitCalculatorV3
);
}
else {
thermaxInitCalculatorV3();
}
