Build a Premium Renovation Calculator in Elementor Pro
ОНЛАЙН-КАЛЬКУЛЯТОР СТОИМОСТИ
1
ПЛОЩАДЬ
20 м²
20 м²200
2
ТИП РЕМОНТА
3
УРОВЕНЬ МАТЕРИАЛОВ
4
ДИЗАЙН-ПРОЕКТ
5
СРОК ВЫПОЛНЕНИЯ
HTML+JS
<div class="repair-calc">
<div class="calc-top">
<div class="calc-title">ОНЛАЙН-КАЛЬКУЛЯТОР СТОИМОСТИ</div>
<button class="calc-reset" type="button">Сбросить</button>
</div>
<div class="calc-body">
<div class="calc-row">
<div class="step-num">1</div>
<div class="step-title">ПЛОЩАДЬ</div>
<div class="step-content area-content">
<div class="range-top"><span>20</span> м²</div>
<input type="range" min="20" max="200" value="20" class="range-slider">
<div class="range-bottom">
<span>20 м²</span>
<span>200</span>
</div>
</div>
</div>
<div class="calc-row">
<div class="step-num">2</div>
<div class="step-title">ТИП РЕМОНТА</div>
<div class="step-content buttons-grid">
<button class="calc-btn active" type="button" data-type="repair" data-key="modern">Современный</button>
<button class="calc-btn" type="button" data-type="repair" data-key="cosmetic">Косметический</button>
<button class="calc-btn" type="button" data-type="repair" data-key="premium">Премиум</button>
</div>
</div>
<div class="calc-row">
<div class="step-num">3</div>
<div class="step-title">УРОВЕНЬ МАТЕРИАЛОВ</div>
<div class="step-content two-grid">
<button class="calc-btn active" type="button" data-type="materials" data-key="standard">Стандарт</button>
<button class="calc-btn" type="button" data-type="materials" data-key="premium">Премиум</button>
</div>
</div>
<div class="calc-row">
<div class="step-num">4</div>
<div class="step-title">ДИЗАЙН-ПРОЕКТ</div>
<div class="step-content two-grid">
<button class="calc-btn active" type="button" data-type="design" data-key="none">Не нужен</button>
<button class="calc-btn" type="button" data-type="design" data-key="full">Полный</button>
</div>
</div>
<div class="calc-row">
<div class="step-num">5</div>
<div class="step-title">СРОК ВЫПОЛНЕНИЯ</div>
<div class="step-content term-grid">
<button class="calc-btn active" type="button" data-type="term" data-key="two">2 мес.</button>
<button class="calc-btn" type="button" data-type="term" data-key="four">4 мес.</button>
<button class="calc-btn" type="button" data-type="term" data-key="six">6 мес.</button>
<button class="calc-btn" type="button" data-type="term" data-key="eight">8 мес.</button>
</div>
</div>
</div>
<div class="calc-preview">
<div class="preview-left">
<button class="mini-card active" type="button" data-big="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025156.webp">
<img decoding="async" loading="lazy" src="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025156.webp" alt="Пример сайта Gold Designs" fetchpriority="low">
<span>Современный</span>
</button>
<button class="mini-card" type="button" data-big="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025630.webp">
<img decoding="async" loading="lazy" src="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025630.webp" alt="Пример сайта Gold Designs" fetchpriority="low">
<span>Минимализм</span>
</button>
<button class="mini-card" type="button" data-big="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025723.webp">
<img decoding="async" loading="lazy" src="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025723.webp" alt="Пример сайта Gold Designs" fetchpriority="low">
<span>Неоклассика</span>
</button>
</div>
<div class="preview-image">
<img decoding="async" src="https://gold-designs.ru/wp-content/uploads/2026/05/skrinshot-14-05-2026-025156.webp" alt="Пример сайта Gold Designs" fetchpriority="low" loading="lazy">
</div>
</div>
<div class="calc-footer">
<div class="price-box">
<div class="price-label">ПРЕДВАРИТЕЛЬНАЯ СТОИМОСТЬ</div>
<div class="price-value"><span>1 650 000</span> ₽</div>
<div class="price-sub">≈ <span>66 000</span> ₽ за м²</div>
</div>
<div class="features">
<div>Черновые и чистовые материалы</div>
<div>Работа и отделка</div>
<div>Вывоз мусора и уборка</div>
</div>
<div class="calc-actions">
<button class="main-btn" type="button">ПОЛУЧИТЬ СМЕТУ</button>
<a
class="ghost-btn"
href="https://gold-designs.ru/"
target="_blank"
rel="noopener noreferrer"
>
Посмотреть пример сметы
</a>
</div>
</div>
</div>
<script>
(function(){
/* ==================================================
CALC_CONFIG — ГЛАВНЫЕ НАСТРОЙКИ КАЛЬКУЛЯТОРА
CALC_CONFIG — MAIN CALCULATOR SETTINGS
Меняй суммы только здесь.
Change prices only here.
================================================== */
const CALC_CONFIG = {
/* ==================================================
КУДА ОТПРАВЛЯТЬ ЗАЯВКУ
WHERE TO SEND THE REQUEST
================================================== */
/* Telegram username без @ / Telegram username without @ */
telegramUsername: 'kutuzov2332',
/*
telegram = открыть Telegram
email = открыть почту
whatsapp = открыть WhatsApp
webhook = отправить на внешний сервер
telegram = open Telegram
email = open email
whatsapp = open WhatsApp
webhook = send to external server
*/
sendTarget: 'telegram',
/* Почта для будущего / Email for future use */
emailTo: '',
/* WhatsApp номер для будущего, только цифры / WhatsApp phone for future, only digits */
whatsappPhone: '',
/* Webhook для CRM/бота/сервера / Webhook for CRM/bot/server */
customWebhookUrl: '',
/* ==================================================
ПЛОЩАДЬ
AREA
================================================== */
/*
Стартовая площадь.
Это значение стоит при загрузке калькулятора.
Default area.
This value is used when calculator loads.
*/
defaultArea: 20,
/* ==================================================
ТИП РЕМОНТА
REPAIR TYPE
ВАЖНО:
Это цена за 1 м².
Она умножается на площадь.
IMPORTANT:
This is price per 1 m².
It is multiplied by area.
Формула:
Площадь × Цена за м²
Formula:
Area × Price per m²
================================================== */
repairPrices: {
modern: 66000, /* Современный: 66 000 ₽ за м² / Modern: 66,000 RUB per m² */
cosmetic: 45000, /* Косметический: 45 000 ₽ за м² / Cosmetic: 45,000 RUB per m² */
premium: 98000 /* Премиум: 98 000 ₽ за м² / Premium: 98,000 RUB per m² */
},
/* ==================================================
УРОВЕНЬ МАТЕРИАЛОВ
MATERIAL LEVEL
Это процентная надбавка к цене за м².
This is percentage markup to price per m².
Пример:
Цена ремонта 66 000 ₽
Материалы Премиум +25%
66 000 + 25% = 82 500 ₽ за м²
Example:
Repair price 66,000 RUB
Premium materials +25%
66,000 + 25% = 82,500 RUB per m²
================================================== */
materialPercents: {
standard: 0, /* Стандарт: +0% / Standard: +0% */
premium: 25 /* Премиум: +25% / Premium: +25% */
},
/* ==================================================
ДИЗАЙН-ПРОЕКТ
DESIGN PROJECT
Это фиксированная сумма к цене за 1 м².
This is fixed amount added to price per 1 m².
Пример:
Цена после материалов 82 500 ₽
Полный дизайн +3 500 ₽
82 500 + 3 500 = 86 000 ₽ за м²
Example:
Price after materials 82,500 RUB
Full design +3,500 RUB
82,500 + 3,500 = 86,000 RUB per m²
================================================== */
designPrices: {
none: 0, /* Не нужен: +0 ₽ за м² / No design: +0 RUB per m² */
full: 3500 /* Полный: +3 500 ₽ за м² / Full design: +3,500 RUB per m² */
},
/* ==================================================
СРОК ВЫПОЛНЕНИЯ
COMPLETION TIME
Чем больше срок, тем больше скидка.
Скидка вычитается из цены за м².
The longer the term, the bigger the discount.
Discount is subtracted from price per m².
Пример:
Цена после дизайна 86 000 ₽
Срок 4 мес. = скидка 5%
86 000 - 5% = 81 700 ₽ за м²
Example:
Price after design 86,000 RUB
Term 4 months = 5% discount
86,000 - 5% = 81,700 RUB per m²
================================================== */
termDiscounts: {
two: 0, /* 2 мес: 0% скидка / 2 months: 0% discount */
four: 5, /* 4 мес: 5% скидка / 4 months: 5% discount */
six: 10, /* 6 мес: 10% скидка / 6 months: 10% discount */
eight: 15 /* 8 мес: 15% скидка / 8 months: 15% discount */
}
};
/* ==================================================
ДАЛЬШЕ КОД ЛОГИКИ
НИЖЕ ЛУЧШЕ НЕ ТРОГАТЬ
LOGIC CODE BELOW
BETTER DO NOT EDIT BELOW
================================================== */
const calc = document.querySelector('.repair-calc');
if(!calc) return;
const areaRange = calc.querySelector('#areaRange');
const areaValue = calc.querySelector('#areaValue');
const totalPrice = calc.querySelector('#totalPrice');
const pricePerMeter = calc.querySelector('#pricePerMeter');
const mainPreview = calc.querySelector('#mainPreview');
const slider = calc.querySelector('.preview-left');
const sendButton = calc.querySelector('#sendCalc');
let currentRepairKey = 'modern';
let currentMaterialKey = 'standard';
let currentDesignKey = 'none';
let currentTermKey = 'two';
let autoSliderTimer = null;
/* Получить активный текст кнопки / Get active button text */
function getActiveText(type){
const activeButton = calc.querySelector('[data-type="' + type + '"].active');
return activeButton ? activeButton.textContent.trim() : '';
}
/* ==================================================
ФОРМУЛА РАСЧЕТА
CALCULATION FORMULA
1. Берём базовую цену ремонта за м².
Take base repair price per m².
2. Добавляем процент за материалы.
Add material percentage.
3. Добавляем дизайн-проект за м².
Add design project price per m².
4. Вычитаем скидку за срок.
Subtract term discount.
5. Умножаем итоговую цену за м² на площадь.
Multiply final price per m² by area.
================================================== */
function getTotalData(){
const area = Number(areaRange.value);
const repairPrice = CALC_CONFIG.repairPrices[currentRepairKey];
const materialPercent = CALC_CONFIG.materialPercents[currentMaterialKey];
const designPrice = CALC_CONFIG.designPrices[currentDesignKey];
const discountPercent = CALC_CONFIG.termDiscounts[currentTermKey];
let priceMeter = repairPrice;
/* Цена + процент материалов / Price + material percent */
priceMeter = priceMeter + (priceMeter * materialPercent / 100);
/* Цена + дизайн за м² / Price + design per m² */
priceMeter = priceMeter + designPrice;
/* Цена - скидка за срок / Price - term discount */
priceMeter = priceMeter - (priceMeter * discountPercent / 100);
/* Итог = площадь × цена за м² / Total = area × price per m² */
const total = area * priceMeter;
return {
area: area,
repairPrice: repairPrice,
materialPercent: materialPercent,
designPrice: designPrice,
discountPercent: discountPercent,
priceMeter: Math.round(priceMeter),
total: Math.round(total),
repairName: getActiveText('repair'),
materialName: getActiveText('materials'),
designName: getActiveText('design'),
termName: getActiveText('term')
};
}
/* Обновить цену на экране / Update price on screen */
function updatePrice(){
const data = getTotalData();
areaValue.textContent = data.area;
pricePerMeter.textContent = data.priceMeter.toLocaleString('ru-RU');
totalPrice.textContent = data.total.toLocaleString('ru-RU');
}
/* Смена большой картинки / Change main image */
function changeImage(card){
if(!card) return;
calc.querySelectorAll('.mini-card').forEach(function(item){
item.classList.remove('active');
});
card.classList.add('active');
mainPreview.classList.add('fade-out');
setTimeout(function(){
mainPreview.src = card.dataset.big;
mainPreview.classList.remove('fade-out');
}, 180);
}
/* Текст заявки / Request message */
function makeMessage(){
const data = getTotalData();
return [
'Заявка на смету',
'',
'Площадь: ' + data.area + ' м²',
'Тип ремонта: ' + data.repairName + ' (' + data.repairPrice.toLocaleString('ru-RU') + ' ₽ за м²)',
'Материалы: ' + data.materialName + ' (+' + data.materialPercent + '%)',
'Дизайн-проект: ' + data.designName + ' (+' + data.designPrice.toLocaleString('ru-RU') + ' ₽ за м²)',
'Срок выполнения: ' + data.termName + ' (-' + data.discountPercent + '%)',
'',
'Итоговая цена за м²: ' + data.priceMeter.toLocaleString('ru-RU') + ' ₽',
'Итого: ' + data.total.toLocaleString('ru-RU') + ' ₽'
].join('\n');
}
/* Отправка заявки / Send request */
function sendRequest(){
const message = makeMessage();
if(CALC_CONFIG.sendTarget === 'telegram'){
window.open(
'https://t.me/' + CALC_CONFIG.telegramUsername + '?text=' + encodeURIComponent(message),
'_blank'
);
return;
}
if(CALC_CONFIG.sendTarget === 'email'){
window.location.href =
'mailto:' + CALC_CONFIG.emailTo +
'?subject=' + encodeURIComponent('Заявка на смету') +
'&body=' + encodeURIComponent(message);
return;
}
if(CALC_CONFIG.sendTarget === 'whatsapp'){
window.open(
'https://wa.me/' + CALC_CONFIG.whatsappPhone + '?text=' + encodeURIComponent(message),
'_blank'
);
return;
}
if(CALC_CONFIG.sendTarget === 'webhook' && CALC_CONFIG.customWebhookUrl){
fetch(CALC_CONFIG.customWebhookUrl, {
method:'POST',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({
message:message,
data:getTotalData()
})
});
}
}
/* Слайдер площади / Area slider */
areaRange.addEventListener('input', updatePrice);
/* Кнопки параметров / Option buttons */
calc.querySelectorAll('.calc-btn').forEach(function(button){
button.addEventListener('click', function(){
const type = button.dataset.type;
const key = button.dataset.key;
calc.querySelectorAll('[data-type="' + type + '"]').forEach(function(item){
item.classList.remove('active');
});
button.classList.add('active');
if(type === 'repair') currentRepairKey = key;
if(type === 'materials') currentMaterialKey = key;
if(type === 'design') currentDesignKey = key;
if(type === 'term') currentTermKey = key;
updatePrice();
});
});
/* Маленькие картинки / Small image cards */
slider.addEventListener('click', function(event){
const card = event.target.closest('.mini-card');
if(!card) return;
changeImage(card);
});
/* Сброс / Reset */
calc.querySelector('.calc-reset').addEventListener('click', function(){
areaRange.value = CALC_CONFIG.defaultArea;
currentRepairKey = 'modern';
currentMaterialKey = 'standard';
currentDesignKey = 'none';
currentTermKey = 'two';
calc.querySelectorAll('.calc-btn').forEach(function(item){
item.classList.remove('active');
});
calc.querySelector('[data-type="repair"][data-key="modern"]').classList.add('active');
calc.querySelector('[data-type="materials"][data-key="standard"]').classList.add('active');
calc.querySelector('[data-type="design"][data-key="none"]').classList.add('active');
calc.querySelector('[data-type="term"][data-key="two"]').classList.add('active');
changeImage(slider.querySelector('.mini-card'));
updatePrice();
});
/* Кнопка заявки / Request button */
sendButton.addEventListener('click', sendRequest);
/* Автопрокрутка картинок на телефоне / Mobile image auto slider */
function startMobileSlider(){
clearInterval(autoSliderTimer);
if(window.innerWidth > 767) return;
const cards = Array.from(slider.querySelectorAll('.mini-card'));
let index = 0;
autoSliderTimer = setInterval(function(){
index = (index + 1) % cards.length;
slider.scrollTo({
left:cards[index].offsetLeft - slider.offsetLeft,
behavior:'smooth'
});
}, 2600);
}
updatePrice();
startMobileSlider();
window.addEventListener('resize', startMobileSlider);
})();
</script> CSS
/* ================= CONTROL / НАСТРОЙКИ ================= */
.repair-calc{
--gold-1:#f2cb88; /* золото верх / gold top */
--gold-2:#c7964d; /* золото низ / gold bottom */
--bg-main:#090c12; /* основной фон / main bg */
--bg-soft:#0d1118; /* второй фон / soft bg */
--bg-top:#11161f; /* фон верхнего блока / top block bg */
--bg-mid:#11161f; /* фон блока картинок / image block bg */
--bg-foot:#11161f; /* фон нижнего блока / footer bg */
--border-top:rgba(255,255,255,.045); /* граница верх / top border */
--border-mid:rgba(255,255,255,.045); /* граница картинки / image border */
--border-foot:rgba(255,255,255,.045); /* граница низ / footer border */
--text-main:#f6f1e7; /* основной текст / main text */
--text-muted:#8f8a82; /* серый текст / muted text */
--btn-text:#c8c3b8; /* текст обычных кнопок / default button text */
--btn-active-text:#111; /* текст активных кнопок / active button text */
--font-main:Inter,Arial,sans-serif; /* шрифт / font */
--font-scale:1; /* общий размер текста / global text scale */
--font-weight:500; /* общая толщина / global weight */
--title-size:15px; /* заголовки пунктов / step titles */
--btn-size:16px; /* текст кнопок / button text */
--price-size:36px; /* цена / price */
--circle-weight:500; /* цифры в кругах / circle numbers */
--reset-color:#9c8e74; /* цвет Сбросить / reset color */
--reset-size:15px; /* размер Сбросить / reset size */
--reset-weight:500; /* толщина Сбросить / reset weight */
--range-minmax-color:#c9b18a; /* цвет 20 м² и 200 / min-max color */
--range-minmax-size:13px; /* размер 20 м² и 200 / min-max size */
--range-minmax-weight:500; /* толщина 20 м² и 200 / min-max weight */
--price-label-color:#7d7568; /* цвет подписи цены / price label color */
--price-label-size:12px; /* размер подписи цены / price label size */
--price-label-weight:500; /* толщина подписи цены / price label weight */
--price-color:#f2cb88; /* цвет цены / price color */
--price-weight:500; /* толщина цены / price weight */
--price-sub-color:#8e8576; /* цвет ₽ за м² / price sub color */
--price-sub-size:13px; /* размер ₽ за м² / price sub size */
--price-sub-weight:500; /* толщина ₽ за м² / price sub weight */
--feature-color:#cfc7ba; /* цвет текста пунктов / feature text color */
--feature-size:13px; /* размер текста пунктов / feature text size */
--feature-weight:500; /* толщина текста пунктов / feature text weight */
--feature-icon-color:#f2cb88; /* цвет галочек / check icon color */
--ghost-color:#c9b18a; /* цвет кнопки пример сметы / ghost button color */
--ghost-size:13px; /* размер кнопки пример сметы / ghost button size */
--ghost-weight:500; /* толщина кнопки пример сметы / ghost button weight */
--ghost-border:rgba(217,176,108,.22); /* граница кнопки / ghost border */
--pc-scale:.9; /* размер ПК / desktop scale */
--radius-main:28px; /* общий радиус / main radius */
--radius-block:18px; /* радиус блоков / block radius */
--radius-btn:12px; /* радиус кнопок / button radius */
box-sizing:border-box;width:100%;margin:0 auto;padding:calc(24px * var(--pc-scale));border-radius:var(--radius-main);overflow:hidden;
color:var(--text-main);font-family:var(--font-main);
background:radial-gradient(circle at top left,rgba(255,193,94,.08),transparent 32%),linear-gradient(180deg,var(--bg-soft),var(--bg-main));
border:1px solid var(--border-top);box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 26px 70px rgba(0,0,0,.42);
}
.repair-calc *{box-sizing:border-box;min-width:0}
/* ================= COMMON / ОБЩЕЕ ================= */
.calc-body,.calc-preview,.calc-footer{border-radius:var(--radius-block);border:1px solid}
.calc-title,.step-title,.range-bottom,.calc-btn,.main-btn{font-weight:var(--font-weight)}
.calc-body{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-top) 92%,white 8%),var(--bg-top));border-color:var(--border-top)}
.calc-preview{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-mid) 92%,white 8%),var(--bg-mid));border-color:var(--border-mid)}
.calc-footer{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-foot) 92%,white 8%),var(--bg-foot));border-color:var(--border-foot)}
/* ================= TOP / ВЕРХ ================= */
.calc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:calc(16px * var(--pc-scale))}
.calc-title{font-size:calc(16px * var(--pc-scale) * var(--font-scale));letter-spacing:.04em;color:var(--text-main)}
.calc-reset{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;border:0;background:none;color:var(--reset-color);cursor:pointer;font-size:calc(var(--reset-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--reset-weight);white-space:nowrap}
.calc-reset::after{content:"↻";width:18px;height:18px;min-width:18px;min-height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;line-height:18px;text-align:center;font-family:Arial,sans-serif;font-size:13px;font-weight:400;color:var(--gold-1);border:1px solid color-mix(in srgb,var(--gold-1) 35%,transparent)}
/* ================= QUESTIONS / ВОПРОСЫ ================= */
.calc-body{display:flex;flex-direction:column;gap:calc(10px * var(--pc-scale));margin-bottom:calc(18px * var(--pc-scale));padding:18px;overflow:hidden}
.calc-row{display:grid;grid-template-columns:calc(40px * var(--pc-scale)) calc(200px * var(--pc-scale)) minmax(0,1fr);align-items:center;gap:calc(18px * var(--pc-scale));padding:calc(12px * var(--pc-scale)) 0;border:0;background:transparent}
.calc-row:first-child{padding-top:4px}.calc-row:last-child{padding-bottom:4px}
.step-num{width:calc(34px * var(--pc-scale));height:calc(34px * var(--pc-scale));min-width:calc(34px * var(--pc-scale));min-height:calc(34px * var(--pc-scale));border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;text-align:center;color:var(--gold-1);border:1px solid color-mix(in srgb,var(--gold-1) 45%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--gold-1) 16%,transparent),transparent 70%);font-size:calc(14px * var(--pc-scale) * var(--font-scale));font-weight:var(--circle-weight)}
.step-title{color:var(--text-main);font-size:calc(var(--title-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--font-weight)}
.step-content{width:100%;min-width:0}
/* ================= RANGE / СЛАЙДЕР ================= */
.area-content{display:grid;grid-template-columns:calc(80px * var(--pc-scale)) minmax(0,1fr) calc(80px * var(--pc-scale));align-items:center;gap:calc(18px * var(--pc-scale))}
.range-top{margin:0;text-align:right;white-space:nowrap;color:var(--gold-1);font-size:calc(16px * var(--pc-scale) * var(--font-scale));font-weight:var(--font-weight)}
.range-slider{width:100%;margin:0;appearance:none;height:calc(4px * var(--pc-scale));border-radius:10px;outline:none;background:linear-gradient(90deg,var(--gold-2),var(--gold-1))}
.range-slider::-webkit-slider-thumb{appearance:none;width:calc(18px * var(--pc-scale));height:calc(18px * var(--pc-scale));border:0!important;outline:0!important;border-radius:50%;background:var(--gold-1);cursor:pointer;box-shadow:0 0 18px color-mix(in srgb,var(--gold-1) 55%,transparent)}
.range-slider::-moz-range-thumb{width:calc(18px * var(--pc-scale));height:calc(18px * var(--pc-scale));border:0!important;outline:0!important;border-radius:50%;background:var(--gold-1);cursor:pointer;box-shadow:0 0 18px color-mix(in srgb,var(--gold-1) 55%,transparent)}
.range-bottom{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.12;color:var(--range-minmax-color);font-size:calc(var(--range-minmax-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--range-minmax-weight)}
.range-bottom span:first-child{color:var(--range-minmax-color)}
/* ================= BUTTONS / КНОПКИ ================= */
.buttons-grid,.two-grid,.rooms-grid,.term-grid{display:grid;gap:12px}
.buttons-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.two-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rooms-grid,.term-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.calc-btn{width:100%;height:calc(44px * var(--pc-scale));border-radius:calc(var(--radius-btn) * var(--pc-scale));border:1px solid rgba(255,255,255,.055);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.018));color:var(--btn-text);cursor:pointer;transition:.22s ease;font-size:calc(var(--btn-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--font-weight)}
.calc-btn:hover{border-color:rgba(255,255,255,.055);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.018));color:var(--btn-text)}
.calc-btn.active,.calc-btn.active:hover,.main-btn{color:var(--btn-active-text);background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-color:var(--gold-1)}
.calc-btn.active{box-shadow:0 0 22px color-mix(in srgb,var(--gold-1) 22%,transparent)}
/* ================= IMAGES / КАРТИНКИ ================= */
.calc-preview{display:grid;grid-template-columns:calc(120px * var(--pc-scale)) minmax(0,1fr);gap:calc(18px * var(--pc-scale));margin-bottom:calc(20px * var(--pc-scale));padding:14px;overflow:hidden}
.preview-left{display:flex;flex-direction:column;gap:calc(12px * var(--pc-scale));height:calc(360px * var(--pc-scale));overflow:hidden}
.mini-card{position:relative;width:100%;height:calc(112px * var(--pc-scale));min-height:calc(112px * var(--pc-scale));flex:0 0 calc(112px * var(--pc-scale));padding:0;border:0;border-radius:10px;overflow:visible;background:transparent;cursor:pointer}
.mini-card img,.preview-image img{width:100%;height:100%;object-fit:cover;display:block}
.mini-card img{border-radius:10px;border:1px solid color-mix(in srgb,var(--gold-1) 55%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.mini-card.active img{border-color:var(--gold-1);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-1) 65%,transparent),0 0 18px color-mix(in srgb,var(--gold-1) 24%,transparent)}
.mini-card span{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;height:16px;padding:2px 7px;border-radius:999px;color:var(--gold-1);background:var(--bg-mid);border:0;box-shadow:none;white-space:nowrap;text-align:center;font-size:10px;line-height:1}
.preview-image{height:calc(360px * var(--pc-scale));min-height:calc(360px * var(--pc-scale));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#090c12}
.preview-image img{transition:opacity .22s ease,filter .22s ease}.preview-image img.fade-out{opacity:.15;filter:blur(3px) brightness(.85)}
/* ================= FOOTER / НИЗ ================= */
.calc-footer{display:grid;grid-template-columns:calc(260px * var(--pc-scale)) minmax(0,1fr) calc(250px * var(--pc-scale));gap:calc(24px * var(--pc-scale));align-items:center;padding:calc(18px * var(--pc-scale))}
.price-label{margin-bottom:6px;color:var(--price-label-color);font-size:calc(var(--price-label-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--price-label-weight)}
.price-value{line-height:1;color:var(--price-color);font-size:calc(var(--price-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--price-weight)}
.price-sub{margin-top:5px;color:var(--price-sub-color);font-size:calc(var(--price-sub-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--price-sub-weight)}
.features{display:flex;flex-direction:column;gap:calc(8px * var(--pc-scale));color:var(--feature-color);font-size:calc(var(--feature-size) * var(--pc-scale) * var(--font-scale));font-weight:var(--feature-weight)}
.features div{position:relative;padding-left:18px}.features div:before{content:"✓";position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1;color:var(--feature-icon-color);border:1px solid color-mix(in srgb,var(--feature-icon-color) 65%,transparent)}
.calc-actions{display:flex;flex-direction:column;gap:9px}.main-btn,.ghost-btn{width:100%;cursor:pointer}
.main-btn{height:calc(48px * var(--pc-scale));border:0;border-radius:10px;box-shadow:0 10px 30px color-mix(in srgb,var(--gold-1) 22%,transparent);font-size:clamp(10px,.82vw,14px);font-weight:var(--font-weight);white-space:nowrap}
.ghost-btn{height:calc(38px * var(--pc-scale));border-radius:9px;border:1px solid var(--ghost-border);background:transparent;color:var(--ghost-color);font-size:clamp(10px,.75vw,var(--ghost-size));font-weight:var(--ghost-weight);white-space:nowrap}
/* ================= LINK + HOVER FIX / ССЫЛКА И HOVER ================= */
.repair-calc button:hover,.repair-calc button:focus,.repair-calc button:active{outline:none!important}
.repair-calc a.ghost-btn,.repair-calc a.ghost-btn:visited{display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;color:var(--ghost-color)!important}
.repair-calc a.ghost-btn:hover,.repair-calc a.ghost-btn:focus,.repair-calc a.ghost-btn:active,.repair-calc .ghost-btn:hover,.repair-calc .ghost-btn:focus,.repair-calc .ghost-btn:active{color:var(--ghost-color)!important;text-decoration:none!important;background:transparent!important;border:1px solid var(--ghost-border)!important}
.repair-calc .calc-reset:hover,.repair-calc .calc-reset:focus,.repair-calc .calc-reset:active{background:transparent!important;color:var(--reset-color)!important;border:0!important}
/* ================= PC FLUID TEXT / ПК ТЕКСТ УМЕНЬШАЕТСЯ ================= */
@media(min-width:1025px){
.repair-calc .calc-btn{font-size:clamp(10px,.82vw,14px)!important;padding-left:8px!important;padding-right:8px!important;white-space:nowrap!important}
.repair-calc .step-title{font-size:clamp(11px,.85vw,15px)!important}.repair-calc .calc-title{font-size:clamp(12px,.95vw,16px)!important}
}
/* ================= TABLET / ПЛАНШЕТ ================= */
@media (min-width:768px) and (max-width:1024px){
.repair-calc{width:94vw;padding:16px;border-radius:24px}.calc-top{margin-bottom:12px}.calc-title{font-size:13px}.calc-reset{font-size:12px}
.calc-body{gap:8px;margin-bottom:14px;padding:16px}.calc-row{grid-template-columns:32px 150px minmax(0,1fr);gap:12px;padding:9px 0}
.step-num{width:28px;height:28px;min-width:28px;min-height:28px;font-size:12px}.step-title{font-size:12px}
.area-content{grid-template-columns:62px minmax(0,1fr) 58px;gap:12px}.range-top{font-size:14px}.range-bottom{font-size:11px}.range-slider{height:3px}.range-slider::-webkit-slider-thumb{width:18px;height:18px}
.calc-btn{height:42px;font-size:13px}.calc-preview{grid-template-columns:110px minmax(0,1fr);gap:12px;margin-bottom:14px;padding:14px}.preview-left{height:270px;gap:9px}.preview-image{height:270px;min-height:270px}
.mini-card{height:84px;min-height:84px;flex:0 0 84px}.calc-footer{grid-template-columns:1fr 1fr 190px;gap:14px;padding:14px}.price-value{font-size:32px}.price-label,.price-sub,.features{font-size:13px}.main-btn,.ghost-btn{height:42px;font-size:13px}
}
/* ================= MOBILE / ТЕЛЕФОН ================= */
@media (max-width:767px){
.repair-calc{width:90vw;padding:16px;border-radius:18px}.calc-top{margin-bottom:14px;gap:12px}.calc-title{max-width:58%;font-size:11px;line-height:1.15}.calc-reset{margin-left:auto;font-size:11px;gap:6px;line-height:1}
.calc-reset::after{width:16px;height:16px;min-width:16px;min-height:16px;font-size:11px;line-height:16px;transform:translateY(-.5px)}
.calc-body{gap:8px;margin-bottom:16px;padding:16px}.calc-row{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:10px 0}.step-num{width:30px;height:30px;min-width:30px;min-height:30px;font-size:12px}.step-title{font-size:14px}.step-content{grid-column:1/-1}
.area-content{grid-template-columns:56px minmax(0,1fr) 50px;gap:10px}.range-top{font-size:15px;text-align:right}.range-bottom{flex-direction:column;font-size:11px}.range-slider{height:3px}.range-slider::-webkit-slider-thumb{width:18px;height:18px}
.buttons-grid,.two-grid{grid-template-columns:1fr;gap:10px}.rooms-grid,.term-grid{grid-template-columns:repeat(2,1fr);gap:10px}.calc-btn{height:46px;font-size:14px}
.calc-preview{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;padding:14px}.preview-image{order:1;height:230px;min-height:230px;border-radius:14px}.preview-left{order:2;display:flex;flex-direction:row;width:100%;height:auto;overflow-x:auto;overflow-y:hidden;gap:10px;padding:0 0 12px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.preview-left .mini-card:nth-child(n+4){display:none}.preview-left::-webkit-scrollbar{height:6px}.preview-left::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:20px}.preview-left::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gold-1) 65%,transparent);border-radius:20px}
.mini-card{width:112px;min-width:112px;height:78px;min-height:78px;flex:0 0 112px;scroll-snap-align:start}.calc-footer{grid-template-columns:1fr;padding:14px;gap:14px}.price-box{position:static;display:block;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}.price-box::after{display:none;content:none}
.price-value{font-size:32px}.price-label,.price-sub,.features{font-size:13px}.main-btn,.ghost-btn{height:46px;font-size:14px}.repair-calc a.ghost-btn{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:46px!important;padding:0 14px!important;text-align:center!important;text-decoration:none!important;font-size:13px!important;line-height:1!important;color:var(--ghost-color)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}
/* ==================================================
STRICT CONTAINER FIT FIX
ФИКС: КАЛЬКУЛЯТОР НЕ ВЫЛЕЗАЕТ ЗА КОНТЕЙНЕР
================================================== */
html body .repair-calc{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
/* Планшет / Tablet */
@media(max-width:1024px){
html body .repair-calc{
width:100% !important;
max-width:100% !important;
padding:16px !important;
}
}
/* Телефон / Mobile */
@media(max-width:767px){
html body .repair-calc{
width:100% !important;
max-width:100% !important;
padding:14px !important;
border-radius:18px !important;
}
html body .repair-calc .calc-body,
html body .repair-calc .calc-preview,
html body .repair-calc .calc-footer{
width:100% !important;
max-width:100% !important;
}
}
CSS 2
RU — РУССКИЙ
Если Elementor, тема WordPress или плагины
ломают цвета, градиенты, hover-эффекты,
кнопки или стили калькулятора —
вставьте этот CSS-код В САМЫЙ НИЗ.
Этот блок принудительно возвращает
все оригинальные стили калькулятора.
EN — ENGLISH
If Elementor, WordPress theme or plugins
override colors, gradients, hover effects,
buttons or calculator styles —
paste this CSS code AT THE VERY BOTTOM.
This block force-restores
all original calculator styles.
/* ==================================================
ELEMENTOR SAFE OVERRIDE
НЕ ЛОМАЕТ ДИЗАЙН, ТОЛЬКО ПЕРЕБИВАЕТ ТЕМУ
================================================== */
.repair-calc,
.repair-calc *{
box-sizing:border-box !important;
font-family:var(--font-main) !important;
}
/* ОСНОВНОЙ КОНТЕЙНЕР */
html body .repair-calc{
color:var(--text-main) !important;
background:
radial-gradient(circle at top left,rgba(255,193,94,.08),transparent 32%),
linear-gradient(180deg,var(--bg-soft),var(--bg-main)) !important;
border:1px solid var(--border-top) !important;
}
/* ВНУТРЕННИЕ БЛОКИ */
html body .repair-calc .calc-body{
background:
linear-gradient(180deg,color-mix(in srgb,var(--bg-top) 92%,white 8%),var(--bg-top)) !important;
border-color:var(--border-top) !important;
}
html body .repair-calc .calc-preview{
background:
linear-gradient(180deg,color-mix(in srgb,var(--bg-mid) 92%,white 8%),var(--bg-mid)) !important;
border-color:var(--border-mid) !important;
}
html body .repair-calc .calc-footer{
background:
linear-gradient(180deg,color-mix(in srgb,var(--bg-foot) 92%,white 8%),var(--bg-foot)) !important;
border-color:var(--border-foot) !important;
}
/* ТЕКСТ */
html body .repair-calc .calc-title,
html body .repair-calc .step-title{
color:var(--text-main) !important;
}
html body .repair-calc .range-top,
html body .repair-calc .price-value,
html body .repair-calc .mini-card span{
color:var(--gold-1) !important;
}
html body .repair-calc .range-bottom,
html body .repair-calc .range-bottom span{
color:var(--range-minmax-color) !important;
}
html body .repair-calc .price-label{
color:var(--price-label-color) !important;
}
html body .repair-calc .price-sub{
color:var(--price-sub-color) !important;
}
html body .repair-calc .features{
color:var(--feature-color) !important;
}
/* КРУГИ С ЦИФРАМИ */
html body .repair-calc .step-num{
color:var(--gold-1) !important;
border-color:color-mix(in srgb,var(--gold-1) 45%,transparent) !important;
background:
radial-gradient(circle,color-mix(in srgb,var(--gold-1) 16%,transparent),transparent 70%) !important;
}
/* СЛАЙДЕР */
html body .repair-calc .range-slider,
html body .repair-calc input[type="range"]{
appearance:none !important;
-webkit-appearance:none !important;
background:
linear-gradient(90deg,var(--gold-2),var(--gold-1)) !important;
}
html body .repair-calc .range-slider::-webkit-slider-thumb{
appearance:none !important;
-webkit-appearance:none !important;
background:var(--gold-1) !important;
border:0 !important;
box-shadow:
0 0 18px color-mix(in srgb,var(--gold-1) 55%,transparent) !important;
}
html body .repair-calc .range-slider::-moz-range-thumb{
background:var(--gold-1) !important;
border:0 !important;
box-shadow:
0 0 18px color-mix(in srgb,var(--gold-1) 55%,transparent) !important;
}
/* ОБЫЧНЫЕ КНОПКИ */
html body .repair-calc .calc-btn{
background:
linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.018)) !important;
color:var(--btn-text) !important;
border:1px solid rgba(255,255,255,.055) !important;
box-shadow:none !important;
}
/* ОБЫЧНЫЕ КНОПКИ ПРИ НАВЕДЕНИИ */
html body .repair-calc .calc-btn:hover,
html body .repair-calc .calc-btn:focus,
html body .repair-calc .calc-btn:active{
background:
linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.018)) !important;
color:var(--btn-text) !important;
border-color:rgba(255,255,255,.055) !important;
box-shadow:none !important;
}
/* АКТИВНЫЕ КНОПКИ */
html body .repair-calc .calc-btn.active,
html body .repair-calc .calc-btn.active:hover,
html body .repair-calc .calc-btn.active:focus,
html body .repair-calc .calc-btn.active:active{
background:
linear-gradient(180deg,var(--gold-1),var(--gold-2)) !important;
color:var(--btn-active-text) !important;
border-color:var(--gold-1) !important;
box-shadow:
0 0 22px color-mix(in srgb,var(--gold-1) 22%,transparent) !important;
}
/* ГЛАВНАЯ КНОПКА */
html body .repair-calc .main-btn,
html body .repair-calc .main-btn:hover,
html body .repair-calc .main-btn:focus,
html body .repair-calc .main-btn:active{
background:
linear-gradient(180deg,var(--gold-1),var(--gold-2)) !important;
color:var(--btn-active-text) !important;
border:0 !important;
box-shadow:
0 10px 30px color-mix(in srgb,var(--gold-1) 22%,transparent) !important;
}
/* КНОПКА-ССЫЛКА */
html body .repair-calc .ghost-btn,
html body .repair-calc a.ghost-btn,
html body .repair-calc a.ghost-btn:visited,
html body .repair-calc .ghost-btn:hover,
html body .repair-calc .ghost-btn:focus,
html body .repair-calc .ghost-btn:active,
html body .repair-calc a.ghost-btn:hover,
html body .repair-calc a.ghost-btn:focus,
html body .repair-calc a.ghost-btn:active{
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:transparent !important;
color:var(--ghost-color) !important;
border:1px solid var(--ghost-border) !important;
text-decoration:none !important;
box-shadow:none !important;
}
/* СБРОС */
html body .repair-calc .calc-reset,
html body .repair-calc .calc-reset:hover,
html body .repair-calc .calc-reset:focus,
html body .repair-calc .calc-reset:active{
background:transparent !important;
color:var(--reset-color) !important;
border:0 !important;
box-shadow:none !important;
text-decoration:none !important;
}
html body .repair-calc .calc-reset::after{
color:var(--gold-1) !important;
border-color:color-mix(in srgb,var(--gold-1) 35%,transparent) !important;
}
/* ГАЛОЧКИ */
html body .repair-calc .features div::before{
color:var(--feature-icon-color) !important;
border-color:color-mix(in srgb,var(--feature-icon-color) 65%,transparent) !important;
}
/* МИНИ-КАРТИНКИ */
html body .repair-calc .mini-card img{
border-color:color-mix(in srgb,var(--gold-1) 55%,transparent) !important;
}
html body .repair-calc .mini-card.active img{
border-color:var(--gold-1) !important;
box-shadow:
0 0 0 1px color-mix(in srgb,var(--gold-1) 65%,transparent),
0 0 18px color-mix(in srgb,var(--gold-1) 24%,transparent) !important;
}