diff --git a/app.css b/app.css index b834c30..81ca47f 100644 --- a/app.css +++ b/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; } +} diff --git a/app.js b/app.js index b1221f2..8f14a68 100644 --- a/app.js +++ b/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 = "
\u{1F4B0} Estimated Salary
" + salary + "
"; + 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; }