Organizational Chart

.teka-org-wrap{ --teka-navy:#0f2557; --teka-cyan:#16aee6; --teka-cyan-2:#0c8fc4; --teka-blue-title:#08568F; --teka-light:#dbeaf7; --teka-light-2:#eef5fc; --teka-bg:#f5f8fc; --teka-text:#1a2436; --teka-muted:#5a6577; --teka-card:#ffffff; --teka-shadow:0 2px 8px rgba(15,37,87,.08); --teka-radius:10px; --porto-container-spacing:0; background:var(--teka-bg); color:var(--teka-text); padding:24px 16px; line-height:1.4; font-weight:400; font-family:'Roboto', sans-serif; width:100%; box-sizing:border-box; } .teka-org-wrap *{box-sizing:border-box;font-family:inherit} .teka-org-wrap .container{ max-width:1500px;margin:0 auto;position:relative; padding-left:0 !important;padding-right:0 !important; } .teka-org-wrap .top-row{ padding-left:0 !important;padding-right:0 !important; } .teka-org-wrap .connectors{ position:absolute;top:0;left:0; pointer-events:none;overflow:visible; z-index:1;display:block; } @media (max-width:1100px){.teka-org-wrap .connectors{display:none}} .teka-org-wrap .top-banner{ background:#ddd;color:#0f2557;border-radius:var(--teka-radius); padding:14px 22px;text-align:center;font-weight:700; font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:.5px; margin-bottom:22px;box-shadow:var(--teka-shadow); } .teka-org-wrap .top-row{ display:grid;grid-template-columns:1.1fr 1.9fr;gap:20px; align-items:stretch;margin-bottom:28px;position:relative; } .teka-org-wrap .top-row-left, .teka-org-wrap .top-row-right{display:flex;gap:16px;align-items:stretch} @media (max-width:1200px){ .teka-org-wrap .top-row{grid-template-columns:1fr;gap:14px} .teka-org-wrap .top-row-left, .teka-org-wrap .top-row-right{flex-wrap:wrap} .teka-org-wrap .mid-grid .card{flex:none} } .teka-org-wrap .tall-anchor{ background:var(--teka-navy);color:#fff;border-radius:var(--teka-radius); padding:18px 0;width:130px;min-height:220px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;font-weight:600;gap:12px;font-size:.92rem; transition:transform .3s ease, box-shadow .3s ease;flex-shrink:0; } .teka-org-wrap .tall-anchor:hover{transform:scale(1.02);box-shadow:0 8px 22px rgba(15,37,87,.18)} .teka-org-wrap .tall-anchor.cyan{background: #095977} .teka-org-wrap .tall-anchor svg{width:36px;height:36px;stroke:#fff;stroke-width:1.5} @media (max-width:1200px){.teka-org-wrap .tall-anchor{width:100%;min-height:160px}} .teka-org-wrap .mid-grid{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0} .teka-org-wrap .mid-grid .card{flex:1;min-height:64px} .teka-org-wrap .card{ background:var(--teka-light-2);border:1px solid var(--teka-light); border-radius:8px;padding:12px 14px;font-size:.82rem; display:flex;align-items:center;gap:10px;position:relative;min-height:64px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; cursor:default; } .teka-org-wrap .card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,37,87,.12);border-color:var(--teka-cyan)} .teka-org-wrap .card:hover .ic{transform:scale(1.08)} .teka-org-wrap .card .ic{ transition:transform .25s ease;flex:0 0 32px;width:32px;height:32px;border-radius:4px; background:var(--teka-navy);color:#fff;display:inline-flex;align-items:center;justify-content:center; } .teka-org-wrap .card .ic svg{width:16px;height:16px;stroke:#fff;stroke-width:2} .teka-org-wrap .card.cyan .ic{background: #095977} .teka-org-wrap .card .lbl{flex:1;line-height:1.3} .teka-org-wrap .card.tcenter .lbl{text-align:center} .teka-org-wrap .card.centered{ flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:10px;min-height:120px;padding:16px 14px; } .teka-org-wrap .card.centered .lbl{flex:0 0 auto} .teka-org-wrap .card.plain{ background:var(--teka-light-2);justify-content:center;text-align:center;color:var(--teka-text); } .teka-org-wrap .card.plain .ic{display:none} .teka-org-wrap .card.plain .lbl{flex:0 1 auto;text-align:center} .teka-org-wrap .right-stack{ display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-width:0; margin-left:16px; } .teka-org-wrap .bottom-wrap{ display:grid; grid-template-columns: calc((100% - 136px)/3 + 50px) calc(2 * (100% - 136px)/3 + 66px); gap:20px;align-items:stretch;position:relative;z-index:2; } @media (max-width:980px){.teka-org-wrap .bottom-wrap{grid-template-columns:1fr}} .teka-org-wrap .panel{ background:var(--teka-card);border-radius:var(--teka-radius); box-shadow:var(--teka-shadow);padding:18px; display:flex;flex-direction:column;gap:14px; } .teka-org-wrap .col-title{ background:var(--teka-blue-title);color:#fff;text-align:center; font-weight:600;font-size:.85rem;padding:10px 12px; border-radius:8px 8px 0 0;line-height:1.3;min-height:48px; display:flex;align-items:center;justify-content:center; } .teka-org-wrap .left-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1} @media (max-width:640px){.teka-org-wrap .left-cols{grid-template-columns:1fr}} .teka-org-wrap .left-col{ display:flex;flex-direction:column;border:1px solid var(--teka-light); border-radius:8px;overflow:hidden;background:#fff;align-self:stretch; transition:box-shadow .25s ease, transform .25s ease; } .teka-org-wrap .left-col:hover{box-shadow:0 6px 16px rgba(15,37,87,.1);transform:translateY(-1px)} .teka-org-wrap .left-col-body{flex:1;padding:14px 16px} .teka-org-wrap .left-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .teka-org-wrap .left-list li{font-size:.88rem;color:var(--teka-text);padding-left:14px;position:relative;line-height:1.4} .teka-org-wrap .left-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#1a2436} .teka-org-wrap .right-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1} @media (max-width:900px){.teka-org-wrap .right-cols{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.teka-org-wrap .right-cols{grid-template-columns:1fr}} .teka-org-wrap .right-col{ background:#fff;border:1px solid var(--teka-light);border-radius:8px; overflow:hidden;transition:box-shadow .25s ease, transform .25s ease; display:flex;flex-direction:column; } .teka-org-wrap .right-col:hover{box-shadow:0 6px 16px rgba(15,37,87,.1);transform:translateY(-1px)} .teka-org-wrap .right-col-body{padding:12px 12px 14px;background:#fff;flex:1} .teka-org-wrap .units{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .teka-org-wrap .units li{font-size:.88rem;color:var(--teka-text);padding-left:14px;position:relative;line-height:1.35} .teka-org-wrap .units li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#1a2436} (function(){ function initOne(wrap){ if (!wrap || wrap.dataset.rendered === "1") return; wrap.dataset.rendered = "1"; if (window.lucide && typeof window.lucide.createIcons === "function") { try { window.lucide.createIcons(); } catch(e){} } var SVGNS = "http://www.w3.org/2000/svg"; var container = wrap.querySelector(".container"); var svg = wrap.querySelector(".connectors"); function rectIn(el, base){ var r = el.getBoundingClientRect(); var b = base.getBoundingClientRect(); return { x: r.left - b.left, y: r.top - b.top, w: r.width, h: r.height, cx: r.left - b.left + r.width/2, cy: r.top - b.top + r.height/2, right: r.right - b.left, left: r.left - b.left, top: r.top - b.top, bottom: r.bottom - b.top }; } function line(x1,y1,x2,y2,opts){ opts = opts || {}; var l = document.createElementNS(SVGNS,'line'); l.setAttribute('x1',x1); l.setAttribute('y1',y1); l.setAttribute('x2',x2); l.setAttribute('y2',y2); l.setAttribute('stroke', opts.stroke || '#16aee6'); l.setAttribute('stroke-width', opts.width || 1.2); l.setAttribute('stroke-linecap','round'); if(opts.dash) l.setAttribute('stroke-dasharray', opts.dash); return l; } function roundedPath(points, r){ if(points.length < 2) return ''; var d = "M " + points[0][0] + " " + points[0][1]; for(var i=1; i= 3){ var rs = rectIn(rightStack, container); var spineX = rs.left - 10; var r0 = rectIn(stackCards[0], container); var r2 = rectIn(stackCards[2], container); var row1Y = r0.cy; var row2Y = r2.cy; var ptsTop = [[cr.right, cr.cy],[spineX, cr.cy],[spineX, row1Y],[r0.left, row1Y]]; svg.appendChild(path(roundedPath(ptsTop, 10), dashOpts)); var ptsBot = [[cr.right, cr.cy],[spineX, cr.cy],[spineX, row2Y],[r2.left, row2Y]]; svg.appendChild(path(roundedPath(ptsBot, 10), dashOpts)); } } } var leftPanel = wrap.querySelector('#leftPanel'); if(ceo && leftPanel){ var cr2 = rectIn(ceo, container); var lp = rectIn(leftPanel, container); var midY = (cr2.bottom + lp.top) / 2; var pts = [[cr2.cx, cr2.bottom],[cr2.cx, midY],[lp.cx, midY],[lp.cx, lp.top]]; svg.appendChild(path(roundedPath(pts, 10), dashOpts)); } var gendir = wrap.querySelector('#gendir'); var rightPanel = wrap.querySelectorAll('.bottom-wrap > .panel')[1]; if(gendir && rightPanel){ var gr = rectIn(gendir, container); var rp = rectIn(rightPanel, container); var midY2 = (gr.bottom + rp.top) / 2; var pts2 = [[gr.cx, gr.bottom],[gr.cx, midY2],[rp.cx, midY2],[rp.cx, rp.top]]; svg.appendChild(path(roundedPath(pts2, 10), dashOpts)); } } function schedule(){ requestAnimationFrame(draw); } window.addEventListener('load', schedule); window.addEventListener('resize', schedule); if(document.fonts && document.fonts.ready) document.fonts.ready.then(schedule); if(window.ResizeObserver){ var ro = new ResizeObserver(schedule); ro.observe(container); } setTimeout(schedule, 50); setTimeout(schedule, 300); setTimeout(schedule, 800); schedule(); } function initAll(){ document.querySelectorAll(".teka-org-wrap").forEach(initOne); } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", initAll); else initAll(); })();