Studio AUMA – Hinta-arvio
#studio-auma-wrapper * {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
#studio-auma-wrapper {
all: initial !important;
display: block !important;
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
#studio-auma-wrapper body {
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
background: #FFFCF9 !important;
color: #371A12 !important;
padding: 20px !important;
line-height: 1.6 !important;
}
#studio-auma-wrapper .container {
max-width: 680px !important;
margin: 0 auto !important;
background: #FFFCF9 !important;
padding: 40px 30px !important;
border-radius: 16px !important;
}
#studio-auma-wrapper .header {
margin-bottom: 40px !important;
text-align: center !important;
border-bottom: 2px solid #C9B29F !important;
padding-bottom: 20px !important;
}
#studio-auma-wrapper .logo {
font-size: 28px !important;
font-weight: 700 !important;
color: #371A12 !important;
margin-bottom: 8px !important;
}
#studio-auma-wrapper .subtitle {
font-size: 12px !important;
color: #66352A !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
}
#studio-auma-wrapper .progress-container {
margin-bottom: 30px !important;
}
#studio-auma-wrapper .progress-bar {
height: 3px !important;
background: #E8DFD5 !important;
border-radius: 2px !important;
overflow: hidden !important;
}
#studio-auma-wrapper .progress-fill {
height: 100% !important;
background: #66352A !important;
transition: width 0.3s ease !important;
}
#studio-auma-wrapper .progress-text {
font-size: 11px !important;
color: #99704D !important;
margin-top: 8px !important;
font-weight: 600 !important;
}
#studio-auma-wrapper .step {
display: none !important;
}
#studio-auma-wrapper .step.active {
display: block !important;
animation: fadeIn 0.3s ease-in !important;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
#studio-auma-wrapper .step-label {
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #99704D !important;
margin-bottom: 15px !important;
font-weight: 700 !important;
}
#studio-auma-wrapper .step-title {
font-size: 26px !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
color: #371A12 !important;
line-height: 1.2 !important;
}
#studio-auma-wrapper .step-desc {
font-size: 14px !important;
color: #66352A !important;
margin-bottom: 30px !important;
line-height: 1.5 !important;
}
#studio-auma-wrapper .options {
display: grid !important;
gap: 12px !important;
margin-bottom: 30px !important;
}
#studio-auma-wrapper .option-btn {
background: #FFFCF9 !important;
border: 2px solid #D5C5B0 !important;
padding: 18px !important;
border-radius: 14px !important;
cursor: pointer !important;
text-align: left !important;
font-size: 14px !important;
transition: all 0.25s ease !important;
font-weight: 500 !important;
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
}
#studio-auma-wrapper .option-btn:hover {
border-color: #99704D !important;
background: #FAF7F3 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(102, 53, 42, 0.08) !important;
}
#studio-auma-wrapper .option-btn.selected {
border: 3px solid #371A12 !important;
background: #FFFCF9 !important;
}
#studio-auma-wrapper .icon-box {
flex-shrink: 0 !important;
width: 48px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #F4ECE3 !important;
border-radius: 10px !important;
}
#studio-auma-wrapper .option-content {
flex: 1 !important;
}
#studio-auma-wrapper .option-title {
font-weight: 700 !important;
color: #371A12 !important;
margin-bottom: 3px !important;
font-size: 15px !important;
}
#studio-auma-wrapper .option-desc {
font-size: 12px !important;
color: #99704D !important;
margin-top: 3px !important;
}
#studio-auma-wrapper .radio-circle {
flex-shrink: 0 !important;
width: 26px !important;
height: 26px !important;
border: 2px solid #D5C5B0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.25s ease !important;
margin-top: 6px !important;
}
#studio-auma-wrapper .option-btn.selected .radio-circle {
background: #371A12 !important;
border-color: #371A12 !important;
}
#studio-auma-wrapper .option-btn.selected .radio-circle::after {
content: '✓' !important;
color: #FFFCF9 !important;
font-size: 13px !important;
font-weight: 700 !important;
}
#studio-auma-wrapper .range-container {
margin: 30px 0 !important;
}
#studio-auma-wrapper .range-label {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
font-size: 13px !important;
color: #66352A !important;
font-weight: 600 !important;
}
#studio-auma-wrapper .range-value {
font-size: 22px !important;
font-weight: 700 !important;
color: #371A12 !important;
}
#studio-auma-wrapper input[type="range"] {
width: 100% !important;
height: 6px !important;
border-radius: 4px !important;
background: #E8DFD5 !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
#studio-auma-wrapper input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: #66352A !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(102, 53, 42, 0.3) !important;
}
#studio-auma-wrapper input[type="range"]::-moz-range-thumb {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: #66352A !important;
cursor: pointer !important;
border: none !important;
box-shadow: 0 2px 8px rgba(102, 53, 42, 0.3) !important;
}
#studio-auma-wrapper .nav-buttons {
display: flex !important;
gap: 12px !important;
margin-top: 40px !important;
}
#studio-auma-wrapper .btn {
flex: 1 !important;
padding: 14px !important;
border-radius: 10px !important;
border: none !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
letter-spacing: 0.05em !important;
}
#studio-auma-wrapper .btn-next {
background: #66352A !important;
color: #FFFCF9 !important;
}
#studio-auma-wrapper .btn-next:hover {
background: #49231A !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(102, 53, 42, 0.2) !important;
}
#studio-auma-wrapper .btn-next:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
transform: none !important;
}
#studio-auma-wrapper .btn-back {
background: #F4ECE3 !important;
color: #66352A !important;
border: 2px solid #D5C5B0 !important;
}
#studio-auma-wrapper .btn-back:hover {
background: #E8DFD5 !important;
border-color: #99704D !important;
}
#studio-auma-wrapper .result-box {
background: linear-gradient(135deg, #F4ECE3 0%, #FFFCF9 100%) !important;
border-radius: 12px !important;
padding: 35px !important;
text-align: center !important;
margin: 30px 0 !important;
border: 2px solid #D5C5B0 !important;
}
#studio-auma-wrapper .result-label {
font-size: 10px !important;
text-transform: uppercase !important;
color: #99704D !important;
letter-spacing: 0.15em !important;
margin-bottom: 12px !important;
font-weight: 700 !important;
}
#studio-auma-wrapper .price-min-max {
font-size: 38px !important;
font-weight: 700 !important;
color: #371A12 !important;
margin-bottom: 10px !important;
}
#studio-auma-wrapper .price-note {
font-size: 12px !important;
color: #66352A !important;
margin-bottom: 18px !important;
line-height: 1.5 !important;
}
#studio-auma-wrapper .price-vat {
font-size: 11px !important;
color: #99704D !important;
border-top: 2px solid #D5C5B0 !important;
padding-top: 14px !important;
margin-top: 14px !important;
}
#studio-auma-wrapper .info-box {
background: #FAF7F3 !important;
padding: 14px !important;
border-radius: 10px !important;
margin: 20px 0 !important;
font-size: 12px !important;
line-height: 1.6 !important;
color: #66352A !important;
border-left: 4px solid #C9B29F !important;
}
#studio-auma-wrapper .package-contents {
background: #FAF7F3 !important;
padding: 20px !important;
border-radius: 10px !important;
margin: 20px 0 !important;
border-left: 4px solid #C9B29F !important;
}
#studio-auma-wrapper .package-title {
font-size: 13px !important;
font-weight: 700 !important;
color: #371A12 !important;
margin-bottom: 14px !important;
}
#studio-auma-wrapper .package-items {
display: grid !important;
gap: 8px !important;
}
#studio-auma-wrapper .package-item {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
font-size: 12px !important;
color: #66352A !important;
line-height: 1.4 !important;
}
#studio-auma-wrapper .package-check {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #C9B29F !important;
color: #FFFCF9 !important;
border-radius: 3px !important;
font-weight: 700 !important;
font-size: 11px !important;
margin-top: 1px !important;
}
#studio-auma-wrapper .contact-fields {
display: grid !important;
gap: 12px !important;
margin: 24px 0 !important;
}
#studio-auma-wrapper input[type="text"],
#studio-auma-wrapper input[type="email"],
#studio-auma-wrapper input[type="tel"] {
width: 100% !important;
padding: 12px !important;
border: 2px solid #D5C5B0 !important;
border-radius: 10px !important;
font-size: 13px !important;
font-family: inherit !important;
background: #FFFCF9 !important;
color: #371A12 !important;
transition: border-color 0.2s !important;
}
#studio-auma-wrapper input:focus {
outline: none !important;
border-color: #66352A !important;
box-shadow: 0 0 0 3px rgba(102, 53, 42, 0.1) !important;
}
#studio-auma-wrapper input::placeholder {
color: #99704D !important;
}
#studio-auma-wrapper .success-box {
text-align: center !important;
padding: 60px 20px !important;
}
#studio-auma-wrapper .success-icon {
font-size: 60px !important;
margin-bottom: 20px !important;
}
#studio-auma-wrapper .success-title {
font-size: 28px !important;
font-weight: 700 !important;
margin-bottom: 14px !important;
color: #371A12 !important;
}
#studio-auma-wrapper .success-text {
font-size: 14px !important;
color: #66352A !important;
line-height: 1.7 !important;
}
#studio-auma-wrapper .summary {
background: #F4ECE3 !important;
padding: 20px !important;
border-radius: 10px !important;
margin: 20px 0 !important;
font-size: 13px !important;
line-height: 1.8 !important;
color: #66352A !important;
border-left: 4px solid #C9B29F !important;
}
#studio-auma-wrapper .summary strong {
color: #371A12 !important;
}
Vaihe 1 / 6
Mitä haluat tehdä?
Valitse, mikä kuvaa parhaiten projektiasi.
Vaihe 2 / 6
Kohteen koko
Vaihe 3 / 6
Suunnittelun sisältö
Vaihe 4 / 6
Lisätiedot
Vaihe 5 / 6
Projektisi arvioitu hinta
Arvioitu hintahaarukka (alv 0%)
— – — €
Lopullinen tarjous määritellään tarkemmin keskustelun jälkeen.
+ alv 25,5%: — – — €
⚠️ ±20% hintahaarukka
Tämä on alustava arvio. Tarkka tarjous sovitaan keskustelun jälkeen.
✓
Kiitos!
Yhteenveto on lähetetty sähköpostiisi.
Otan sinuun yhteyttä 24 tunnin sisällä
ja tarkennan tarjouksen tarpeidesi mukaan.
Studio AUMA
alinamustamaa@gmail.com
emailjs.init('pRcT9b_GzCRZbgl76');
let state = { path: null, size: 100, archOption: null, archAddOns: [], roomType: null, interiorDepth: null };
let currentStep = 1;
const icons = {
archA: '',
archB: '',
archC: '',
archD: '',
interiorDry: '',
interiorWet: '',
interiorWhole: '',
interiorLight: '',
interiorStd: '',
interiorFull: '',
interiorDesign: '',
garden: ''
};
const pricing = {
architecture: {
base: 3000, perSqm: 35,
options: {
A: { name: 'Luonnossuunnitelma', multiplier: 0.3 },
B: { name: 'Rakennuslupapiirustukset', multiplier: 1.0 },
C: { name: 'Rakennuslupapiirustukset valmiista luonnoksesta', multiplier: 0.6 },
D: { name: 'Kokonaisvaltainen suunnitelma ja pääsuunnittelu', multiplier: 1.2 }
},
addOns: { sisustus: { name: 'Sisustussuunnittelu' }, piha: { name: 'Pihasuunnitelma' } },
packageContents: {
A: { items: ['Alkukartoitus', 'Visualisointikuvat (1-2 kpl ulkoa)'] },
B: { items: ['Alkukartoitus', 'Visualisointikuvat (1-2 kpl ulkoa)', 'Pääpiirustukset'] },
C: { items: ['Pääpiirustukset valmiista luonnoksesta'] },
D: { items: ['Alkukartoitus', 'Visualisointikuvat (1-2 kpl ulkoa)', 'Pääpiirustukset', 'Pääsuunnittelu'] }
}
},
interior: {
roomTypes: {
dry: { name: 'Makuuhuone, olohuone, työhuone, eteinen', base: 150, perSqm: 35 },
wet: { name: 'Keittiö, kylpyhuone, kodinhoitohuone', base: 150, perSqm: 65 },
whole: { name: 'Koko asunto tai muu suurempi kokonaisuus', base: 400, perSqm: 30 }
},
depths: {
light: { name: 'Pintamateriaalit, värit ja tunnelma', multiplier: 0.5 },
standard: { name: 'Pintamateriaalit, värit, tunnelma sekä tilan toiminnot ja kiintokalusteet', multiplier: 1.0 },
full: { name: 'Kokonaisvaltainen suunnitelma', multiplier: 1.2 }
}
}
};
function updateProgress() {
document.getElementById('progressFill').style.width = (currentStep / 6) * 100 + '%';
document.getElementById('progressText').textContent = `Vaihe ${currentStep} / 6`;
}
function showStep(step) {
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
document.getElementById('step' + step).classList.add('active');
updateProgress();
}
function selectPath(path, btn) {
state.path = path;
document.querySelectorAll('#step1 .option-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
document.getElementById('btn1').disabled = false;
}
function nextStep() {
if (currentStep === 1) {
if (!state.path) return;
currentStep = 2;
initStep2();
} else if (currentStep === 2) {
currentStep = 3;
initStep3();
} else if (currentStep === 3) {
if (!state.archOption && !state.roomType) return;
currentStep = 4;
initStep4();
} else if (currentStep === 4) {
if (document.getElementById('btn4').disabled) return;
currentStep = 5;
calcPrice();
}
showStep(currentStep);
}
function prevStep() {
if (currentStep > 1) {
currentStep--;
showStep(currentStep);
}
}
function initStep2() {
if (state.path === 'architecture') {
document.getElementById('sizeSlider').min = 20;
document.getElementById('sizeSlider').max = 400;
document.getElementById('sizeSlider').value = 150;
state.size = 150;
document.getElementById('step2Desc').textContent = 'Kuinka iso rakennus tai laajennus on?';
} else {
document.getElementById('sizeSlider').min = 10;
document.getElementById('sizeSlider').max = 250;
document.getElementById('sizeSlider').value = 50;
state.size = 50;
document.getElementById('step2Desc').textContent = 'Kuinka iso tila, jonka haluat sisustaa?';
}
document.getElementById('sizeValue').textContent = state.size;
}
function updateSize(val) {
state.size = parseInt(val);
document.getElementById('sizeValue').textContent = val;
}
function initStep3() {
if (state.path === 'architecture') {
document.getElementById('step3Title').textContent = 'Minkä sisältöinen suunnitelma?';
const archHtml = Object.entries(pricing.architecture.options).map(([key, val]) => `
`).join('');
document.getElementById('step3Options').innerHTML = archHtml;
} else {
document.getElementById('step3Title').textContent = 'Mitä tilaa haluat sisustaa?';
const interiorHtml = Object.entries(pricing.interior.roomTypes).map(([key, val]) => `
`).join('');
document.getElementById('step3Options').innerHTML = interiorHtml;
}
}
function selectArchOption(option, btn) {
state.archOption = option;
document.querySelectorAll('#step3Options .option-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
document.getElementById('btn3').disabled = false;
}
function selectRoomType(type, btn) {
state.roomType = type;
document.querySelectorAll('#step3Options .option-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
document.getElementById('btn3').disabled = false;
}
function initStep4() {
if (state.path === 'architecture') {
document.getElementById('step4Title').textContent = 'Haluatko lisäpalveluita?';
const addOnsHtml = `
`;
document.getElementById('step4Options').innerHTML = addOnsHtml;
} else {
document.getElementById('step4Title').textContent = 'Kuinka laaja suunnitelma?';
const depthHtml = Object.entries(pricing.interior.depths).map(([key, val]) => `
`).join('');
document.getElementById('step4Options').innerHTML = depthHtml;
}
}
function selectArchAddOns(addOns, btn) {
state.archAddOns = addOns;
document.querySelectorAll('#step4Options .option-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
document.getElementById('btn4').disabled = false;
}
function selectInteriorDepth(depth, btn) {
state.interiorDepth = depth;
document.querySelectorAll('#step4Options .option-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
document.getElementById('btn4').disabled = false;
}
function renderPackageContents() {
const container = document.getElementById('packageContents');
if (state.path === 'architecture' && state.archOption) {
const pkg = pricing.architecture.packageContents[state.archOption];
if (pkg && pkg.items.length > 0) {
container.innerHTML = `
Paketissa sisältyy:
${pkg.items.map(item => `
`).join('')}
`;
return;
}
}
container.innerHTML = '';
}
function calcPrice() {
let basePrice = 0, summary = '';
if (state.path === 'architecture') {
const opt = pricing.architecture.options[state.archOption];
basePrice = Math.round((pricing.architecture.base + state.size * pricing.architecture.perSqm) * opt.multiplier);
summary = `
Arkkitehtisuunnittelu: ${state.size} m² - ${opt.name}
Perushinta: ${basePrice.toLocaleString('fi-FI')} €`;
if (state.archAddOns.includes('sisustus')) {
const sp = Math.round((400 + state.size * 30) * 0.8);
basePrice += sp;
summary += `
+ Sisustussuunnittelu: ${sp.toLocaleString('fi-FI')} €`;
}
if (state.archAddOns.includes('piha')) {
basePrice += 900;
summary += `
+ Pihasuunnitelma: noin 900 €`;
}
summary += `
Yhteensä: ${basePrice.toLocaleString('fi-FI')} €`;
} else {
const room = pricing.interior.roomTypes[state.roomType];
const depth = pricing.interior.depths[state.interiorDepth];
basePrice = Math.round((room.base + state.size * room.perSqm) * depth.multiplier);
summary = `
Sisustussuunnittelu: ${state.size} m² - ${room.name}
Perushinta: ${basePrice.toLocaleString('fi-FI')} €`;
}
const minPrice = Math.round(basePrice * 0.8);
const maxPrice = Math.round(basePrice * 1.2);
const minVat = Math.round(minPrice * 1.255);
const maxVat = Math.round(maxPrice * 1.255);
document.getElementById('priceMin').textContent = minPrice.toLocaleString('fi-FI');
document.getElementById('priceMax').textContent = maxPrice.toLocaleString('fi-FI');
document.getElementById('priceMinVat').textContent = minVat.toLocaleString('fi-FI');
document.getElementById('priceMaxVat').textContent = maxVat.toLocaleString('fi-FI');
document.getElementById('summary').innerHTML = summary;
renderPackageContents();
}
function sendForm() {
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const phone = document.getElementById('phone').value.trim();
if (!name || !email) {
document.getElementById('sendStatus').textContent = 'Täytä nimi ja sähköposti';
document.getElementById('sendStatus').style.color = '#d32f2f';
return;
}
emailjs.send('service_68r3flc', 'template_b8l40dq', {
to_email: email, to_name: name, phone: phone || 'ei annettu',
summary: document.getElementById('summary').innerHTML,
hinta_arvio: `${document.getElementById('priceMin').textContent} – ${document.getElementById('priceMax').textContent} €`
}).then(() => {
currentStep = 6;
showStep(6);
}).catch(() => {
document.getElementById('sendStatus').textContent = 'Lähetys epäonnistui';
document.getElementById('sendStatus').style.color = '#d32f2f';
});
}
function resetForm() {
state = { path: null, size: 100, archOption: null, archAddOns: [], roomType: null, interiorDepth: null };
currentStep = 1;
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('phone').value = '';
showStep(1);
}
