/* Fonts (Jost ~ Avant Garde display, Arimo ~ Swiss 721 / Helvetica body) are loaded via + stylesheet in the page for speed. */ :root{ --paper:#ffffff; --paper2:#f6f7f9; --ink:#111726; /* Highveld night-sky navy - primary text */ --ink2:#0b1020; /* header/hero/footer band */ --muted:#5a6473; --faint:#6b7482; --line:#e7eaf0; /* Gauteng six-colour spectrum (brand) - bright, used for graphics/marks */ --c1:#ff6900; --c2:#4fb14a; --c3:#0693e3; --c4:#fdb833; --c5:#e4002b; --c6:#93328e; --accent:#c2480a; /* readable burnt-orange for TEXT links (AA on white); bright --c1 stays for marks */ --green:#137a43; --red:#c20016; /* darkened for AA text contrast on white */ --disp:'Jost',system-ui,sans-serif; /* Avant Garde substitute - display/headings */ --body:'Arimo','Helvetica Neue',Arial,sans-serif; /* Swiss 721 / Helvetica - body */ --mono:'Arimo','Helvetica Neue',Arial,sans-serif; /* Helvetica-style labels (uppercase, tracked) */ } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--body);background:var(--paper);color:var(--ink);padding-bottom:0;line-height:1.5;-webkit-font-smoothing:antialiased} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} a{color:var(--accent);text-underline-offset:3px} h1,h2{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;color:var(--ink)} /* ===== signature spectrum rail ===== */ .spectrum{display:flex;height:5px;width:100%} .spectrum i{flex:1;display:block} .spectrum i:nth-child(1){background:var(--c1)}.spectrum i:nth-child(2){background:var(--c2)} .spectrum i:nth-child(3){background:var(--c3)}.spectrum i:nth-child(4){background:var(--c4)} .spectrum i:nth-child(5){background:var(--c5)}.spectrum i:nth-child(6){background:var(--c6)} /* ===== layout: left sidebar + main column ===== */ .layout{display:flex;align-items:flex-start} .sidebar{flex:0 0 240px;width:240px;position:sticky;top:0;align-self:stretch;height:100vh;overflow-y:auto;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20} .brand{display:flex;align-items:center;gap:11px;padding:18px 16px 15px;text-decoration:none;border-bottom:1px solid var(--line)} .brand img{height:42px;width:auto;flex:0 0 auto} .brand span{font-family:var(--disp);font-size:13.5px;font-weight:800;line-height:1.16;color:var(--ink);letter-spacing:-.01em} .navburger{display:none} .sidenav{display:flex;flex-direction:column;padding:10px;gap:1px;flex:1} .sidenav a,.side-item,.side-user{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;position:relative} .sidenav a:hover,.side-item:hover,.side-user:hover{background:var(--paper2);color:var(--ink)} .sidenav a.on,.side-user.on,.side-item.on{background:#ff69000f;color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)} .sidenav a.on .ico{color:var(--accent)} .ico{width:19px;height:19px;flex:0 0 auto;stroke:currentColor} .side-foot{border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:1px} .side-user span{display:flex;flex-direction:column;gap:3px;min-width:0} .side-user b{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .side-user .rolebadge{align-self:flex-start} .side-item .badge-n{margin-left:auto;background:var(--c5);color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:8px;padding:0 3px} .side-login{color:var(--accent)} .main-col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh} .main-col > main{flex:1;min-width:0} /* mobile: sidebar collapses to a top bar with a burger toggle */ @media(max-width:900px){ .layout{display:block} .sidebar{position:sticky;top:0;flex:none;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;overflow:visible;border-right:none;border-bottom:1px solid var(--line)} .brand{border-bottom:none;padding:11px 14px;flex:1} .brand img{height:36px} .navburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:44px;height:40px;margin-right:12px;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:9px 10px} .navburger span{display:block;height:2px;background:var(--ink);border-radius:2px} .sidenav,.side-foot{display:none;flex-basis:100%;padding:6px 10px 10px} .navtoggle:checked ~ .layout .sidenav,.navtoggle:checked ~ .layout .side-foot{display:flex} .sidenav a,.side-item,.side-user{font-size:13px} } /* ===== hero ===== */ .hero{position:relative;color:#fff;padding:78px 0 60px;margin-bottom:8px;overflow:hidden;background:var(--ink2)} .hero::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(105deg,rgba(9,13,26,.92),rgba(9,13,26,.62) 46%,rgba(9,13,26,.30)),url('gn/sandton.webp') center 58%/cover no-repeat} .hero .wrap{position:relative;z-index:1} .eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--c4);display:flex;align-items:center;gap:10px;margin-bottom:16px} .eyebrow::before{content:"";width:26px;height:5px;display:flex; background:linear-gradient(90deg,var(--c1) 0 16.6%,var(--c2) 0 33.3%,var(--c3) 0 50%,var(--c4) 0 66.6%,var(--c5) 0 83.3%,var(--c6) 0)} .hero h1{color:#fff;font-size:46px;line-height:1.04;letter-spacing:-.02em;font-weight:800;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.4)} .hero h1 span{display:inline;background-image:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));background-repeat:no-repeat;background-position:0 92%;background-size:100% 6px;padding-bottom:2px} .motto{font-family:var(--mono);margin-top:18px;font-size:13px;color:#fff;font-weight:500;letter-spacing:2px;text-transform:uppercase;opacity:.9} .sub{font-family:var(--body);color:#dbe2ec;font-size:15.5px;margin-top:14px;line-height:1.62;max-width:660px} .badge{display:inline-block;font-family:var(--mono);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#eef2f7;font-size:11px;letter-spacing:.5px;padding:5px 11px;border-radius:4px;margin:18px 7px 0 0} .hero.simple{padding:56px 0 44px} .hero.simple::before{background:linear-gradient(105deg,rgba(9,13,26,.94),rgba(9,13,26,.7)),url('gn/hero.jpg') center 42%/cover no-repeat} /* ===== section eyebrow (structural, colour-cycling markers) ===== */ .sect{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin:44px 0 10px;font-weight:600;scroll-margin-top:110px;display:flex;align-items:baseline;gap:11px} .sect::before{content:"";flex:0 0 auto;align-self:center;width:11px;height:11px;border-radius:2px;background:var(--accent)} .sect small{flex-basis:100%;order:3;font-family:var(--body);display:block;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400;font-size:13px;margin-top:2px;line-height:1.5;padding-left:22px} /* ===== kpis (instrument panel) ===== */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:26px 0} .kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;position:relative} .kpi::before{content:"";position:absolute;top:0;left:20px;width:32px;height:3px;background:var(--c1)} .kpi:nth-child(6n+2)::before{background:var(--c2)}.kpi:nth-child(6n+3)::before{background:var(--c3)} .kpi:nth-child(6n+4)::before{background:var(--c4)}.kpi:nth-child(6n+5)::before{background:var(--c5)}.kpi:nth-child(6n+6)::before{background:var(--c6)} .kpi .v{font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 3px;color:var(--ink)} .kpi .l{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.5;letter-spacing:.2px} .kpi .d{font-family:var(--mono);font-size:11.5px;font-weight:600;margin-top:7px;letter-spacing:.2px} .up{color:var(--green)} .down{color:var(--red)} /* ===== cards / facts / metrics ===== */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:16px} .card h2{font-size:18px;margin-bottom:3px} .card .note{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.55} .chart-box{position:relative;height:280px} /* dashboard sub-menu tabs (pill / segmented control) */ .subnav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 22px} .subnav a{flex:0 0 auto;display:inline-flex;align-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-decoration:none;padding:9px 16px;white-space:nowrap;background:var(--paper);border:1px solid var(--line);border-radius:999px;transition:background .12s,border-color .12s,color .12s} .subnav a:hover{border-color:var(--ink);color:var(--ink)} .subnav a.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(17,23,38,.18)} .subnav a.on:hover{color:#fff} .full{grid-column:1 / -1} .flex-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-top:10px} .fact{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:17px;border-top:3px solid var(--c3)} .fact:nth-child(6n+1){border-top-color:var(--c1)}.fact:nth-child(6n+2){border-top-color:var(--c2)} .fact:nth-child(6n+4){border-top-color:var(--c4)}.fact:nth-child(6n+5){border-top-color:var(--c5)}.fact:nth-child(6n+6){border-top-color:var(--c6)} .fact b{font-family:var(--disp);color:var(--ink);font-size:16px;font-weight:700;display:block;margin-bottom:5px} .fact span{font-size:13px;color:var(--muted);line-height:1.55;display:block} .fact .more{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--accent);text-decoration:none} .fact .more:hover{text-decoration:underline} .src{font-size:13px;color:var(--muted);line-height:1.95} .src a{color:var(--accent);text-decoration:none} .src a:hover{text-decoration:underline} .pillar{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px;margin:16px 0 6px} .metric{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:17px} .metric b{font-family:var(--disp);font-size:15px;font-weight:700;display:block;margin-bottom:5px;color:var(--ink)} .metric span{font-size:13px;color:var(--muted);line-height:1.55} .await{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#8a5a00;background:#fdb8331c;border:1px solid #fdb83355;padding:3px 9px;border-radius:4px} .val-badge{display:block;margin-top:10px;font-family:var(--disp);font-size:19px;font-weight:800;color:var(--ink)} .val-badge em{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--green);font-style:normal;margin-left:6px} .caveat{background:var(--paper2);border:1px solid var(--line);border-left:3px solid var(--c4);border-radius:8px;padding:14px 18px;font-size:13px;color:var(--muted);line-height:1.6;margin:12px 0 4px} .caveat b{color:var(--ink)} /* ===== objectives / goals ===== */ .objgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:14px;margin:16px 0} .obj{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:18px} .obj b{font-family:var(--disp);display:block;font-size:15px;font-weight:700;margin-bottom:6px;color:var(--ink)} .obj p{font-size:13px;color:var(--muted);line-height:1.6} .obj.o1{border-top-color:var(--c1)} .obj.o2{border-top-color:var(--c2)} .obj.o3{border-top-color:var(--c3)} .obj.o4{border-top-color:var(--c4)} .obj.o5{border-top-color:var(--c5)} .obj.o6{border-top-color:var(--c6)} ul.clean{list-style:none;margin:14px 0;column-gap:34px} ul.clean li{padding:9px 0 9px 26px;position:relative;font-size:14px;color:var(--ink);line-height:1.55;border-bottom:1px solid var(--line)} ul.clean li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:10px;border-radius:2px;background:var(--c1)} ul.clean li:nth-child(6n+2)::before{background:var(--c2)}ul.clean li:nth-child(6n+3)::before{background:var(--c3)} ul.clean li:nth-child(6n+4)::before{background:var(--c4)}ul.clean li:nth-child(6n+5)::before{background:var(--c5)}ul.clean li:nth-child(6n+6)::before{background:var(--c6)} /* ===== home tiles ===== */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:15px;margin:26px 0} .tile{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;transition:border-color .16s,transform .16s} .tile:hover{border-color:var(--ink);transform:translateY(-3px)} .tile b{font-family:var(--disp);display:block;font-size:16.5px;font-weight:700;margin-bottom:7px} .tile span{font-size:13px;color:var(--muted);line-height:1.55} .tile .go{display:inline-block;margin-top:14px;font-family:var(--mono);color:var(--accent);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px} /* ===== image strip ===== */ .photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:14px;margin:18px 0} .photo{position:relative;border-radius:12px;overflow:hidden;height:196px;border:1px solid var(--line)} .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .photo:hover img{transform:scale(1.05)} .photo .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.4px;background:linear-gradient(transparent,rgba(9,13,26,.82))} /* ===== contacts / directory ===== */ .search{width:100%;max-width:460px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:12px 14px;font-size:14px;font-family:var(--body);margin:16px 0} .search:focus{outline:2px solid var(--accent);outline-offset:1px} .org{font-family:var(--mono);margin:26px 0 6px;font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink)} .org-block{border-bottom:1px solid var(--line)} summary.org{cursor:pointer;list-style:none;display:flex;align-items:center;gap:11px;margin:0;padding:15px 2px;user-select:none} summary.org::-webkit-details-marker{display:none} summary.org::before{content:"";width:0;height:0;border-left:6px solid var(--accent);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s;flex:0 0 auto} details.org-block[open] > summary.org::before{transform:rotate(90deg)} summary.org:hover{color:var(--accent)} summary.org .count-pill{margin-left:auto} details.org-block > table.contacts{margin:0 0 16px} table.contacts{width:100%;border-collapse:collapse;margin-bottom:8px} table.contacts td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px} table.contacts td.e a{color:var(--accent);text-decoration:none} table.contacts tr:hover{background:var(--paper2)} .count-pill{display:inline-block;font-family:var(--mono);background:var(--paper2);border:1px solid var(--line);border-radius:4px;padding:2px 8px;font-size:11px;color:var(--muted);margin-left:8px} /* ===== login ===== */ .login-box{max-width:428px;margin:52px auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:34px;position:relative;overflow:hidden} .login-box::before{content:"";position:absolute;top:0;left:0;right:0;height:5px; background:linear-gradient(90deg,var(--c1) 0 16.6%,var(--c2) 0 33.3%,var(--c3) 0 50%,var(--c4) 0 66.6%,var(--c5) 0 83.3%,var(--c6) 0)} .login-box img{height:60px;display:block;margin:6px auto 16px} .login-box h1{font-size:22px;text-align:center;margin-bottom:4px} .login-box p.hint{font-size:13px;color:var(--muted);text-align:center;margin-bottom:18px;line-height:1.55} .login-box label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:14px 0 6px} .login-box input,.login-box select{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:12px 13px;font-size:14px;font-family:var(--body)} .login-box input:focus,.login-box select:focus{outline:2px solid var(--accent);outline-offset:1px} .login-box button{width:100%;margin-top:22px;background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;border:none;border-radius:8px;padding:13px;font-size:14.5px;cursor:pointer;letter-spacing:.2px} .login-box button:hover{background:#000} .notice{margin-top:16px;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.55} /* ===== footer ===== */ footer{border-top:0;margin-top:52px;padding:26px 0 34px;font-family:var(--mono);font-size:12px;color:#aeb7c6;line-height:1.9;letter-spacing:.3px} .foot-band{background:var(--ink2);margin-top:52px} .foot-band footer{margin-top:0} footer .dots span{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px} footer a{color:#dbe2ec} @media(max-width:840px){.grid{grid-template-columns:1fr}.hero h1{font-size:33px}.site-head .t span{display:none}} /* accessibility quality floor */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--c3);outline-offset:2px;border-radius:3px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.photo:hover img,.tile:hover{transform:none}}