<!– VIVID CALCULATOR (no plugin) –>
<div id=”vivid-calc-embed”>
<style>
/* Scoped styles so theme CSS won’t override */
#vivid-calc-embed .vivid-calc{background:linear-gradient(180deg,#0b1022,#0f172a);padding:8px;border-radius:16px}
#vivid-calc-embed .vivid-calc,
#vivid-calc-embed .vivid-calc *{color:#fff !important;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,”Helvetica Neue”,Arial,”Noto Sans”,sans-serif}
#vivid-calc-embed .wrap{max-width:980px;margin:32px auto;padding:16px}
#vivid-calc-embed .card{background:linear-gradient(180deg,#0f172a,#0b1022);border:1px solid rgba(255,255,255,0.08);box-shadow:0 10px 30px rgba(0,0,0,0.35);border-radius:16px;padding:20px}
#vivid-calc-embed h1{font-size:clamp(22px,3.5vw,30px);margin:0 0 10px 0;letter-spacing:.3px}
#vivid-calc-embed .lead{margin:4px 0 18px 0}
#vivid-calc-embed .grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:800px){#vivid-calc-embed .grid{grid-template-columns:1.2fr 1fr}}
#vivid-calc-embed label{display:block;font-weight:600;margin:0 0 6px 2px}
#vivid-calc-embed select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.14);background:#0b1226;color:#fff;outline:none}
#vivid-calc-embed select:focus{border-color:#22d3ee}
#vivid-calc-embed .row{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){#vivid-calc-embed .row{grid-template-columns:1fr 1fr}}
#vivid-calc-embed .pill{display:inline-flex;gap:8px;align-items:center;background:#0b1226;border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px}
#vivid-calc-embed .out{display:grid;gap:10px}
#vivid-calc-embed .box{background:#0b1226;border:1px solid rgba(255,255,255,0.14);padding:14px;border-radius:12px}
#vivid-calc-embed .out h3{margin:0 0 8px 0;font-size:15px}
#vivid-calc-embed .price{font-size:clamp(24px,4.2vw,34px);font-weight:800;letter-spacing:.4px}
#vivid-calc-embed .btn{appearance:none;border:1px solid rgba(255,255,255,.18);background:#0b1226;color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer}
#vivid-calc-embed .btn:hover{border-color:#22d3ee}
</style>
<div class=”vivid-calc”>
<div class=”wrap”>
<div class=”card”>
<h1>Instant Price Calculator</h1>
<p class=”lead”>Pick a service, your house size and storeys. Multi-storey adds an extra to House Wash, Window Cleaning, and Package totals.</p>
<div class=”grid”>
<div>
<div class=”row”>
<div>
<label for=”vc-service”>Service</label>
<select id=”vc-service”>
<option value=”house”>House Wash</option>
<option value=”windows”>Window Cleaning</option>
<option value=”package”>Package (House + Windows)</option>
</select>
</div>
<div>
<label for=”vc-tier”>House Size</label>
<select id=”vc-tier”>
<option value=”tiny”>Tiny (≤100 m² · 1–2 BR)</option>
<option value=”small”>Small (100–150 m² · 3 BR)</option>
<option value=”medium”>Medium (150–200 m² · 3–4 BR)</option>
<option value=”large”>Large (200–250 m² · 4–5 BR)</option>
<option value=”massive”>Massive (250–300 m² · 5 BR)</option>
<option value=”xl”>Extra Large (300–450 m² · 5–6 BR)</option>
</select>
</div>
</div>
<div class=”row”>
<div>
<label for=”vc-storeys”>Storeys</label>
<select id=”vc-storeys”>
<option value=”1″>Single storey (no extra)</option>
<option value=”2″>Double storey (+$80)</option>
<option value=”3″>Triple storey (+$160)</option>
</select>
</div>
</div>
<div class=”pill” style=”margin-top:8px”>Prices are averages. Access, condition & extras may change the final quote.</div>
</div>
<div class=”out”>
<div class=”box”>
<h3>Estimated Price (excl. GST)</h3>
<div class=”price” id=”vc-exgst”>$0</div>
<h3>Estimated Price (incl. GST)</h3>
<div class=”price” id=”vc-incgst”>$0</div>
<div class=”note”>GST calculated at 15%.</div>
</div>
<button class=”btn” id=”vc-copy” title=”Copy current quote”>Copy quote text</button>
</div>
</div>
<div class=”footer”>
<span class=”badge”>Vivid Cleaning · Calculator</span>
</div>
</div>
</div>
</div>
<script>
(function(){
// Auto-scroll ~800px on load (for this page only)
function autoJump(){
// Use smooth behavior if you prefer: { top: 800, behavior: ‘smooth’ }
window.scrollTo({ top: 800, left: 0 });
}
if (document.readyState === ‘complete’) {
autoJump();
} else {
window.addEventListener(‘load’, autoJump);
}
// Pricing data (ex GST)
const HOUSE = { tiny:254, small:332, medium:394, large:463, massive:530, xl:603 };
const WIN = { tiny:134, small:190, medium:237, large:277, massive:320, xl:402 };
const STOREY = {1:”Single storey (no extra)”,2:”Double storey (+$80)”,3:”Triple storey (+$160)”};
const fmt = n => “$” + n.toLocaleString(undefined,{maximumFractionDigits:0});
function computePrice(svc, tier, storeys){
const add = (storeys==2 ? 80 : (storeys==3 ? 160 : 0));
const h = HOUSE[tier] || 0, w = WIN[tier] || 0;
if (svc===’house’) return h + add;
if (svc===’windows’) return w + add;
return h + w + add; // package
}
function render(){
const svc = document.getElementById(‘vc-service’).value;
const tier = document.getElementById(‘vc-tier’).value;
const storeys = parseInt(document.getElementById(‘vc-storeys’).value,10) || 1;
const val = computePrice(svc, tier, storeys);
document.getElementById(‘vc-exgst’).textContent = fmt(Math.round(val));
document.getElementById(‘vc-incgst’).textContent = fmt(Math.round(val * 1.15));
}
function copyQuote(){
const map = {house:’House Wash’, windows:’Window Cleaning’, package:’Package (House + Windows)’};
const svcSel = document.getElementById(‘vc-service’);
const tierSel = document.getElementById(‘vc-tier’);
const storeySel = document.getElementById(‘vc-storeys’);
const text =
`${map[svcSel.value]} — ${tierSel.options[tierSel.selectedIndex].text} — ${STOREY[parseInt(storeySel.value,10)]}\n` +
`Estimate: ${document.getElementById(‘vc-exgst’).textContent} excl. GST | ${document.getElementById(‘vc-incgst’).textContent} incl. GST`;
navigator.clipboard.writeText(text).then(()=>{
const btn = document.getElementById(‘vc-copy’);
btn.textContent = ‘Copied!’;
setTimeout(()=>btn.textContent=’Copy quote text’, 1200);
});
}
// Init (handles deferred scripts)
function boot(){
[‘vc-service’,’vc-tier’,’vc-storeys’].forEach(id=>{
const el = document.getElementById(id);
el.addEventListener(‘input’, render);
el.addEventListener(‘change’, render);
});
document.getElementById(‘vc-copy’).addEventListener(‘click’, copyQuote);
render();
}
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, boot);
} else {
boot();
}
})();
</script>
<noscript>
<p style=”color:#fff”>Enable JavaScript to use the calculator.</p>
</noscript>
</div>