.

2 files changed +196 −4

Diff

diff --git a/lifestyle-calculator-data.json b/lifestyle-calculator-data.json
index e79e7a4..040defe 100644
--- a/lifestyle-calculator-data.json
+++ b/lifestyle-calculator-data.json
@@ -188,6 +188,10 @@
       "income": 10000000,
       "label": "Ultra Elite",
       "description": "Your family's biggest worry? Which continent for the summer. Influencing broader causes.",
+      "milestone": {
+        "title": "World Shaper",
+        "emoji": "🌍"
+      },
       "budgetAllocation": {
         "Wealth Management": 50,
         "Taxes": 20,
@@ -199,10 +203,6 @@
       "income": 25000000,
       "label": "Billionaire Class",
       "description": "Price tags are suggestions. Next stop: shaping global change or funding major family endeavors.",
-      "milestone": {
-        "title": "World Shaper",
-        "emoji": "🌍"
-      },
       "budgetAllocation": {
         "Wealth Management": 60,
         "Lifestyle": 20,
diff --git a/lifestyle-calculator.html b/lifestyle-calculator.html
index 2cd82b8..3b0ad16 100644
--- a/lifestyle-calculator.html
+++ b/lifestyle-calculator.html
@@ -475,6 +475,198 @@
         }
 
 
+        .item-budget-percent {
+            color: var(--success-color);
+            font-size: 0.8rem;
+            font-weight: 500;
+            margin-top: 0.4rem;
+            display: block;
+        }
+
+        .badges-container {
+            margin-top: 0.75rem;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        .badge-custom {
+            padding: 0.35rem 0.85rem;
+            border-radius: 50px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-width: 1px;
+            border-style: solid;
+            display: inline-flex;
+            align-items: center;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+            transition: all 0.2s ease-in-out;
+        }
+
+        .badge-custom:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
+        }
+
+        .badge-budgetSmart {
+            background-color: var(--badge-budgetSmart-bg);
+            color: var(--badge-budgetSmart-text);
+            border-color: var(--badge-budgetSmart-text);
+        }
+
+        .badge-milestone {
+            background-color: var(--badge-milestone-bg);
+            color: var(--badge-milestone-text);
+            border-color: var(--badge-milestone-text);
+        }
+
+        .badge-essential {
+            background-color: var(--badge-essential-bg);
+            color: var(--badge-essential-text);
+            border-color: var(--badge-essential-text);
+        }
+
+        .badge-premium {
+            background-color: var(--badge-premium-bg);
+            color: var(--badge-premium-text);
+            border-color: var(--badge-premium-text);
+        }
+
+        .badge-ultraPremium {
+            background-color: var(--badge-ultraPremium-bg);
+            color: var(--badge-ultraPremium-text);
+            border-color: var(--badge-ultraPremium-text);
+        }
+
+        .badge-aspirational {
+            background-color: var(--badge-aspirational-bg);
+            color: var(--badge-aspirational-text);
+            border-color: var(--badge-aspirational-text);
+        }
+
+        .badge-convenience {
+            background-color: var(--badge-convenience-bg);
+            color: var(--badge-convenience-text);
+            border-color: var(--badge-convenience-text);
+        }
+
+        .badge-statusSymbol {
+            background-color: var(--badge-statusSymbol-bg);
+            color: var(--badge-statusSymbol-text);
+            border-color: var(--badge-statusSymbol-text);
+        }
+
+        .dining {
+            border-left-color: #fd7e14;
+        }
+
+        .dining .category-icon {
+            color: #fd7e14;
+        }
+
+        .dining .category-item-icon {
+            color: #fd7e14 !important;
+        }
+
+        .travel {
+            border-left-color: #0dcaf0;
+        }
+
+        .travel .category-icon {
+            color: #0dcaf0;
+        }
+
+        .travel .category-item-icon {
+            color: #0dcaf0 !important;
+        }
+
+        .housing {
+            border-left-color: #198754;
+        }
+
+        .housing .category-icon {
+            color: #198754;
+        }
+
+        .housing .category-item-icon {
+            color: #198754 !important;
+        }
+
+        .transportation {
+            border-left-color: #6f42c1;
+        }
+
+        .transportation .category-icon {
+            color: #6f42c1;
+        }
+
+        .transportation .category-item-icon {
+            color: #6f42c1 !important;
+        }
+
+        .entertainment {
+            border-left-color: #d63384;
+        }
+
+        .entertainment .category-icon {
+            color: #d63384;
+        }
+
+        .entertainment .category-item-icon {
+            color: #d63384 !important;
+        }
+
+        .education {
+            border-left-color: #ffc107;
+        }
+
+        .education .category-icon {
+            color: #ffc107;
+        }
+
+        .education .category-item-icon {
+            color: #ffc107 !important;
+        }
+
+        .health-wellness {
+            border-left-color: #e83e8c;
+        }
+
+        .health-wellness .category-icon {
+            color: #e83e8c;
+        }
+
+        .health-wellness .category-item-icon {
+            color: #e83e8c !important;
+        }
+
+        .services {
+            border-left-color: #6c757d;
+        }
+
+        .services .category-icon {
+            color: #6c757d;
+        }
+
+        .services .category-item-icon {
+            color: #6c757d !important;
+        }
+
+        .financial-planning {
+            border-left-color: #20c997;
+        }
+
+        .financial-planning .category-icon {
+            color: #20c997;
+        }
+
+        .financial-planning .category-item-icon {
+            color: #20c997 !important;
+        }
+
+
         #milestone-popup {
             position: fixed;
             bottom: -100px;