/* ===================================================================== Калькулятор (#calc): блок «Орієнтовна вартість» у стані «після відправки». Вартість показується ЛИШЕ після успішної відправки заявки (рішення замовника 01.10.2026): форма ховається, Fluent Forms показує «Заявку надіслано», а assets/js/calc.js вставляє між заголовком і поясненням цей блок. До відправки блоку немає взагалі — панель калькулятора така сама, як і була. Макета блоку немає — погоджено «в стилі плиток Орієнтовна вартість з вікна пакета» (.mpkg__cost / .mpkg__cost--total, modals.css): той самий фон плитки (мідь 25%), радіус, підпис 300 великими, значення 500, підсумкова плитка — мідна заливка. Розміри й компоновка — під панель 494: «Пакет» і «Ціна» в ряд, мідна підсумкова — на всю ширину під ними. Під поясненням — контурна кнопка «Розрахувати інший варіант» (6.4.0). Телефон — mobile/44-calc-result.css. ===================================================================== */ /* Положення (6.4.0). Форма ховається, але її місце лишається (forms.css), тож висота панелі не змінюється і сторінка не стрибає. Стан успіху з плитками втричі вищий за звичайне повідомлення, тому стоїть не по центру панелі, а вгорі, на місці форми: галочка на рівні верху панелі (на десктопі — поруч із заголовком секції). Якщо він не весь у вікні, calc.js робить одну плавну прокрутку до його верху (як якорі сайту) — сюди ж стає й форма після «Розрахувати інший варіант», тому між ними прокрутки немає. scroll-margin-top — повітря над галочкою / над підписом першого поля (він стоїть на рамці, на 7 вище форми): у секцій-якорів його дає їхній власний верхній відступ, а тут він потрібен явно. У низькому вікні calc.js зменшує це повітря рівно настільки, щоб низ стану успіху (кнопка) теж був у вікні. */ body .calc__panel .ff-message-success { top: 0; transform: none; scroll-margin-top: 40px; } body .calc__panel .fluentform form { scroll-margin-top: 40px; } /* Вертикальні відступи блоку (6.4.0) трохи щільніші, ніж були (40 / 22 / 20 / 36), щоб увесь стан успіху з кнопкою — 801 px макета — вміщався після прокрутки й у нижчих вікнах ноутбуків (1920×937, 1536×730, 1366×650 — ~810–840 px макета) */ body .calc__panel .ff-message-success .calc-res { margin: 32px 0 0; text-align: left; } /* Заголовок блоку — як підзаголовок «Орієнтовна вартість реалізації» у вікні пакета (100, великими), кегль — як у підписів плиток */ body .calc__panel .ff-message-success .calc-res__heading { margin: 0; font-weight: 100; font-size: var(--fs-lg); line-height: 32px; text-transform: uppercase; } body .calc__panel .ff-message-success .calc-res__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 18px 0 0; padding: 0; list-style: none; } /* Підпис притиснутий до верху, значення — до низу: у ряду значення стоять на одній базовій лінії, навіть коли назва пакета в два рядки (рядок значення — див. .calc-res__value нижче). Висота не менша за звичайну плитку — і плитка без підпису («Ціна за запитом», «Підберемо пакет…») лишається плиткою, а не схожою на кнопку смугою. */ body .calc__panel .ff-message-success .calc-res__tile { display: grid; align-content: space-between; gap: 28px; min-width: 0; min-height: 184px; margin: 0; padding: 32px 22px 30px 30px; background: rgba(184, 115, 51, 0.25); border-radius: var(--r); } body .calc__panel .ff-message-success .calc-res__tile--plain { align-content: end; } body .calc__panel .ff-message-success .calc-res__tile--total { grid-column: 1 / -1; background: var(--accent); } /* Дві плитки («Пакет» + «Ціна за запитом») — в один ряд, як у вікні пакета */ body .calc__panel .ff-message-success .calc-res__tiles--2 .calc-res__tile--total { grid-column: auto; } body .calc__panel .ff-message-success .calc-res__label { font-weight: 300; font-size: var(--fs-lg); line-height: 31.2px; text-transform: uppercase; } /* Значення — один рядок тексту: «від» і одиниця дрібно, число крупно, на спільній базовій лінії (так на мобільній плитці вікна пакета). Базова лінія в ряду «Пакет» | «Ціна» (6.4.0): обидва значення притиснуті до низу плитки, тож лінія збігається, лише коли в обох однаковий нижній рядок. Тому рядок «Ціни» має той самий кегль і інтерліньяж, що й назва пакета (25 / 31.2), а сам вміст (calc-res__amount: «від», число, одиниця) іде з нульовим інтерліньяжем і рядка не розсуває. Так «610» стоїть рівно на лінії «LIVING» за будь-яких метрик шрифту (було: на 7.8 вище). Число виступає над рядком — у проміжок під підписом. */ body .calc__panel .ff-message-success .calc-res__value { display: block; font-weight: 500; font-size: var(--fs-lg); line-height: 31.2px; white-space: nowrap; /* «від 610 USD/м²» не рветься; запас до краю плитки — поле справа */ } body .calc__panel .ff-message-success .calc-res__amount { font-size: 18px; line-height: 0; } body .calc__panel .ff-message-success .calc-res__value b { font-weight: 500; font-size: var(--fs-price); } /* Підсумкова плитка: рядок 24 / 60 і число 72, як і були. Нижню частину рядка й раніше задавав сам рядок, а не число, тож базова лінія стоїть так само (53 над низом плитки); число вже не розсуває рядок — плитка 184, як решта (було 194: число виштовхувало вміст за мінімальну висоту) */ body .calc__panel .ff-message-success .calc-res__tile--total .calc-res__value { font-size: 24px; line-height: 60px; } body .calc__panel .ff-message-success .calc-res__tile--total .calc-res__amount { font-size: 24px; } body .calc__panel .ff-message-success .calc-res__tile--total .calc-res__value b { font-size: 72px; } /* як число у вікні пакета */ /* «Ціна за запитом», «Підберемо пакет на консультації» — текст без числа */ body .calc__panel .ff-message-success .calc-res__value--text, body .calc__panel .ff-message-success .calc-res__tile--total .calc-res__value--text { font-size: 30px; line-height: 36px; white-space: normal; } /* Назва пакета — кнопка, що відкриває вікно цього пакета (мідь і підкреслення, як посилання на політику в згоді); «Дизайн-проєкт» — просто текст */ body .calc__panel .ff-message-success .calc-res__pkg, body .calc__panel .ff-message-success .calc-res__name { font-size: var(--fs-lg); line-height: 31.2px; white-space: normal; } body .calc__panel .ff-message-success .calc-res__pkg { justify-self: start; margin: 0; padding: 0; border: 0; background: none; color: var(--accent); font-family: var(--font); text-align: left; text-decoration: underline; text-decoration-thickness: 1px; /* у тій самій пропорції до кегля, що й у посилання на політику (3 / 16) */ text-underline-offset: 0.1875em; cursor: pointer; transition: color var(--dur) var(--ease); } body .calc__panel .ff-message-success .calc-res__pkg:hover { color: var(--ink); } body .calc__panel .ff-message-success .calc-res__pkg:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; } /* Пояснення під блоком: «…підготувати детальний кошторис.» — у два рядки */ body .calc__panel .ff-message-success .vk-success__text { max-width: 420px; margin-top: 30px; } /* «Розрахувати інший варіант» (6.4.0) — контурна кнопка сайту (.btn.btn--ghost, як «Отримати консультацію» у вікнах послуг): мідна рамка, без заливки, наведення — мідь 16%. Ширина панелі й висота 78 — як «Отримати результат».