schema-apps: Occupation career profile card design

app.css

@@ -5404,3 +5404,139 @@ footer a:hover { color: var(--accent-2); }
   .ml-notice { margin: 0 1rem .6rem; }
   .ml-body { padding: .2rem 1rem .8rem; }
 }
+
+/* ── Occupation — Career Profile card ── */
+.card.career-card {
+  border-color: rgba(37,99,235,.1);
+}
+.card.career-card .hd.hidden { display: none; }
+
+/* Header */
+.cc-header {
+  display: flex;
+  align-items: flex-start;
+  gap: .8rem;
+  padding: 1.2rem 1.5rem .8rem;
+}
+.cc-icon {
+  font-size: 1.8rem;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-top: .15rem;
+}
+.cc-header-text {
+  flex: 1;
+}
+.cc-title {
+  font-size: 1.3rem;
+  font-weight: 800;
+  color: var(--ink);
+  line-height: 1.25;
+  margin: 0 0 .4rem;
+}
+.cc-cat-chip {
+  display: inline-block;
+  font-size: .68rem;
+  font-weight: 600;
+  padding: .2rem .6rem;
+  border-radius: 4px;
+  background: rgba(37,99,235,.08);
+  color: #2563eb;
+  border: 1px solid rgba(37,99,235,.15);
+  letter-spacing: .01em;
+}
+
+/* Salary band */
+.cc-salary-box {
+  margin: 0 1.5rem .8rem;
+  padding: .8rem 1rem;
+  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(37,99,235,.08));
+  border: 1px solid rgba(37,99,235,.1);
+  border-radius: 8px;
+}
+.cc-salary-label {
+  font-size: .68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .1em;
+  color: var(--muted-2);
+  margin-bottom: .25rem;
+}
+.cc-salary-val {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #2563eb;
+  line-height: 1.4;
+}
+
+/* Section label (shared) */
+.cc-section-label {
+  font-size: .7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  color: var(--muted-2);
+  margin-bottom: .4rem;
+}
+
+/* Skills as tag chips */
+.cc-skill-section {
+  padding: .2rem 1.5rem .6rem;
+}
+.cc-skill-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .3rem;
+}
+.cc-skill-chip {
+  font-size: .73rem;
+  font-weight: 600;
+  padding: .25rem .6rem;
+  border-radius: 4px;
+  background: rgba(37,99,235,.06);
+  color: #2563eb;
+  border: 1px solid rgba(37,99,235,.1);
+}
+
+/* Qualifications list */
+.cc-qual-section {
+  padding: .2rem 1.5rem .6rem;
+}
+.cc-qual-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.cc-qual-list li {
+  position: relative;
+  padding-left: 1.1rem;
+  font-size: .82rem;
+  line-height: 1.6;
+  color: var(--ink-2);
+  margin-bottom: .25rem;
+}
+.cc-qual-list li::before {
+  content: "\u2713";
+  position: absolute;
+  left: 0;
+  color: #2563eb;
+  font-weight: 700;
+}
+
+/* Role overview */
+.cc-overview {
+  padding: .2rem 1.5rem 1rem;
+}
+.cc-overview-body {
+  font-size: .84rem;
+  line-height: 1.75;
+  color: var(--muted);
+  margin: 0;
+}
+
+@media (max-width: 480px) {
+  .cc-header { padding: 1rem 1rem .6rem; gap: .6rem; }
+  .cc-title { font-size: 1.1rem; }
+  .cc-salary-box { margin: 0 1rem .6rem; padding: .6rem .8rem; }
+  .cc-skill-section, .cc-qual-section, .cc-overview { padding-left: 1rem; padding-right: 1rem; }
+}

app.js

@@ -3548,6 +3548,98 @@
       }
     }
 
+    // ── OCCUPATION (Career Profile card) ──
+    if (cfg.type === "Occupation") {
+      const card = document.querySelector(".card");
+      if (card) card.classList.add("career-card");
+
+      // Hide normal header
+      const hd = document.querySelector(".hd");
+      if (hd) hd.classList.add("hidden");
+
+      // Remove generic hero
+      const heroMount = document.getElementById("hero-mount");
+      if (heroMount) heroMount.querySelector('.hero')?.remove();
+
+      // ── Header: job title big + category chip ──
+      const ccHeader = document.createElement("div"); ccHeader.className = "cc-header";
+      const ccIcon = document.createElement("div"); ccIcon.className = "cc-icon";
+      ccIcon.textContent = "\u{1F4BC}";
+      ccHeader.appendChild(ccIcon);
+      const ccHeaderText = document.createElement("div"); ccHeaderText.className = "cc-header-text";
+      const h1 = document.createElement("h1"); h1.className = "cc-title";
+      h1.textContent = data[cfg.titleProp] || "";
+      ccHeaderText.appendChild(h1);
+      const occCat = data["occupationalCategory"];
+      if (occCat) {
+        const catChip = document.createElement("span"); catChip.className = "cc-cat-chip";
+        catChip.textContent = occCat;
+        ccHeaderText.appendChild(catChip);
+        handled.add("occupationalCategory");
+      }
+      ccHeader.appendChild(ccHeaderText);
+      heroMount.appendChild(ccHeader);
+      handled.add("name"); handled.add("image");
+
+      // ── Prominent salary band ──
+      const salary = data["estimatedSalary"];
+      if (salary) {
+        const salaryBox = document.createElement("div"); salaryBox.className = "cc-salary-box";
+        salaryBox.innerHTML = "<div class=\"cc-salary-label\">\u{1F4B0} Estimated Salary</div><div class=\"cc-salary-val\">" + salary + "</div>";
+        view.appendChild(salaryBox);
+        handled.add("estimatedSalary");
+      }
+
+      // ── Skills as tag chips ──
+      const skills = data["skills"];
+      if (skills) {
+        const skillSection = document.createElement("div"); skillSection.className = "cc-skill-section";
+        const label = document.createElement("div"); label.className = "cc-section-label";
+        label.textContent = "Key Skills";
+        skillSection.appendChild(label);
+        const chipRow = document.createElement("div"); chipRow.className = "cc-skill-chips";
+        skills.split(",").forEach(s => {
+          const chip = document.createElement("span"); chip.className = "cc-skill-chip";
+          chip.textContent = s.trim();
+          chipRow.appendChild(chip);
+        });
+        skillSection.appendChild(chipRow);
+        view.appendChild(skillSection);
+        handled.add("skills");
+      }
+
+      // ── Qualifications as a bulleted list ──
+      const quals = data["qualifications"];
+      if (quals) {
+        const qualSection = document.createElement("div"); qualSection.className = "cc-qual-section";
+        const label = document.createElement("div"); label.className = "cc-section-label";
+        label.textContent = "Qualifications";
+        qualSection.appendChild(label);
+        const ul = document.createElement("ul"); ul.className = "cc-qual-list";
+        quals.split(";").forEach(q => {
+          const li = document.createElement("li"); li.textContent = q.trim();
+          ul.appendChild(li);
+        });
+        qualSection.appendChild(ul);
+        view.appendChild(qualSection);
+        handled.add("qualifications");
+      }
+
+      // ── Description as role overview ──
+      const desc = data["description"];
+      if (desc) {
+        const overview = document.createElement("div"); overview.className = "cc-overview";
+        const label = document.createElement("div"); label.className = "cc-section-label";
+        label.textContent = "Role Overview";
+        overview.appendChild(label);
+        const body = document.createElement("p"); body.className = "cc-overview-body";
+        body.textContent = desc;
+        overview.appendChild(body);
+        view.appendChild(overview);
+        handled.add("description");
+      }
+    }
+
     return handled;
   }