{"id":3151,"date":"2024-10-30T20:53:23","date_gmt":"2024-10-30T20:53:23","guid":{"rendered":"https:\/\/wordpress-1174581-4858335.cloudwaysapps.com\/?page_id=3151"},"modified":"2025-07-11T16:59:26","modified_gmt":"2025-07-11T04:59:26","slug":"yield-calculator","status":"publish","type":"page","link":"https:\/\/360propertymanagement.co.nz\/?page_id=3151","title":{"rendered":"Yield Calculator"},"content":{"rendered":"<p><!DOCTYPE html><br \/>\n<html><br \/>\n<head><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/p>\n<style>\n        \/* Scoped styles - only affects elements inside .rental-yield-calculator *\/\n        .rental-yield-calculator * {\n            box-sizing: border-box;\n        }\n        .rental-yield-calculator {\n            margin: 0;\n            padding: 20px;\n            min-height: auto;\n            border-radius: 20px;\n        }\n        .rental-yield-calculator .calculator-container {\n            max-width: 100%;\n            margin: 20px auto;\n            background: white;\n            border-radius: 20px;\n            box-shadow: 0 20px 60px rgba(0,0,0,0.15);\n            overflow: hidden;\n            border: 1px solid #e2e8f0;\n        }\n        .rental-yield-calculator .calculator-content {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 0;\n        }\n        .rental-yield-calculator .input-section {\n            padding: 40px;\n            background: #ffffff;\n        }\n        .rental-yield-calculator .results-section {\n            padding: 40px;\n            background: #f8fafc;\n            border-left: 1px solid #e2e8f0;\n        }\n        .rental-yield-calculator .section-title {\n            font-size: 20px;\n            font-weight: 400;\n            color: #2d3748;\n            margin-bottom: 25px;\n            padding-bottom: 10px;\n            border-bottom: 2px solid #FFE513;\n        }\n        .rental-yield-calculator .input-group {\n            margin-bottom: 24px;\n            position: relative;\n        }\n        .rental-yield-calculator label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 400;\n            color: #2d3748;\n            font-size: 15px;\n        }\n        .rental-yield-calculator .input-wrapper {\n            position: relative;\n        }\n        .rental-yield-calculator input, \n        .rental-yield-calculator select {\n            width: 100%;\n            padding: 16px;\n            border: 2px solid #e2e8f0;\n            border-radius: 12px;\n            font-size: 16px;\n            transition: all 0.3s ease;\n            background: #ffffff;\n            color: #2d3748;\n        }\n        .rental-yield-calculator input:focus, \n        .rental-yield-calculator select:focus {\n            outline: none;\n            border-color: #FFE513;\n            box-shadow: 0 0 0 3px rgba(255, 229, 19, 0.1);\n            transform: translateY(-1px);\n        }\n        .rental-yield-calculator .input-icon {\n            position: absolute;\n            left: 16px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: #a0aec0;\n            font-weight: 400;\n            pointer-events: none;\n            z-index: 10;\n        }\n        .rental-yield-calculator .input-with-icon {\n            padding-left: 40px;\n        }\n        .rental-yield-calculator .input-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 15px;\n        }\n        .rental-yield-calculator .formatted-value {\n            color: #718096;\n            font-size: 14px;\n            margin-top: 6px;\n            font-weight: 400;\n            opacity: 0;\n            transform: translateY(-5px);\n            transition: all 0.2s ease;\n        }\n        .rental-yield-calculator .formatted-value.show {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        .rental-yield-calculator .toggle-section {\n            margin: 30px 0;\n            padding: 20px;\n            background: #f7fafc;\n            border-radius: 12px;\n            border: 1px solid #e2e8f0;\n        }\n        .rental-yield-calculator .toggle-header {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            cursor: pointer;\n            user-select: none;\n        }\n        .rental-yield-calculator .toggle-checkbox {\n            width: 20px;\n            height: 20px;\n            border: 2px solid #d1d5db;\n            border-radius: 4px;\n            background: white;\n            position: relative;\n            transition: all 0.2s ease;\n        }\n        .rental-yield-calculator .toggle-checkbox.checked {\n            background: #FFE513;\n            border-color: #FFE513;\n        }\n        .rental-yield-calculator .toggle-checkbox.checked::after {\n            content: '\u2713';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            color: #000;\n            font-size: 12px;\n            font-weight: bold;\n        }\n        .rental-yield-calculator .toggle-content {\n            margin-top: 15px;\n            opacity: 0;\n            max-height: 0;\n            overflow: hidden;\n            transition: all 0.3s ease;\n        }\n        .rental-yield-calculator .toggle-content.show {\n            opacity: 1;\n            max-height: 300px;\n        }\n        .rental-yield-calculator button {\n            width: 100%;\n            padding: 20px;\n            background: linear-gradient(135deg, #FFE513 0%, #f5dc00 100%);\n            border: none;\n            border-radius: 100px;\n            font-size: 18px;\n            font-weight: 700;\n            color: #1a202c;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            box-shadow: 0 6px 20px rgba(255, 229, 19, 0.4);\n            position: relative;\n            overflow: hidden;\n            margin: 30px 0;\n        }\n        .rental-yield-calculator button::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n            transition: left 0.5s;\n        }\n        .rental-yield-calculator button:hover::before {\n            left: 100%;\n        }\n        .rental-yield-calculator button:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 10px 30px rgba(255, 229, 19, 0.5);\n        }\n        .rental-yield-calculator .results-container {\n            opacity: 0;\n            transform: translateY(20px);\n            transition: all 0.5s ease;\n        }\n        .rental-yield-calculator .results-container.show {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        .rental-yield-calculator .yield-display {\n            text-align: center;\n            margin-bottom: 30px;\n            padding: 25px;\n            background: linear-gradient(135deg, #FFE513 0%, #f5dc00 100%);\n            border-radius: 16px;\n            box-shadow: 0 8px 25px rgba(255, 229, 19, 0.3);\n        }\n        .rental-yield-calculator .yield-label {\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a202c;\n            margin-bottom: 8px;\n        }\n        .rental-yield-calculator .yield-value {\n            font-size: 42px;\n            font-weight: 900;\n            color: #1a202c;\n            margin-bottom: 8px;\n        }\n        .rental-yield-calculator .yield-indicator {\n            font-size: 14px;\n            font-weight: 600;\n            color: #2d3748;\n        }\n        .rental-yield-calculator .metrics-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 15px;\n            margin-bottom: 25px;\n        }\n        .rental-yield-calculator .metric-card {\n            background: white;\n            padding: 20px;\n            border-radius: 12px;\n            border: 1px solid #e2e8f0;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n            transition: transform 0.2s ease;\n        }\n        .rental-yield-calculator .metric-card:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n        }\n        .rental-yield-calculator .metric-label {\n            font-size: 13px;\n            color: #718096;\n            font-weight: 500;\n            margin-bottom: 5px;\n        }\n        .rental-yield-calculator .metric-value {\n            font-size: 18px;\n            font-weight: 700;\n            color: #2d3748;\n        }\n        .rental-yield-calculator .detailed-breakdown {\n            background: white;\n            padding: 25px;\n            border-radius: 12px;\n            border: 1px solid #e2e8f0;\n            margin-bottom: 20px;\n        }\n        .rental-yield-calculator .breakdown-title {\n            font-size: 16px;\n            font-weight: 700;\n            color: #2d3748;\n            margin-bottom: 15px;\n        }\n        .rental-yield-calculator .breakdown-row {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 10px 0;\n            border-bottom: 1px solid #f1f5f9;\n        }\n        .rental-yield-calculator .breakdown-row:last-child {\n            border-bottom: none;\n            font-weight: 700;\n            background: #f7fafc;\n            margin: 10px -15px -15px -15px;\n            padding: 15px;\n            border-radius: 0 0 8px 8px;\n        }\n        .rental-yield-calculator .next-steps-section {\n            background: white;\n            padding: 25px;\n            border-radius: 12px;\n            border: 1px solid #e2e8f0;\n            text-align: center;\n        }\n        .rental-yield-calculator .next-steps-title {\n            font-size: 18px;\n            font-weight: 600;\n            color: #2d3748;\n            margin-bottom: 20px;\n        }\n        .rental-yield-calculator .next-steps-buttons {\n            display: flex;\n            gap: 12px;\n        }\n        .rental-yield-calculator .next-steps-btn {\n            flex: 1;\n            padding: 16px;\n            border: none;\n            border-radius: 100px;\n            font-size: 15px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            position: relative;\n            overflow: hidden;\n            margin: 0;\n        }\n        .rental-yield-calculator .finance-btn {\n            background: #2970FA;\n            color: white;\n            box-shadow: 0 4px 12px rgba(41, 112, 250, 0.3);\n        }\n        .rental-yield-calculator .investment-btn {\n            background: #FFE513;\n            color: #1a202c;\n            box-shadow: 0 4px 12px rgba(255, 229, 19, 0.3);\n        }\n        .rental-yield-calculator .next-steps-btn::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n            transition: left 0.5s;\n        }\n        .rental-yield-calculator .next-steps-btn:hover::before {\n            left: 100%;\n        }\n        .rental-yield-calculator .finance-btn:hover {\n            background: #1e5ad1;\n            transform: translateY(-2px);\n            box-shadow: 0 6px 16px rgba(41, 112, 250, 0.4);\n        }\n        .rental-yield-calculator .investment-btn:hover {\n            background: #f5dc00;\n            transform: translateY(-2px);\n            box-shadow: 0 6px 16px rgba(255, 229, 19, 0.4);\n        }\n        \/* Mobile Responsive *\/\n        @media (max-width: 450px) {\n            .rental-yield-calculator .calculator-content {\n                grid-template-columns: 1fr;\n            }\n            .rental-yield-calculator .results-section {\n                border-left: none;\n                border-top: 1px solid #e2e8f0;\n            }\n            .rental-yield-calculator .input-section, \n            .rental-yield-calculator .results-section {\n                padding: 25px;\n            }\n            .rental-yield-calculator .metrics-grid {\n                grid-template-columns: 1fr;\n            }\n            .rental-yield-calculator .input-grid {\n                grid-template-columns: 1fr;\n            }\n            .rental-yield-calculator .yield-value {\n                font-size: 36px;\n            }\n            .rental-yield-calculator .toggle-content.show {\n                max-height: 600px;\n            }\n            .rental-yield-calculator .next-steps-buttons {\n                flex-direction: column;\n                gap: 12px;\n            }\n        }\n    <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<h3>Property Details<\/h3>\n<p>                        <label for=\"propertyValue\">Property Value<\/label><br \/>\n                            $<br \/>\n                            <input type=\"text\" id=\"propertyValue\" placeholder=\"750,000\" oninput=\"formatNumber(this)\"><br \/>\n                        <label for=\"weeklyRent\">Weekly Rent<\/label><br \/>\n                            $<br \/>\n                            <input type=\"number\" id=\"weeklyRent\" placeholder=\"650\" step=\"0.01\"><br \/>\n                            Include Property Expenses (Net Yield)<br \/>\n                                    <label for=\"managementFee\">Management Fee (%)<\/label><br \/>\n                                    <input type=\"number\" id=\"managementFee\" placeholder=\"8\" step=\"0.1\" value=\"8\"><br \/>\n                                    <label for=\"councilRates\">Council Rates (Annual)<\/label><br \/>\n                                        $<br \/>\n                                        <input type=\"number\" id=\"councilRates\" placeholder=\"2500\" step=\"1\"><br \/>\n                                    <label for=\"insurance\">Insurance (Annual)<\/label><br \/>\n                                        $<br \/>\n                                        <input type=\"number\" id=\"insurance\" placeholder=\"1200\" step=\"1\"><br \/>\n                                    <label for=\"maintenance\">Maintenance (Annual)<\/label><br \/>\n                                        $<br \/>\n                                        <input type=\"number\" id=\"maintenance\" placeholder=\"3000\" step=\"1\"><br \/>\n                    <button onclick=\"calculateYield()\">Calculate Yield<\/button><\/p>\n<h3>Investment Analysis<\/h3>\n<p>                            Gross Rental Yield<br \/>\n                            &#8211;<br \/>\n                            Calculate to see your yield<br \/>\n                                Annual Income<br \/>\n                                &#8211;<br \/>\n                                Monthly Income<br \/>\n                                &#8211;<br \/>\n                                Net Yield<br \/>\n                                &#8211;<br \/>\n                                Cash Flow (Monthly)<br \/>\n                                &#8211;<br \/>\n                            Financial Breakdown<br \/>\n                                Annual Rental Income:<br \/>\n                                &#8211;<br \/>\n                                Annual Expenses:<br \/>\n                                &#8211;<br \/>\n                                Net Annual Income:<br \/>\n                                &#8211;<br \/>\n                                Annual Rental Income:<br \/>\n                                &#8211;<br \/>\n                            Ready to take the next step?<br \/>\n                                <button onclick=\"contactFloat()\"><br \/>\n                                    Contact Our Finance Team<br \/>\n                                <\/button><br \/>\n                                <button onclick=\"contactInvestment()\"><br \/>\n                                    Chat to our investment specialists<br \/>\n                                <\/button><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Property Details Property Value $ Weekly Rent $ Include Property Expenses (Net Yield) Management Fee (%) Council [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3151","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=\/wp\/v2\/pages\/3151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3151"}],"version-history":[{"count":0,"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=\/wp\/v2\/pages\/3151\/revisions"}],"wp:attachment":[{"href":"https:\/\/360propertymanagement.co.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}