/** * GZJ SEO Content Transformer * Reads plain-text key:value template from #about-content > div * and renders it as styled HTML. * * Add to the job search page: * */ (function () { 'use strict'; var TARGET = '#about-content > div'; var SCOPE = 'gzj-sc'; /* ── CSS ─────────────────────────────────────────────────────────── */ var CSS = '\ .gzj-sc{font-family:inherit;box-sizing:border-box;color:#1a1a1a;line-height:1.65}\ .gzj-sc *,.gzj-sc *::before,.gzj-sc *::after{box-sizing:inherit}\ \ .gzj-sc .gzj-hero{background:linear-gradient(135deg,#3f1c79 0%,#5a2fa0 100%);padding:3rem 2rem 2.5rem;position:relative;overflow:hidden}\ .gzj-sc .gzj-hero::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:rgba(139,92,246,.22);pointer-events:none}\ .gzj-sc .gzj-hero-inner{max-width:860px;margin:0 auto}\ .gzj-sc .gzj-hero-tag{display:inline-block;background:rgba(255,255,255,.15);color:#e9d5ff;font-size:14px;font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:1rem;letter-spacing:.02em}\ .gzj-sc .gzj-hero-title{font-size:36px!important;font-weight:800!important;color:#fff!important;line-height:1.15!important;margin:0 0 1rem!important}\ .gzj-sc .gzj-hero-intro{font-size:17px;color:#ddd6fe;margin:0 0 1.5rem;max-width:620px;line-height:1.7}\ .gzj-sc .gzj-stats{display:flex;flex-wrap:wrap;gap:10px}\ .gzj-sc .gzj-stat-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 18px;text-align:center;min-width:100px}\ .gzj-sc .gzj-sp-num{display:block;font-size:22px;font-weight:800;color:#fff;line-height:1}\ .gzj-sc .gzj-sp-label{display:block;font-size:12px;color:#c4b5fd;margin-top:4px}\ \ .gzj-sc .gzj-badge-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:1.5rem 2rem;max-width:860px;margin:0 auto}\ .gzj-sc .gzj-badge{font-size:13px;font-weight:600;padding:5px 14px;border-radius:20px;background:#eef0fc;color:#5a2fa0;border:1px solid #c8aee8}\ \ .gzj-sc .gzj-section{padding:2rem 2rem 1rem;max-width:860px;margin:0 auto}\ .gzj-sc .gzj-section-divider{text-align:center;margin-bottom:.75rem}\ .gzj-sc .gzj-section-divider span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5a2fa0;background:#eef0fc;padding:5px 14px;border-radius:20px}\ .gzj-sc .gzj-section-heading{font-size:24px!important;font-weight:800!important;color:#111!important;margin:0 0 .5rem!important;text-align:center;line-height:1.25!important}\ .gzj-sc .gzj-section-intro{font-size:15px;color:#555;text-align:center;max-width:540px;margin:0 auto 1.5rem;line-height:1.7}\ \ .gzj-sc .gzj-careers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:1.25rem}\ .gzj-sc .gzj-career-card{background:#fff;border-radius:14px;padding:1.3rem 1.4rem;border:1.5px solid #e9e9e7;border-top:3px solid #5a2fa0}\ .gzj-sc .gzj-cc-icon{font-size:26px;margin-bottom:.6rem;line-height:1}\ .gzj-sc .gzj-cc-title{font-size:15px;font-weight:700;color:#111;margin-bottom:3px}\ .gzj-sc .gzj-cc-salary{font-size:14px;font-weight:600;color:#5a2fa0;margin-bottom:.6rem}\ .gzj-sc .gzj-cc-desc{font-size:14px;color:#555;line-height:1.65}\ \ .gzj-sc .gzj-city-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:1.25rem}\ .gzj-sc .gzj-city-card{background:#fff;border-radius:12px;border:1.5px solid #e9e9e7;padding:1rem 1.1rem;display:flex;gap:11px;align-items:flex-start}\ .gzj-sc .gzj-ci-icon{width:38px;height:38px;border-radius:9px;background:#eef0fc;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}\ .gzj-sc .gzj-ci-title{font-size:14px;font-weight:700;color:#111;margin-bottom:3px}\ .gzj-sc .gzj-ci-text{font-size:13px;color:#555;line-height:1.65}\ \ .gzj-sc .gzj-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.25rem}\ .gzj-sc .gzj-fit-card{background:#fff;border-radius:14px;padding:1.3rem 1.4rem;border:1.5px solid #e9e9e7;border-top:3px solid #e9e9e7}\ .gzj-sc .gzj-fit-good{border-top-color:#1D9E75}\ .gzj-sc .gzj-fit-bad{border-top-color:#D85A30}\ .gzj-sc .gzj-fit-head{display:flex;align-items:center;gap:10px;margin-bottom:.9rem}\ .gzj-sc .gzj-fit-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}\ .gzj-sc .gzj-fit-good .gzj-fit-icon{background:#d1fae5;color:#065f46}\ .gzj-sc .gzj-fit-bad .gzj-fit-icon{background:#fee2e2;color:#991b1b}\ .gzj-sc .gzj-fit-label{font-size:14px;font-weight:700;color:#111}\ .gzj-sc .gzj-fit-card ul{list-style:none;padding:0;margin:0}\ .gzj-sc .gzj-fit-card li{font-size:13px;color:#444;padding:6px 0;border-bottom:1px solid #f3f3f1;line-height:1.5}\ .gzj-sc .gzj-fit-card li:last-child{border-bottom:none}\ \ .gzj-sc .gzj-cta-wrap{padding:1.5rem 2rem 2.5rem;max-width:860px;margin:0 auto}\ .gzj-sc .gzj-cta-block{background:linear-gradient(135deg,#3f1c79,#5a2fa0);border-radius:16px;padding:2.5rem 2rem;text-align:center}\ .gzj-sc .gzj-cta-heading{font-size:24px!important;font-weight:800!important;color:#fff!important;margin:0 0 .65rem!important;line-height:1.2!important}\ .gzj-sc .gzj-cta-sub{font-size:16px;color:#ddd6fe;margin:0 auto 1.5rem;max-width:440px;line-height:1.6}\ .gzj-sc .gzj-cta-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#5a2fa0;font-size:16px;font-weight:800;padding:13px 28px;border-radius:10px;text-decoration:none;transition:opacity .15s}\ .gzj-sc .gzj-cta-btn:hover,.gzj-sc .gzj-cta-btn:focus{opacity:.9}\ .gzj-sc .gzj-cta-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}\ .gzj-sc .gzj-cta-btn svg{width:15px;height:15px}\ \ @media(max-width:640px){\ .gzj-sc .gzj-hero{padding:2rem 1.25rem 1.75rem}\ .gzj-sc .gzj-hero-title{font-size:26px!important}\ .gzj-sc .gzj-section{padding:1.5rem 1.25rem .75rem}\ .gzj-sc .gzj-badge-row,.gzj-sc .gzj-cta-wrap{padding-left:1.25rem;padding-right:1.25rem}\ .gzj-sc .gzj-careers-grid{grid-template-columns:1fr}\ .gzj-sc .gzj-city-grid,.gzj-sc .gzj-fit-grid{grid-template-columns:1fr}\ }\ @media(prefers-reduced-motion:reduce){.gzj-sc .gzj-cta-btn{transition:none}}\ '; /* ── HELPERS ─────────────────────────────────────────────────────── */ function esc(str) { return String(str == null ? '' : str) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } /* ── BUILDERS ────────────────────────────────────────────────────── */ function buildHero(d) { var location = [d.city, d.state].filter(Boolean).map(esc).join(', '); var statsHTML = ''; if (d.stats && d.stats.length) { var pills = d.stats.map(function (s) { return ''; }).join(''); statsHTML = ''; } return '

' + '

' + '📍 ' + location + '' + '

' + esc(d.tagline || ('Gen Z Jobs in ' + d.city)) + '

' + (d.intro ? '

' + esc(d.intro) + '

' : '') + statsHTML + '

' + '

'; } function buildBadges(badges) { if (!badges || !badges.length) return ''; return ''; } function buildIndustries(d) { if (!d.industries || !d.industries.length) return ''; var cards = d.industries.map(function (ind) { return ''; }).join(''); return ''; } function buildHighlights(d) { if (!d.highlights || !d.highlights.length) return ''; var cards = d.highlights.map(function (h) { return ''; }).join(''); return ''; } function buildFit(d) { if ((!d.pros || !d.pros.length) && (!d.cons || !d.cons.length)) return ''; var prosHTML = ''; var consHTML = ''; if (d.pros && d.pros.length) { prosHTML = ''; } if (d.cons && d.cons.length) { consHTML = ''; } return ''; } function buildCTA(d) { if (!d.cta_url || !d.cta_text) return ''; var arrowSVG = ''; return ''; } function buildAll(d) { return ''; } /* ── CORE ────────────────────────────────────────────────────────── */ function injectStyles() { if (document.getElementById('gzj-sc-styles')) return; var style = document.createElement('style'); style.id = 'gzj-sc-styles'; style.textContent = CSS; (document.head || document.body).appendChild(style); } function kv(line) { var sep = line.indexOf(': '); if (sep === -1) return null; return [line.slice(0, sep).toLowerCase().trim(), line.slice(sep + 2).trim()]; } function isDivider(line) { return /^={5,}/.test(line); } function parseSections(lines) { var sections = {}; var name = null; var buf = []; for (var i = 0; i < lines.length; i++) { var line = lines[i].trim(); if (isDivider(line) && i + 2 < lines.length && isDivider(lines[i + 2].trim())) { if (name) sections[name] = buf; name = lines[i + 1].trim().toUpperCase(); buf = []; i += 2; } else if (name && line) { buf.push(line); } } if (name) sections[name] = buf; return sections; } function parseText(container) { var raw = (typeof container.innerText !== 'undefined') ? container.innerText : container.textContent; var lines = raw.split('\n'); var secs = parseSections(lines); var data = { stats: [], badges: [], industries: [], highlights: [], pros: [], cons: [] }; /* CITY INFO */ var groups = {}; (secs['CITY INFO'] || []).forEach(function (line) { var p = kv(line); if (!p) return; var k = p[0], v = p[1]; if (k === 'city') data.city = v; else if (k === 'state') data.state = v; else if (k === 'page title') data.tagline = v; else if (k === 'intro') data.intro = v; else if (/^stat \d+$/.test(k)) { var parts = v.split('|'); data.stats.push({ value: parts[0].trim(), label: (parts[1] || '').trim() }); } else if (/^tag \d+$/.test(k)) data.badges.push(v); }); /* INDUSTRIES */ groups = {}; (secs['INDUSTRIES'] || []).forEach(function (line) { var p = kv(line); if (!p) return; var k = p[0], v = p[1]; if (k === 'section title') data.industries_heading = v; else if (k === 'section intro') data.industries_intro = v; else { var m = k.match(/^industry (\d+) - (\w+)$/); if (m) { var n = m[1], prop = m[2]; groups[n] = groups[n] || {}; if (prop === 'icon') groups[n].icon = v; else if (prop === 'title') groups[n].title = v; else if (prop === 'salary') groups[n].salary = v; else if (prop === 'description') groups[n].description = v; } } }); Object.keys(groups).sort(function (a, b) { return a - b; }).forEach(function (n) { data.industries.push(groups[n]); }); /* CITY HIGHLIGHTS */ groups = {}; (secs['CITY HIGHLIGHTS'] || []).forEach(function (line) { var p = kv(line); if (!p) return; var k = p[0], v = p[1]; if (k === 'section title') data.highlights_heading = v; else { var m = k.match(/^highlight (\d+) - (\w+)$/); if (m) { var n = m[1], prop = m[2]; groups[n] = groups[n] || {}; if (prop === 'icon') groups[n].icon = v; else if (prop === 'title') groups[n].title = v; else if (prop === 'text') groups[n].text = v; } } }); Object.keys(groups).sort(function (a, b) { return a - b; }).forEach(function (n) { data.highlights.push(groups[n]); }); /* FIT CHECK */ (secs['FIT CHECK'] || []).forEach(function (line) { var p = kv(line); if (!p) return; var k = p[0], v = p[1]; if (k === 'section title') data.fit_heading = v; else if (/^good fit \d+$/.test(k)) data.pros.push(v); else if (/^think twice \d+$/.test(k)) data.cons.push(v); }); /* CALL TO ACTION */ (secs['CALL TO ACTION'] || []).forEach(function (line) { var p = kv(line); if (!p) return; var k = p[0], v = p[1]; if (k === 'heading') data.cta_heading = v; else if (k === 'subtext') data.cta_subtext = v; else if (k === 'button text') data.cta_text = v; else if (k === 'button url') data.cta_url = v; }); return data; } function transform() { var container = document.querySelector(TARGET); if (!container) return false; container.style.visibility = 'hidden'; var data = parseText(container); if (!data.city) { container.style.visibility = ''; return false; } injectStyles(); container.innerHTML = buildAll(data); container.style.visibility = ''; return true; } function init() { if (transform()) return; /* Tab content may be lazy-loaded — observe until it appears */ var observer = new MutationObserver(function () { if (transform()) observer.disconnect(); }); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(function () { observer.disconnect(); }, 10000); } document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', init) : init(); })();