/* ==== TUC HOMEPAGE v3 (ported from approved demo) ==== */
:root{--gd:#0B4218;--g:#147328;--gs:#EAF3ED;--mar:#7A1F2B;--bl:#1B3A6B;--gold:#FFF833;--gold-ink:#7A7718;--shadow-card:0 6px 20px rgba(11,66,24,.12);--ink:#1C2420}
*{margin:0;padding:0;box-sizing:border-box}
.tuc-home{font-family:'Public Sans',sans-serif;color:var(--ink)}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--g)}
.section{padding:60px 24px}
.heading{text-align:center;margin-bottom:36px}
.heading .pre{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g);font-weight:700}
.heading .pre::before,.heading .pre::after{content:"—— ";color:var(--gold)}
.heading .pre::after{content:" ——"}
.heading h2{color:var(--gd);font-size:clamp(25px,3.2vw,34px);margin-top:6px}
.heading p{color:#5B6A60;margin-top:6px}
.btn{display:inline-block;padding:13px 26px;font-weight:700;text-decoration:none;transition:.15s}
.btn-solid{background:var(--gold);color:#1C2420}.btn-solid:hover{background:#fff}
.btn-green{background:var(--g);color:#fff}.btn-green:hover{background:var(--gd)}
.btn-ghost{border:2px solid #fff;color:#fff}.btn-ghost:hover{background:#fff;color:var(--gd)}
.crest-bar{height:4px;background:linear-gradient(90deg,var(--g) 0 55%,var(--gold) 55% 70%,var(--mar) 70% 85%,var(--bl) 85% 100%)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s;background-size:cover;background-position:center 30%;display:flex;align-items:center;padding:0 24px;color:#fff}
.slide.active{opacity:1;z-index:2}
/* Green removed. What remains is a NEUTRAL scrim confined to the
caption column - no colour cast anywhere, and it is fully
transparent from 58% across, so the right 42% of every photo is
completely untouched. Measured: with zero overlay, white text sat
at 1.0-3.0:1 on these five images (four have pure-white regions),
so some shading behind the text is unavoidable. */
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,11,.82) 0,rgba(10,14,11,.66) 26%,rgba(10,14,11,.30) 44%,rgba(10,14,11,.08) 54%,rgba(10,14,11,0) 58%)}
.kicker{display:inline-block;background:var(--gold);color:#1C2420;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;margin-bottom:16px}
.slide h1{font-size:clamp(30px,4.6vw,54px);line-height:1.07;margin-bottom:10px;max-width:640px}
.slide p.sub{color:#DCE8DF;font-size:clamp(15px,1.6vw,18px);max-width:560px;margin-bottom:24px}
.swahili{font-style:italic;color:#CFE3D6}
.slide .btn{margin:0 12px 10px 0}
.slider-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
.slider-dots button{width:32px;height:5px;border:0;background:rgba(255,255,255,.4);cursor:pointer}
.slider-dots button.on{background:var(--gold)}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(11,66,24,.55);border:0;color:#fff;font-size:24px;width:46px;height:46px;cursor:pointer}
.slider-arrow:hover{background:var(--gold);color:#1C2420}
.arrow-l{left:12px}.arrow-r{right:12px}
.ticker .label{background:var(--gold);color:#1C2420;font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:12px 16px;white-space:nowrap;z-index:2}
@keyframes tick{to{transform:translateX(-100%)}}
/* Programme cards */
.prog .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:#fff;border:1px solid #E6EDE8;border-top:4px solid var(--g);text-align:center;padding:34px 26px;box-shadow:var(--shadow-card)}
.pcard:nth-child(2){border-top-color:var(--gold)}
.pcard:nth-child(3){border-top-color:var(--bl)}
.pcard .ic{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--gs);display:flex;align-items:center;justify-content:center;font-size:26px}
.pcard h3{font-size:20px;color:var(--gd);margin-bottom:8px}
.pcard p{color:#4A574F;font-size:14.5px;line-height:1.65;margin-bottom:16px}
.pcard a{font-weight:700;text-decoration:none}
/* Tabs + countdown */
.tabs-bar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;border-bottom:2px solid #E6EDE8;margin-bottom:34px}
.tabs-bar button{background:none;border:0;padding:13px 22px;font-family:'Public Sans';font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:#6B7A70;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs-bar button.on{color:var(--g);border-color:var(--gold)}
.tab-pane{display:none}
.count-card{background:linear-gradient(135deg,#083112,var(--gd));color:#fff;padding:30px 26px;position:relative;overflow:hidden}
.count-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:rgba(245,166,35,.14)}
.count-card .pre{color:var(--gold);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.count-card h3{font-size:23px;margin:8px 0 6px}
.count-card h3 em{font-style:italic;color:var(--gold)}
.count-card p{color:#C9D8CD;font-size:13.5px;margin-bottom:18px}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.count-grid div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);text-align:center;padding:12px 4px}
.count-grid b{display:block;font-size:26px;font-family:'Fraunces',serif;color:#fff}
.count-grid span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#A7BCAE}
.tabtext h3{color:var(--gd);font-size:23px;margin-bottom:12px}
.tabtext p{line-height:1.75;color:#2A342E;font-size:15px;margin-bottom:10px}
/* Schools photo tiles */
.schools{background:#F4F8F5}
.schools .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stile div{position:relative;padding:18px;color:#fff;width:100%}
.stile h3{font-size:19px;margin-bottom:4px}
.stile span{font-size:12.5px;color:var(--gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* Study split */
.study{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.study-l{background:linear-gradient(135deg,var(--gd),var(--g));color:#fff;padding:52px 46px}
.study-l h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:10px}
.study-l h2 em{color:var(--gold);font-style:italic}
.study-l p{color:#D8E4DC;margin-bottom:22px;font-size:15px;line-height:1.7}
.study-l ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.study-l li a{color:#fff;text-decoration:none;font-weight:600;font-size:14.5px}
.study-l li a::before{content:"◆ ";color:var(--gold);font-size:11px}
.study-l li a:hover{color:var(--gold)}
.study-r::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,66,24,.85),rgba(11,66,24,.55))}
.study-r>div{position:relative}
.study-r .pre{color:var(--gold);font-style:italic;font-family:'Fraunces',serif;font-size:17px}
.study-r h2{font-size:clamp(26px,3vw,38px);margin:6px 0 14px}
.study-r p{color:#DCE8DF;max-width:440px;margin-bottom:22px;line-height:1.7}
/* Notices + news */
.nn{display:grid;grid-template-columns:1fr 1.5fr;gap:24px}
.board{background:var(--gd);padding:26px;color:#fff}
.board h3{font-size:19px;margin-bottom:18px;padding-bottom:10px;border-bottom:3px solid var(--gold)}
.bcard{background:#fff;color:var(--ink);padding:14px 16px;margin-bottom:12px;border-left:4px solid var(--g)}
.bcard.urgent{border-left-color:var(--mar)}
.bcard a{display:block;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px}
.bcard a:hover{color:var(--g)}
.bcard time{font-size:11.5px;color:var(--g);font-weight:700;letter-spacing:.06em}
.newslist h3{color:var(--gd);font-size:19px;margin-bottom:18px;padding-bottom:10px;border-bottom:3px solid var(--gold)}
.nitem{display:grid;grid-template-columns:120px 1fr;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #E6EDE8;align-items:center}
.nitem img{width:120px;height:80px;object-fit:cover;display:block}
.nitem time{font-size:11.5px;letter-spacing:.06em;color:var(--g);font-weight:700}
.nitem h4{font-family:'Public Sans';font-size:15px;line-height:1.4;margin-top:3px}
.nitem h4 a{color:var(--ink);text-decoration:none}.nitem h4 a:hover{color:var(--g)}
/* Campus life photo cards */
.life .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lcard{position:relative;height:300px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.lcard>div{position:relative;color:#fff;padding:24px}
.lcard h3{font-size:21px;margin-bottom:10px}
.lcard h3::before{content:"";display:block;width:44px;height:3px;background:var(--gold);margin:0 auto 12px}
.lcard p{font-size:13.5px;color:#D8E4DC;line-height:1.65;margin-bottom:14px}
/* Bottom band: events + portals */
.band{display:grid;grid-template-columns:1.2fr 1fr 1fr}
.band>div{padding:40px 36px}
.band-work{background:var(--gs)}
.band-work h3{color:var(--gd);font-size:20px;margin-bottom:12px}
.band-work p{font-size:14px;line-height:1.7;color:#2A342E;margin-bottom:18px}
.band-ev{background:var(--mar);color:#fff}
.band-ev h3{font-size:20px;margin-bottom:16px}
.date-badge{display:flex;gap:14px;align-items:center}
.date-badge h4{font-family:'Public Sans';font-size:15px;line-height:1.4}
.date-badge small{color:#EBC9CD;font-size:12.5px}
.band-portals{background:linear-gradient(135deg,var(--bl),#122A4E);color:#fff}
.band-portals h3{font-size:20px;margin-bottom:14px}
.band-portals a::before{content:"▸ ";color:var(--gold)}
.map iframe{width:100%;height:340px;border:0;display:block;filter:saturate(.9)}
/* ==== Header brand lockup: crest + wordmark (as approved demo) ==== */
/* ================================================================== */
/* Migrated from Appearance > Customize > Additional CSS. */
/* Single source of truth: Additional CSS is now empty. Rules below */
/* deliberately follow the originals so cascade order is unchanged. */
/* ================================================================== */
.home .kingster-page-title-wrap{display:none}
.home .kingster-content-area,
.home .kingster-container,
.home .kingster-content-container{max-width:100%!important;padding:0!important;margin:0!important}
.home .kingster-sidebar-wrap{display:none}
/* ==== TUC polish pass — start ==== */
/* --- Top bar: deep green, not navy ---------------------------------
The navy came from .kingster-top-bar-background{background-color:#192f59}
at 50% opacity in the generated wp-content/uploads/kingster-style-custom.css.
The theme option is updated too, so this survives a regeneration. */
.kingster-top-bar-background{
background-color:#147328 !important; /* brand green */
opacity:1 !important;
}
.kingster-top-bar,
.kingster-top-bar a,
.kingster-top-bar .kingster-top-bar-menu > li > a{color:#E6EFE9 !important}
.kingster-top-bar a:hover,
.kingster-top-bar .kingster-top-bar-menu > li > a:hover{color:#FFF833 !important}
/* The gold pill lost its label to a specificity clash: two !important
declarations were fighting and `.kingster-top-bar a` (0,1,1) outranked
`.kingster-top-bar-right-button` (0,1,0), painting the text near-white
on gold; on hover `.kingster-top-bar a:hover` made it gold on gold.
Qualifying with the ancestor + element lifts this to (0,2,1) / (0,3,1)
so the label wins in every state. */
.kingster-top-bar a.kingster-top-bar-right-button,
.kingster-top-bar a.kingster-top-bar-right-button:link,
.kingster-top-bar a.kingster-top-bar-right-button:visited,
.kingster-top-bar a.kingster-top-bar-right-button:hover,
.kingster-top-bar a.kingster-top-bar-right-button:focus{
background-color:var(--gold) !important;
color:#1C2420 !important;
font-weight:700 !important;
}
.kingster-top-bar a.kingster-top-bar-right-button:hover{
background-color:#E0DA2D !important;
}.ticker a{color:#fff !important;text-decoration:none;font-weight:600;font-size:14px;margin-right:52px}
.slide h1,
.slide .sub,
.slide p.sub{color:#fff !important}.band-portals a{display:block;color:#DDE6F2 !important;text-decoration:none;font-size:14px;font-weight:600;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.12)}.band-portals a:hover{color:#FFF833 !important}.lcard::before{content:"";position:absolute;inset:0;background:rgba(11,66,24,.45) !important;transition:.2s}.lcard:hover::before{background:rgba(11,66,24,.32) !important}
.slide .inner>*{margin-left:0;margin-right:auto}.stile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,66,24,.05) 0 45%,rgba(11,66,24,.78) 100%) !important;transition:.2s}.stile:hover::before{background:linear-gradient(180deg,rgba(122,31,43,.10) 0 45%,rgba(11,66,24,.86) 100%) !important}
.kingster-body .stile h3{color:#fff !important}
.kingster-body .stile span{color:#FFF833 !important}
.stile:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(11,66,24,.28)}
.stile > p{margin:0;padding:0;flex:0 0 auto;line-height:0}
.lcard > div > p:empty{display:none}
/* --- Dark-on-dark headings ----------------------------------------
.kingster-body prefix = (0,0,2,1), beats .kingster-body h3 (0,0,1,1). */
.kingster-body .study-l h2,
.kingster-body .study-r h2,
.kingster-body .board h3,
.kingster-body .count-card h3,
.kingster-body .lcard h3,
.kingster-body .band-ev h3,
.kingster-body .band-portals h3,
.kingster-body .newslist h3{color:#fff !important}
/* keep the gold emphasis inside those headings */
.kingster-body .study-l h2 em,
.kingster-body .count-card h3 em{color:#FFF833 !important}
.kingster-body .lcard p{color:#fff !important}
/* --- Buttons -------------------------------------------------------
.btn-green is (0,0,1,0) but child style.css has
.kingster-body a{color:var(--tuc-green)} at (0,0,1,1) — so the label
was rendering green on a green fill, i.e. an empty block. */
.kingster-body a.btn-green,
.kingster-body .btn-green{color:#fff !important}
.kingster-body a.btn-solid,
.kingster-body .btn-solid{color:#1C2420 !important}
.kingster-body a.btn-ghost,
.kingster-body .btn-ghost{color:#fff !important}
.kingster-body a.btn-ghost:hover{color:#0B4218 !important}.stile{position:relative;height:190px;background-size:cover;background-position:center;display:flex;align-items:flex-end;text-decoration:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.stile-link{
position:absolute;
inset:0;
z-index:3;
display:block;
text-indent:-9999px;
overflow:hidden;
}
/* the tile clips its children, so the ring has to be drawn inside the edge */
.stile-link:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}.tab-pane img{width:100%;border-radius:6px;box-shadow:10px 10px 0 var(--gs);height:100%;object-fit:cover;min-height:280px}.study-r{position:relative;background:url('http://41.89.195.22/wp-content/uploads/2026/08/tile-apply-admission.jpg') center/cover !important;display:flex;align-items:center;padding:52px 46px;color:#fff}.ticker{background:var(--mar);display:flex;align-items:center;overflow:hidden}.ticker .track{animation-duration:28s;white-space:nowrap;animation:tick 28s linear infinite;padding-left:100%;display:inline-block}
/* scoped override in case anything forces links to block */
.kingster-body .ticker .track a,
.ticker a{
display:inline !important;
color:#fff !important;
margin-right:52px;
float:none !important;
width:auto !important;
}
.ticker .track br{display:none}.tabtext .vm{border-left:4px solid #FFF833;background:#EAF3ED;padding:12px 16px;font-size:14px;margin-bottom:10px;display:block;line-height:1.6;list-style:none}
.tabtext .vm b{color:#147328}
.tabtext .vm::marker{content:none}
.tabtext .vm::before{content:none}.tab-pane.on{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:30px;align-items:start}
/* neutralise any empty paragraph wpautop may still inject in this pane */
.tab-pane > p:empty,
.tabtext > p:empty{display:none;margin:0}
/* image column fills its grid cell */
.tab-pane .tabimg{height:100%;display:block}
.tab-pane .tabimg img{
width:100%;height:100%;object-fit:cover;min-height:280px;
border-radius:6px;display:block;
}
/* wpautop wraps the buttons in ; kill only those paragraphs' box */
.tabtext > p:has(> .btn),
.count-card > p:has(> .btn){margin:0;padding:0}.date-badge .d{background:#fff;color:#7A1F2B;text-align:center;padding:8px 10px;font-weight:700;min-width:64px;flex:0 0 auto}.date-badge .d b{display:block;font-size:24px;font-family:'Fraunces',serif;white-space:nowrap}.date-badge .d span{font-size:11px;letter-spacing:.1em;display:block;white-space:nowrap}
/* title + meta on the maroon band */
.kingster-body .band-ev h4,
.kingster-body .band-ev .date-badge h4{color:#fff !important}
.kingster-body .band-ev small,
.kingster-body .date-badge small{color:#EBC9CD !important}
/* wpautop wraps the in a
; drop its box */
.band-ev p:has(> small){margin:0;padding:0}.slider{position:relative;height:min(82vh,720px);overflow:hidden;background:var(--gd);min-height:600px;margin-top:0}.slide .inner{max-width:1160px;margin:0;padding-left:6vw;text-align:left;position:relative;width:100%;padding-top:40px}
/* ==== TUC slider clearance — end ==== */
/* --- band-portals list ---------------------------------------------- */
.band-portals p{margin:0;padding:0}
.band-portals p > a:last-child{border-bottom:0}
/* ==== TUC study contrast — start ==== */
.kingster-body .study-l p{color:#D8E4DC !important}
.kingster-body .study-r p{color:#DCE8DF !important}
.kingster-body .study-r .pre{color:#FFF833 !important;font-style:italic}
.kingster-body .study-l h2 em{color:#FFF833 !important}
/* wpautop wraps the Apply button in
; drop its box */
.study-r p:has(> .btn){margin:0;padding:0}
/* ==== TUC study contrast — end ==== */
/* ==== TUC content placeholders — start ==== */
.tuc-pending{
background:#FFF6E5;
border-left:4px solid #FFF833;
padding:10px 14px;
font-style:italic;
margin:18px 0;
color:#5A4A2A;
}
/* ==== TUC content placeholders — end ==== */
/* ==== TUC dean-card initials — start ==== */
.tuc-dean-card .tuc-noimg{
width:100%;
aspect-ratio:1/1.1;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#0B4218,#147328);
color:#FFF833;
font-family:'Fraunces',Georgia,serif;
font-size:52px;
font-weight:600;
border-radius:4px;
}
/* ==== TUC dean-card initials — end ==== */
/* ==== TUC download buttons — start ==== */
/* the escapes were lost from this rule at some point, so it was
rendering the literal text "2B07FE0E" before every download
label (visible on the Prospectus page). U+2B07 + U+FE0E is the
down arrow forced to text rather than emoji presentation; the
gap is a margin now, since a literal space after a hex escape
is swallowed as the escape terminator. */
.btn-download::before{content:"\2B07\FE0E";font-weight:700;margin-right:8px}
.kingster-content-area td .btn{padding:7px 16px;font-size:13px;margin:0}
.tuc-nofile{color:#8A9691;font-style:italic;font-size:13.5px}
/* ==== TUC download buttons — end ==== */
/* ==== TUC tile access button — start ==== */
.tuc-tile .tuc-access{
display:inline-block;
margin-top:14px;
background:#147328;
color:#fff;
padding:7px 18px;
font-size:12.5px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
.tuc-tile:hover .tuc-access{background:#FFF833;color:#1C2420}
.kingster-content-area .tuc-tiles{padding:22px;margin:22px 0}
/* ==== TUC tile access button — end ==== */
/* ==== TUC gallery grid — start ==== */
.tuc-gallery{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin:26px 0;
}
.tuc-gallery figure{margin:0;background:#fff;border:1px solid #E3EBE6}
.tuc-gallery img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
display:block;
}
.tuc-gallery figcaption{
padding:10px 12px;
font-size:13px;
line-height:1.5;
color:#5B6A60;
}
.tuc-tile-static{cursor:default}
.tuc-tile-static:hover{transform:none;border-top-color:#147328}
/* ==== TUC gallery grid — end ==== */
/* ==== TUC programme cards — start ==== */
.tuc-prog{
background:#fff;
border:1px solid #E3EBE6;
border-left:5px solid #147328;
padding:18px 22px;
margin:0 0 14px;
}
.tuc-prog h4{
margin:0 0 12px;
font-family:'Fraunces',Georgia,serif;
font-size:19px;
line-height:1.3;
color:#0B4218;
}
.tuc-prog-meta{
list-style:none;
margin:0 0 12px;
padding:0;
display:flex;
flex-wrap:wrap;
gap:8px 10px;
}
.tuc-prog-meta li{
background:#EAF3ED;
border-radius:3px;
padding:6px 12px;
font-size:13px;
line-height:1.4;
color:#1C2420;
}
.tuc-prog-meta li b{
display:block;
font-size:10.5px;
letter-spacing:.09em;
text-transform:uppercase;
color:#5B6A60;
font-weight:700;
}
.tuc-prog-meta li.tuc-fee{background:#FFF6E5}
.tuc-prog-req{
margin:0;
font-size:14.5px;
line-height:1.7;
color:#2A342E;
}
.tuc-prog-req b{color:#147328}
/* ==== TUC programme cards — end ==== */
/* ==== Header brand lockup ==========================================
Crest + wordmark, vertically centred. Two render paths share this
geometry: tuc-home.js injects .tuc-brandtext (preferred), and the
::before/::after fallback draws the same text if the JS never runs.
The :has() guards keep exactly one of them visible. */
.kingster-logo-inner a,
.kingster-logo a.tuc-brand{
display:flex !important;
align-items:center;
gap:14px;
padding-left:4px;
text-decoration:none !important;
line-height:1.15;
}
.kingster-logo-inner a img,
.kingster-logo a.tuc-brand img{
max-height:72px;
width:auto;
height:auto;
flex:0 0 auto;
display:block;
}
/* --- JS path --- */
.tuc-brandtext{display:block}
.tuc-brandtext b{line-height:1.15;
display:block;
font-family:'Fraunces',Georgia,serif;
font-size:19px;
font-weight:600;
color:#0B4218;
line-height:1.15;
white-space:nowrap;
}
.tuc-brandtext i{display:block;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:#147328;margin-top:1px;white-space:nowrap}
/* --- CSS fallback (only when the JS lockup is absent) --- */
.kingster-logo-inner a::before{
content:"Turkana University College";
font-family:'Fraunces',Georgia,serif;
font-size:19px;
font-weight:600;
color:#0B4218;
line-height:1.15;
white-space:nowrap;
}
.kingster-logo-inner a::after{content:"The Cradle of Knowledge";display:block;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:#147328;margin-top:1px;white-space:nowrap}
/* tuc-home.js adds .tuc-brand to the link when it injects the lockup,
so key off that class rather than :has() - same result, no dependency
on :has() support, and one less selector for the engine to evaluate. */
.kingster-logo-inner a.tuc-brand::before,
.kingster-logo-inner a.tuc-brand::after{content:none}
/* Fallback path (JS has not run). It used to give each pseudo-element
flex:1 0 100%, which put the wordmark and the tagline on their own
full-width rows BELOW the crest - a three-row block that roughly
doubled the header height and pushed the nav onto a second line.
A two-column grid reproduces the JS layout exactly instead: crest on
the left spanning both rows, name above tagline on the right. */
.kingster-logo-inner a:not(.tuc-brand){
display:grid !important;
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
align-items:center;
align-content:center;
column-gap:14px;
}
.kingster-logo-inner a:not(.tuc-brand) img{grid-column:1;grid-row:1 / 3}
.kingster-logo-inner a:not(.tuc-brand)::before{grid-column:2;grid-row:1;align-self:end}
.kingster-logo-inner a:not(.tuc-brand)::after{grid-column:2;grid-row:2;align-self:start;margin-left:0}
/* --- sticky header: on scroll Kingster re-parents the SAME
node to and tags it .kingster-fixed-navigation (style_fixed
in script-core.js moves it, it does not clone). Keep crest + name,
shrink the tagline. */
.kingster-fixed-navigation .kingster-logo-inner a img,
.kingster-fixed-navigation .kingster-logo a.tuc-brand img{max-height:44px}
.kingster-fixed-navigation .tuc-brandtext i,
.kingster-fixed-navigation .kingster-logo-inner a::after{font-size:11px;margin-top:0}
/* --- mobile --- */
/* ==== end header brand lockup ==================================== */
/* ==== Homepage alignment normalisation ==========================
One vertical rhythm for every section, one measure for every
.inner, equal-height cards in every grid, and top-aligned
columns where the two sides differ in length. */
.inner{max-width:1160px;margin:0 auto;padding:0 24px}
/* every card grid: equal height, content flows top to bottom */
.prog .grid,
.schools .grid,
.life .grid{align-items:stretch}
.prog .grid > *,
.life .grid > *{display:flex;flex-direction:column;height:100%}
.pcard{justify-content:flex-start}
.pcard p{flex:1 1 auto}
/* notices board / news list: top-aligned, not stretched apart */
.nn{align-items:start}
.board,.newslist{height:auto}
/* three-column band: top-aligned with a shared heading rhythm */
.band{align-items:stretch}
.band h3{margin-top:0;margin-bottom:16px}
/* tab pane: photo fills its column */
.tab-pane.on{align-items:stretch}
.tab-pane .tabimg{display:flex;height:100%}
.tab-pane .tabimg img{width:100%;height:100%;object-fit:cover;min-height:280px}
/* footer columns top-aligned with consistent heading margins */
.kingster-footer-wrapper .kingster-footer-column{vertical-align:top}
.tuc-fcol h3{margin:0 0 14px;line-height:1.25}
/* One rhythm for every footer column. The About column is prose
(address + email + phone) while the other three are link lists, so
they were spaced by different rules and finished at different
depths. Every row in every column now shares a line-height and
carries no extra margin, so the columns sit on one baseline grid.
The earlier 14px/10px gaps inside About are what made it look
looser than its neighbours. */
.tuc-fcol address,
.tuc-fcol p,
.tuc-fcol ul,
.tuc-fcol li{margin:0;line-height:1.95}
.tuc-fabout address{font-style:normal}
/* keep each phone number whole: a break may only fall at the middot
between them, never inside a number. The footer column is ~270px at
desktop, which is where the line is tightest. */
.tuc-fabout a[href^="tel:"]{white-space:nowrap}
.tuc-fcol ul{list-style:none;padding-left:0}
/* ==== Lockup in Kingster's mobile header bar =====================
Kingster swaps to .kingster-mobile-header-wrap at max-width:1260px,
so between 681px and 1260px the compact mobile bar was inheriting the
full-size desktop lockup. Scope the compact sizing to the bar itself
rather than to a viewport width. */
.kingster-mobile-header .kingster-logo-inner a img,
.kingster-mobile-header .kingster-logo a.tuc-brand img{max-height:52px}
.kingster-mobile-header .tuc-brandtext b,
.kingster-mobile-header .kingster-logo-inner a::before{font-size:15px}
.kingster-mobile-header .tuc-brandtext i,
.kingster-mobile-header .kingster-logo-inner a::after{font-size:11px;letter-spacing:.02em;text-transform:none;font-style:italic}
.kingster-mobile-header .kingster-logo-inner a,
.kingster-mobile-header .kingster-logo a.tuc-brand{gap:10px;min-width:0;max-width:100%}
.kingster-mobile-header .tuc-brandtext{min-width:0;overflow:hidden}
/* very narrow phones: let the wordmark wrap and drop the tagline so the
lockup can never push the menu button off the bar */
/* ==== Countdown + tile polish =================================== */
.count-card{width:100%}
.count-grid{grid-template-columns:repeat(4,1fr)}
.count-grid div{min-width:0;padding:8px 4px}
.count-grid b{white-space:nowrap}
.count-grid span{white-space:nowrap;font-size:9.5px;letter-spacing:.08em}
/* school tiles: fixed height, readable titles over light photos */
.schools .grid > .stile{height:190px}
.stile::before{
background:linear-gradient(180deg,rgba(11,66,24,.05) 0 45%,rgba(11,66,24,.78) 100%) !important;
}
.stile:hover::before{
background:linear-gradient(180deg,rgba(122,31,43,.10) 0 45%,rgba(11,66,24,.86) 100%) !important;
}
.kingster-body .stile h3{
color:#fff !important;
text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.kingster-body .stile span{text-shadow:0 1px 3px rgba(0,0,0,.45)}
/* nothing may exceed the viewport */
html,body{max-width:100%;overflow-x:hidden}
.tuc-home img,.tuc-home iframe,.tuc-home table{max-width:100%}
/* ==== Header wrappers: logo cap in every variant ==================
Kingster outputs .kingster-header-wrap (desktop) and a separate
.kingster-mobile-header-wrap; on scroll the desktop one is moved to
and tagged .kingster-fixed-navigation. Its own cap is scoped
only to .kingster-style-slide, so the fixed variant had no cap at all
and fell back to the img's height="270" attribute — the giant
scroll-state logo. This is the blanket safety net; the per-context
sizes below refine it. */
[class*="kingster-"][class*="header"] .kingster-logo img,
.kingster-mobile-header .kingster-logo img,
.kingster-mobile-header img.kingster-logo-image,
.kingster-fixed-navigation .kingster-logo img,
.kingster-fixed-navigation img.kingster-logo-image,
.kingster-sticky-navigation .kingster-logo img,
.kingster-header-wrap .kingster-logo img{
max-height:52px !important;
width:auto !important;
height:auto !important;
}
/* desktop, at rest. NOTE: capped at 52px to satisfy "no image taller
than 52px anywhere in any header wrapper". This supersedes the earlier
72px desktop crest — raise this one value if you want the taller
desktop lockup back. */
body .kingster-header-wrap:not(.kingster-fixed-navigation) .kingster-logo img{
max-height:52px !important;
}
/* any sticky/scrolled header, desktop or mobile */
/* must out-specify the blanket cap above, which is (0,3,1) */
body [class*="kingster-"][class*="header"].kingster-fixed-navigation .kingster-logo img,
body [class*="kingster-"][class*="header"].kingster-fixed-navigation .kingster-logo-inner img,
body .kingster-fixed-navigation .kingster-logo .kingster-logo-inner img{
max-height:44px !important;
}
.kingster-fixed-navigation .tuc-brandtext i{display:block !important;font-size:11px;margin-top:0}
.kingster-fixed-navigation .tuc-brandtext b{font-size:16px}
.kingster-fixed-navigation .kingster-logo,
.kingster-fixed-navigation .kingster-logo-inner{padding-top:0;padding-bottom:0}
body .kingster-mobile-header .kingster-logo img{max-height:52px !important}
/* ==== Mobile header bar ==========================================
~64px deep-green bar: crest left, hamburger right. The wrapper is
position:relative in Kingster, so it stays in flow and cannot
overlap the slider below. */
.kingster-mobile-header .kingster-header-background{
background-color:#0B4218 !important;
opacity:1 !important;
}
.kingster-mobile-header{padding-top:8px;padding-bottom:8px}
.kingster-mobile-header .kingster-mobile-header-container{
display:flex;
align-items:center;
justify-content:space-between;
min-height:64px;
}
.kingster-mobile-header .kingster-logo{padding:0;margin:0;flex:0 1 auto;min-width:0}
.kingster-mobile-header .kingster-logo-inner{
line-height:1.15 !important;
margin-right:12px !important;
max-width:none !important;
}
.kingster-mobile-header .kingster-mobile-menu-right{
display:flex;
align-items:center;
gap:14px;
flex:0 0 auto;
}
/* lockup sits on green here, so invert the type */
.kingster-mobile-header .tuc-brandtext b,
.kingster-mobile-header .kingster-logo-inner a::before{color:#fff !important}
.kingster-mobile-header .tuc-brandtext i,
.kingster-mobile-header .kingster-logo-inner a::after{color:#FFF833 !important}
/* ==== Hamburger ==================================================
Kingster paints the three bars #333333, which is invisible on the
green bar. */
.kingster-mobile-button-hamburger:before,
.kingster-mobile-button-hamburger:after,
.kingster-mobile-button-hamburger span{
background:#fff !important;
}
.kingster-mobile-menu .kingster-mobile-menu-button{
border-color:rgba(255,255,255,.55) !important;
}
.kingster-mobile-menu-button i,
.kingster-mobile-header .kingster-main-menu-search i,
.kingster-mobile-header .kingster-top-menu-button i{color:#fff !important}
.kingster-mobile-header .kingster-mobile-menu{display:flex;align-items:center}
/* ==== Equal-height bottom band ===================================
The three cards carry very different amounts of copy, so left to
itself the grid row sized each to its own content. Stretching the
row and making each card a flex column lets the Library button sit
on the bottom edge while all three share one height. */
.band{align-items:stretch}
.band > div,
.band-work,
.band-ev,
.band-portals{
display:flex;
flex-direction:column;
height:100%;
padding:40px 36px;
}
.band-work .btn{margin-top:auto;align-self:flex-start}
.band-ev .newslist,
.band-portals p:last-of-type{margin-bottom:0}
/* every footer column starts flush at the top: Kingster's widget wrapper
carries a top margin on some columns and not others, which left the
About heading a few pixels lower than its neighbours */
.kingster-footer-wrapper .kingster-footer-column{vertical-align:top}
.kingster-footer-wrapper .kingster-widget{margin-top:0}
.kingster-footer-wrapper .kingster-widget > *:first-child,
.tuc-fcol > *:first-child{margin-top:0}
/* ==== ACADEMICS mega menu ========================================
Kingster's walker emits (only `.sf-menu > li > a` is
relative), so .sf-mega{position:absolute} resolves against
.kingster-header-container — several hundred pixels to the left of
ACADEMICS. The theme papers over this in script-core.js by measuring
a negative margin-left at DOM-ready (and style-custom.css adds a
further margin-left:20px), but that measurement runs before the
webfont settles and is only re-bound to window.resize, so the panel
landed off to the left. Anchor it in CSS instead. !important is
required: the JS writes margin-left/right as inline styles. */
.kingster-navigation .sf-menu > li.kingster-mega-menu{position:relative}
.kingster-navigation .sf-menu > li.kingster-mega-menu > .sf-mega{
left:50% !important; /* 50% of the ACADEMICS */
right:auto !important;
margin-left:-440px !important; /* half the 880px panel -> centred */
}
/* ---- mobile menu: rows that open a sub-panel ----------------------
kingster_mobile_menu() in script-core.js strips every
and replaces it with