/* ==========================================================================
The Good Designers — additions to the Jano theme
Loaded after style.css and responsive.css. Jano's own files are unchanged,
so theme updates can be applied safely.
Colours reuse Jano's variables: --prime-eleven (#FFCE4C yellow), #000, #FBF4EE.
========================================================================== */
:root {
--tgd-yellow: var(--prime-eleven, #FFCE4C);
--tgd-cream: #FBF4EE;
--tgd-ink: #000;
--tgd-muted: rgba(0, 0, 0, 0.6);
--tgd-line: rgba(0, 0, 0, 0.12);
}
/* ---------- Header: text wordmark (swap for logo image later) ---------- */
.tgd-wordmark {
font-weight: 700;
font-size: 19px;
line-height: 1.05;
letter-spacing: -0.5px;
color: var(--tgd-ink);
text-decoration: none;
}
.tgd-wordmark:hover { color: var(--tgd-ink); }
.theme-menu-nine .navbar .navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399px) {
.theme-menu-nine .navbar .navbar-nav .nav-link { font-size: 16px; margin: 0 10px; }
}
/* ---------- Shared small pieces ---------- */
.tgd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tgd-badge {
display: inline-block;
font-size: 13px;
font-weight: 500;
line-height: 1;
padding: 8px 12px;
border: 1.5px solid var(--tgd-ink);
color: var(--tgd-ink);
background: #fff;
}
.tgd-badge--dark { background: var(--tgd-ink); color: #fff; }
.tgd-list li {
position: relative;
padding: 0 0 14px 34px;
font-size: 18px;
line-height: 1.55;
}
.tgd-list--check li:before {
content: "\F26E"; /* bootstrap-icons check-lg */
font-family: bootstrap-icons !important;
position: absolute; left: 0; top: 1px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--tgd-yellow); border: 1.5px solid var(--tgd-ink);
font-size: 13px;
}
.tgd-list--dot li:before {
content: ""; position: absolute; left: 6px; top: 11px;
width: 9px; height: 9px; background: var(--tgd-ink);
}
.btn-eighteen-link {
display: inline-flex; align-items: center; gap: 8px;
font-size: 16px; color: var(--tgd-ink);
border-bottom: 2px solid var(--tgd-ink); padding-bottom: 2px;
}
.btn-eighteen-link:hover { color: var(--tgd-ink); border-color: var(--tgd-yellow); }
.tgd-btn-block { display: block; text-align: center; line-height: 54px; background: var(--tgd-yellow); color: #000; }
.tgd-btn-block:hover { background: #000; color: #fff; }
/* ---------- Format strip (course listing) ---------- */
.tgd-format-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tgd-format-strip span {
font-size: 16px; font-weight: 500; padding: 10px 18px;
border: 1.5px solid var(--tgd-ink); background: #fff;
}
.tgd-format-strip .tgd-format-strip__label { border: 0; background: none; padding-left: 0; color: var(--tgd-muted); }
/* ---------- Course card (listing) ---------- */
.tgd-course-card { background: #fff; border: 2px solid var(--tgd-ink); position: relative; }
.tgd-course-card .img-meta { border-bottom: 2px solid var(--tgd-ink); }
.tgd-course-info { padding: 28px 30px 32px; }
.tgd-course-info__title { font-size: 24px; line-height: 1.3; font-weight: 500; margin: 0 0 12px; }
.tgd-course-info__title a { color: var(--tgd-ink); }
.tgd-course-info__title a:hover { text-decoration: underline; text-decoration-color: var(--tgd-yellow); text-decoration-thickness: 3px; }
.tgd-course-info p { font-size: 17px; color: var(--tgd-muted); margin-bottom: 20px; }
.tgd-crosslink {
display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
background: var(--tgd-cream); border: 2px solid var(--tgd-ink); padding: 40px 50px;
}
.tgd-crosslink h3 { font-size: 28px; font-weight: 500; margin-bottom: 8px; }
/* ---------- Course detail ---------- */
.tgd-agenda { width: 100%; border-collapse: collapse; border-top: 2px solid var(--tgd-ink); }
.tgd-agenda th, .tgd-agenda td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--tgd-line); vertical-align: top; font-size: 17px; }
.tgd-agenda tbody th { width: 130px; font-weight: 500; white-space: nowrap; }
.tgd-agenda--modules thead th { font-size: 14px; font-weight: 500; color: var(--tgd-muted); padding-top: 14px; padding-bottom: 14px; }
.tgd-agenda--modules tbody th { width: 34%; white-space: normal; }
.tgd-agenda .tgd-mins { width: 80px; text-align: right; font-weight: 500; white-space: nowrap; padding-right: 0; }
.tgd-enquire-box {
position: sticky; top: 110px;
background: var(--tgd-yellow); border: 2px solid var(--tgd-ink);
box-shadow: 8px 8px 0 var(--tgd-ink);
padding: 34px 32px;
}
.tgd-enquire-box h4 { font-size: 24px; font-weight: 500; margin-bottom: 18px; }
.tgd-enquire-box ul { margin-bottom: 28px; }
.tgd-enquire-box li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.2); font-size: 16px; }
.tgd-enquire-box li strong { font-weight: 500; text-align: right; }
.tgd-enquire-box .btn-twentyFour { background: #fff; }
.tgd-trainer { display: flex; gap: 22px; align-items: flex-start; }
.tgd-trainer__avatar {
flex: 0 0 84px; width: 84px; height: 84px;
display: flex; align-items: center; justify-content: center;
background: var(--tgd-yellow); border: 2px solid var(--tgd-ink);
font-weight: 700; font-size: 26px;
}
.tgd-trainer--card { border: 2px solid var(--tgd-ink); padding: 34px; background: #fff; }
/* ---------- Video (click-to-load YouTube) ---------- */
.tgd-video { position: relative; border: 2px solid var(--tgd-ink); background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.tgd-video__play { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.tgd-video__play img { height: 100%; object-fit: cover; }
.tgd-video__icon {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 76px; height: 76px; border-radius: 50%;
background: var(--tgd-yellow); border: 2px solid var(--tgd-ink);
display: flex; align-items: center; justify-content: center; font-size: 36px; color: #000;
transition: transform .2s ease;
}
.tgd-video__play:hover .tgd-video__icon { transform: translate(-50%, -50%) scale(1.08); }
.tgd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tgd-video__title { font-size: 22px; font-weight: 500; }
/* ---------- Lunch & Learns ---------- */
.tgd-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--tgd-ink); background: #fff; }
.tgd-facts > div { padding: 24px 26px; border-right: 1px solid var(--tgd-line); }
.tgd-facts > div:last-child { border-right: 0; }
.tgd-facts strong { display: block; font-size: 20px; font-weight: 500; }
.tgd-facts span { font-size: 15px; color: var(--tgd-muted); }
.tgd-facts--center { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.tgd-lnl-card { position: relative; display: flex; flex-direction: column; }
.tgd-lnl-card .pr-feature { flex-grow: 1; }
.tgd-lnl-card .pack-name { font-size: 24px !important; line-height: 1.3; min-height: 2.6em; }
.tgd-lnl-card__no { font-size: 14px; font-weight: 500; color: var(--tgd-muted); margin-bottom: 6px; }
.tgd-lnl-card .top-banner { gap: 14px; }
.tgd-lnl-card .top-banner span { font-size: 18px !important; }
.tgd-lnl-card .top-banner em { font-size: 14px; font-style: normal; }
.tgd-lnl-card--soon { background: #fafafa; }
.tgd-ribbon {
position: absolute; top: -14px; right: 24px;
background: var(--tgd-yellow); border: 1.5px solid var(--tgd-ink);
font-size: 13px; font-weight: 500; padding: 5px 12px;
}
.pricing-table-area-four .pr-table-wrapper.full-width .price { font-size: 44px; }
.tgd-sticky { position: sticky; top: 120px; }
.tgd-acc .accordion-button { font-size: 22px; line-height: 1.35; }
.tgd-acc-no { display: inline-block; min-width: 42px; font-weight: 700; color: var(--tgd-ink); opacity: .35; }
.tgd-hook {
font-size: 22px; line-height: 1.45; font-weight: 500; font-style: italic;
border-left: 5px solid var(--tgd-yellow); padding: 4px 0 4px 20px; margin: 10px 0 22px;
}
.tgd-takeaway { background: var(--tgd-cream); padding: 16px 20px; font-size: 17px; }
.tgd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: none; border-top: 2px solid var(--tgd-ink); }
.tgd-steps li { padding: 30px 26px 10px 0; position: relative; }
.tgd-steps li + li { padding-left: 26px; border-left: 1px solid var(--tgd-line); }
.tgd-steps span {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; background: var(--tgd-yellow); border: 2px solid var(--tgd-ink);
font-weight: 700; font-size: 18px; margin-bottom: 18px;
}
.tgd-steps h4 { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.tgd-steps p { font-size: 16px; color: var(--tgd-muted); }
/* ---------- Qualifying form ---------- */
.tgd-form ::placeholder { color: rgba(0, 0, 0, 0.35); }
.tgd-form .input-bg-group { padding: 50px 60px 50px; }
.tgd-form__step {
font-size: 15px; font-weight: 500; letter-spacing: .5px; color: var(--tgd-muted);
border-bottom: 2px solid var(--tgd-ink); padding-bottom: 12px; margin: 10px 0 34px;
}
.tgd-form__step:not(:first-child) { margin-top: 30px; }
.tgd-fieldset { border: 0; padding: 0; margin: 0; }
.tgd-fieldset legend { font-size: 17px; font-weight: 500; color: #000; margin-bottom: 14px; float: none; }
.tgd-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.tgd-choices--stack { flex-direction: column; align-items: flex-start; }
.tgd-choice { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.tgd-choices .tgd-choice {
border: 1.5px solid var(--tgd-ink); padding: 10px 16px; background: #fff; font-size: 16px;
transition: background .15s ease;
}
.tgd-choices .tgd-choice:hover { background: var(--tgd-cream); }
.tgd-choices .tgd-choice:has(input:checked) { background: var(--tgd-yellow); }
.tgd-choice input { width: 18px; height: 18px; margin-top: 2px; accent-color: #000; flex: 0 0 auto; }
.tgd-choice--agree { font-size: 16px; line-height: 1.5; margin-top: 10px; }
.tgd-form .help-block { font-size: 14px; color: #c0392b; margin-top: 6px; }
.tgd-form .has-error .tgd-choice { border-color: #c0392b; }
/* ---------- Webinars ---------- */
.hero-banner-twelve .hero-heading.tgd-hero-sm { font-size: 72px; }
.tgd-next-webinar { display: flex; background: #fff; border: 2px solid var(--tgd-ink); box-shadow: 10px 10px 0 var(--tgd-ink); }
.tgd-next-webinar__date {
flex: 0 0 110px; background: var(--tgd-yellow); border-right: 2px solid var(--tgd-ink);
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 10px;
}
.tgd-next-webinar__date span { font-size: 14px; font-weight: 500; }
.tgd-next-webinar__date strong { font-size: 30px; font-weight: 700; line-height: 1.1; }
.tgd-next-webinar__body { padding: 30px 30px 32px; }
.tgd-next-webinar__body h3 { font-size: 28px; font-weight: 500; line-height: 1.25; margin-bottom: 12px; }
.tgd-webinar-meta li { font-size: 15px; font-weight: 500; }
.tgd-webinar-meta li:before { display: none; }
.tgd-webinar-meta li + li { margin-top: 4px; color: var(--tgd-muted); }
.tgd-card-empty { background: var(--tgd-cream) !important; }
.tgd-band-title { font-size: 36px; }
.tgd-notify { background: var(--tgd-yellow); border: 2px solid var(--tgd-ink); padding: 50px 60px; }
.tgd-notify h2 { font-size: 36px; }
.tgd-notify__form { display: flex; gap: 0; border: 2px solid var(--tgd-ink); background: #fff; }
.tgd-notify__form input { flex: 1; border: 0; padding: 0 20px; height: 60px; font-size: 17px; min-width: 0; }
.tgd-notify__form button { border: 0; border-left: 2px solid var(--tgd-ink); padding: 0 28px; background: #000; color: #fff; border-radius: 0; } /* square, so no white shows at the corners */
.tgd-notify__form button:hover { background: #333; }
/* ---------- Community programmes ---------- */
.tgd-prog-card { display: flex; flex-direction: column; }
.tgd-prog-card p { flex-grow: 1; }
.tgd-prog-card h4 { font-size: 22px; line-height: 1.35; }
.tgd-prog-price { display: flex; gap: 0; border-top: 2px solid var(--tgd-ink); margin-top: 20px; }
.tgd-prog-price > div { flex: 1; padding-top: 16px; }
.tgd-prog-price > div + div { padding-left: 18px; border-left: 1px solid var(--tgd-line); }
.tgd-prog-price strong { display: block; font-size: 28px; font-weight: 700; line-height: 1.1; }
.tgd-prog-price span { font-size: 14px; color: var(--tgd-muted); }
.tgd-prog-card--cta { background: var(--tgd-yellow) !important; border: 2px solid var(--tgd-ink); justify-content: center; }
.tgd-prog-card--cta .btn-twentyFour { background: #fff; align-self: flex-start; }
.fancy-short-banner-ten p { max-width: 460px; }
/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
.hero-banner-twelve .hero-heading.tgd-hero-sm { font-size: 56px; }
}
@media (max-width: 991px) {
.tgd-facts { grid-template-columns: repeat(2, 1fr); }
.tgd-facts > div:nth-child(2) { border-right: 0; }
.tgd-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--tgd-line); }
.tgd-facts--center { grid-template-columns: 1fr; }
.tgd-facts--center > div { border-right: 0; border-bottom: 1px solid var(--tgd-line); }
.tgd-steps { grid-template-columns: repeat(2, 1fr); }
.tgd-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
.tgd-enquire-box, .tgd-sticky { position: static; }
.tgd-form .input-bg-group { padding: 36px 26px; }
.tgd-notify { padding: 36px 28px; }
.tgd-crosslink { padding: 30px; }
}
@media (max-width: 767px) {
.hero-banner-twelve .hero-heading.tgd-hero-sm { font-size: 42px; }
.tgd-steps { grid-template-columns: 1fr; }
.tgd-steps li, .tgd-steps li + li { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--tgd-line); padding-bottom: 20px; }
.tgd-next-webinar { flex-direction: column; }
.tgd-next-webinar__date { flex: none; flex-direction: row; gap: 10px; border-right: 0; border-bottom: 2px solid var(--tgd-ink); }
.tgd-trainer { flex-direction: column; }
.tgd-agenda tbody th { width: 100px; }
.tgd-acc .accordion-button { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
.tgd-video__icon, .tgd-choices .tgd-choice { transition: none; }
}
/* ---------- Fixes to Jano sections reused on new pages ---------- */
/* Banner ten was built to overlap a different footer; stop it covering footer-style-eleven */
.fancy-short-banner-ten { margin-bottom: 0; }
/* Keep course cards level in the isotope grid */
.tgd-course-info__title { min-height: 2.6em; }
.tgd-course-info p { min-height: 3.2em; }
@media (max-width: 767px) {
.tgd-course-info__title, .tgd-course-info p { min-height: 0; }
}
/* ---------- Brand alignment: Jano's pink labels become black on these pages ---------- */
.title-style-five .sc-title-two,
.title-style-twelve .sc-title { color: rgba(0, 0, 0, 0.6); }
.title-style-five .sc-title-two:before,
.title-style-twelve .sc-title:before { background: var(--tgd-yellow); height: 3px; top: 13px; }
/* Course detail banner sits below the header, not under it */
.inner-banner-two.tgd-banner-offset { margin-top: 150px; }
@media (max-width: 991px) { .inner-banner-two.tgd-banner-offset { margin-top: 110px; } }
/* Form spacing */
.tgd-form .tgd-fieldset { margin-bottom: 40px; }
.tgd-enquiry-section { margin-top: 10px; } /* + 60px of section padding above = 70px gap under the cards */
@media (max-width: 1399px) { .tgd-enquiry-section { margin-top: 30px; } }
@media (max-width: 1199px) { .tgd-enquiry-section { margin-top: 80px; } }
/* Enquiry box small print readable on yellow */
.tgd-enquire-box p { color: rgba(0, 0, 0, 0.75); opacity: 1 !important; }
.tgd-enquire-box li span { color: rgba(0, 0, 0, 0.7); }
/* Lunch & Learn cards: keep price banners level */
.tgd-lnl-card .pack-details { min-height: 3em; }
.tgd-prog-card .tgd-badge { align-self: flex-start; width: auto; }
.fancy-feature-fiftySix .bg-wrapper { background: var(--tgd-cream); }
.contact-section-three .address-wrapper { background: var(--tgd-cream); }
/* Spam trap field: never visible */
.tgd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Lunch & Learn fact strip now has five items */
.pricing-section-four .tgd-facts { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 991px) { .pricing-section-four .tgd-facts { grid-template-columns: repeat(2, 1fr); } }
/* ==========================================================================
Part 2 components: Home, TVET, Teacher Capacity Building, About, Stories
========================================================================== */
.hero-banner-twelve .hero-heading.tgd-hero-md { font-size: 76px; line-height: 1.08; }
.hero-banner-twelve .card-style.card-three p { font-size: 15px; }
@media (max-width: 1199px) { .hero-banner-twelve .hero-heading.tgd-hero-md { font-size: 58px; } }
@media (max-width: 767px) { .hero-banner-twelve .hero-heading.tgd-hero-md { font-size: 44px; } }
/* Pathway staircase */
.tgd-stair { display: flex; flex-direction: column; gap: 6px; }
.tgd-stair li { border: 2px solid #000; background: #fff; padding: 16px 22px; }
.tgd-stair li:nth-child(2) { margin-left: 6%; }
.tgd-stair li:nth-child(3) { margin-left: 12%; }
.tgd-stair li:nth-child(4) { margin-left: 18%; background: var(--tgd-cream); }
.tgd-stair li:nth-child(5) { margin-left: 24%; background: var(--tgd-yellow); box-shadow: 6px 6px 0 #000; }
.tgd-stair strong { display: block; font-size: 19px; font-weight: 500; }
.tgd-stair span { font-size: 15px; color: var(--tgd-muted); }
@media (max-width: 767px) { .tgd-stair li { margin-left: 0 !important; } }
/* Client names */
.tgd-logos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid #000; border-left: 1px solid var(--tgd-line); }
.tgd-logos li { padding: 26px 18px; text-align: center; font-size: 18px; font-weight: 500; border-right: 1px solid var(--tgd-line); border-bottom: 1px solid var(--tgd-line); }
@media (max-width: 767px) { .tgd-logos { grid-template-columns: repeat(2, 1fr); } .tgd-logos li { font-size: 15px; padding: 18px 10px; } }
/* Story cards */
.tgd-story-card { border: 2px solid #000; background: #fff; display: flex; flex-direction: column; }
.tgd-story-card__img { border-bottom: 2px solid #000; aspect-ratio: 7 / 5; overflow: hidden; }
.tgd-story-card__img img { height: 100%; object-fit: cover; }
.tgd-story-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.tgd-story-card h3 { font-size: 22px; line-height: 1.35; font-weight: 500; }
.tgd-story-card p { font-size: 16px; color: var(--tgd-muted); flex: 1; }
.tgd-soon { font-size: 14px; font-weight: 500; color: var(--tgd-muted); }
/* TVET programme cards */
.tgd-programme-card { display: flex; flex-direction: column; border: 2px solid #000; background: var(--tgd-yellow); padding: 44px 44px 40px; color: #000; box-shadow: 8px 8px 0 #000; transition: transform .2s ease; }
.tgd-programme-card:hover { color: #000; transform: translate(-3px, -3px); }
.tgd-programme-card--dark { background: #000; color: #fff; box-shadow: 8px 8px 0 var(--tgd-yellow); }
.tgd-programme-card--dark:hover { color: #fff; }
.tgd-programme-card--dark .btn-eighteen-link { color: #fff; border-color: #fff; }
.tgd-programme-card__code { font-size: 15px; font-weight: 700; letter-spacing: 1px; opacity: .6; }
.tgd-programme-card h3 { font-size: 36px; font-weight: 500; margin: 10px 0 14px; }
.tgd-programme-card p { font-size: 18px; flex: 1; }
.tgd-programme-card__meta { display: flex; gap: 0; border-top: 1.5px solid currentColor; margin: 20px 0 30px; }
.tgd-programme-card__meta li { flex: 1; padding-top: 16px; }
.tgd-programme-card__meta strong { display: block; font-size: 22px; font-weight: 700; }
.tgd-programme-card__meta span { font-size: 14px; opacity: .7; }
.tgd-compare thead th { font-size: 17px; font-weight: 500; padding: 16px 16px 16px 0; border-bottom: 2px solid #000; }
.tgd-compare tbody th { width: 24%; white-space: normal; color: var(--tgd-muted); font-weight: 500; }
.tgd-compare td { width: 38%; }
.tgd-steps--five { grid-template-columns: repeat(5, 1fr); }
.tgd-steps--six { grid-template-columns: repeat(6, 1fr); }
.tgd-steps--six li, .tgd-steps--five li { padding-right: 18px; }
.tgd-steps--six li + li, .tgd-steps--five li + li { padding-left: 18px; }
@media (max-width: 1199px) { .tgd-steps--six { grid-template-columns: repeat(3, 1fr); } .tgd-steps--six li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 991px) { .tgd-steps--five { grid-template-columns: repeat(2, 1fr); } .tgd-steps--six { grid-template-columns: repeat(2, 1fr); }
.tgd-steps--five li:nth-child(odd), .tgd-steps--six li:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 767px) { .tgd-steps--five, .tgd-steps--six { grid-template-columns: 1fr; } }
.tgd-outcome-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.tgd-outcome-chain span { border: 2px solid #000; padding: 12px 22px; font-size: 18px; font-weight: 500; background: #fff; }
.tgd-outcome-chain span:last-child { background: var(--tgd-yellow); }
/* Year + quarter blocks */
.tgd-year__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; border-bottom: 2px solid #000; padding-bottom: 14px; }
.tgd-year__head h3 { font-size: 34px; font-weight: 500; margin: 0; }
.tgd-year__head span { font-size: 17px; color: var(--tgd-muted); }
.tgd-quarter { border: 2px solid #000; background: #fff; padding: 26px 24px; display: flex; flex-direction: column; }
.tgd-quarter__q { font-size: 14px; font-weight: 500; color: var(--tgd-muted); margin-bottom: 8px; }
.tgd-quarter h4 { font-size: 21px; line-height: 1.3; font-weight: 500; margin-bottom: 14px; }
.tgd-quarter ul { flex: 1; margin-bottom: 18px; }
.tgd-quarter li { font-size: 15.5px; line-height: 1.5; padding: 6px 0 6px 16px; position: relative; border-bottom: 1px solid var(--tgd-line); }
.tgd-quarter li:before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: #000; }
.tgd-quarter__proj { background: var(--tgd-yellow); border: 1.5px solid #000; padding: 12px 14px; }
.tgd-quarter__proj span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
.tgd-quarter__proj strong { font-size: 16px; font-weight: 500; }
/* Help / principle cards */
.tgd-help-card { border: 2px solid #000; padding: 26px 24px; background: #fff; }
.tgd-help-card span { font-size: 14px; font-weight: 700; opacity: .4; }
.tgd-help-card p { font-size: 17px; margin: 10px 0 0; }
.tgd-help-card h4 { font-size: 21px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.tgd-help-card h4 + p { color: var(--tgd-muted); font-size: 16px; }
.tgd-list--two { columns: 2; column-gap: 30px; }
.tgd-list--two li { break-inside: avoid; }
@media (max-width: 575px) { .tgd-list--two { columns: 1; } }
.tgd-legal h3 { font-size: 22px; font-weight: 500; margin: 36px 0 12px; }
.tgd-legal p { font-size: 17px; line-height: 1.7; }
.tgd-programme-card--dark h3 { color: #fff; }
.tgd-story-card .tgd-badge { align-self: flex-start; }
/* ==========================================================================
Part 3: typewriter hero, galleries, timeline, hover and spacing fixes
========================================================================== */
/* --- Typewriter headline (home hero) --- */
.tgd-type-wrap { display: block; min-height: 3.3em; }
.tgd-caret { display: inline-block; width: 3px; height: 0.95em; background: var(--tgd-yellow);
margin-left: 6px; vertical-align: -0.08em; animation: tgd-blink 1s steps(1) infinite; }
@keyframes tgd-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tgd-caret { display: none; } }
@media (max-width: 991px) { .tgd-type-wrap { min-height: 0; } }
/* --- HOVER FIX: Jano hides these borders on hover. Keep the outline; change the fill only. --- */
body .card-style-eighteen:hover { background: var(--tgd-yellow); border-color: #000; }
body .card-style-eighteen { border: 2px solid #000; transition: background .2s ease; }
body .card-style-eighteen.more-item:hover { background: #fff; border-color: #000; }
body .btn-twentyFour:hover { border-color: #000; }
body .btn-twentyFour:hover:after, body .btn-twentyFour:hover:before { background: #f3c755; border-color: #000; }
body .btn-twentySix { border: 2px solid #000; }
body .btn-twentySix:hover { border-color: #000; }
body .btn-twentySix:hover:before { border-color: #000; }
body .btn-twenty:hover { border-color: #000; }
.pricing-table-area-four .pr-table-wrapper .trial-button:hover { border-color: #000; }
.theme-main-menu .signup-btn-three { border: 2px solid #000; }
.theme-main-menu .signup-btn-three:hover { border-color: #000; }
.tgd-story-card:hover, .tgd-course-card:hover, .tgd-quarter:hover { border-color: #000; }
/* --- SPACING FIX: btn-twentyFour draws a frame 16px above and right of itself --- */
body .btn-twentyFour { margin-top: 26px; margin-right: 20px; }
.tgd-list + .btn-twentyFour, .tgd-list + a.btn-twentyFour,
.tgd-list + .btn-fifteen, .tgd-list + a.btn-one { margin-top: 30px; }
.hero-banner-twelve .btn-twentyFour { margin-top: 30px; }
.tgd-enquire-box .btn-twentyFour, .tgd-crosslink .btn-twentyFour { margin-top: 20px; }
.tgd-prog-card--cta .btn-twentyFour { margin-top: 24px; }
/* --- Photo gallery --- */
.tgd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tgd-gallery__item { margin: 0; border: 2px solid #000; background: #fff; }
.tgd-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-bottom: 2px solid #000; }
.tgd-gallery figcaption { font-size: 15px; padding: 12px 16px; color: var(--tgd-muted); }
@media (max-width: 991px) { .tgd-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 575px) { .tgd-gallery { grid-template-columns: 1fr; } }
/* --- Project timeline --- */
.tgd-timeline { position: relative; padding-left: 0; }
.tgd-timeline:before { content: ""; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px; background: #000; }
.tgd-timeline__item { position: relative; padding: 0 0 46px 60px; }
.tgd-timeline__marker { position: absolute; left: 0; top: 6px; width: 28px; height: 28px; background: var(--tgd-yellow); border: 2px solid #000; }
.tgd-timeline__tag { font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tgd-muted); }
.tgd-timeline__body h4 { font-size: 26px; font-weight: 500; margin: 6px 0 6px; }
.tgd-timeline__meta { font-size: 16px; font-weight: 500; background: var(--tgd-cream); display: inline-block; padding: 5px 12px; margin-bottom: 14px; }
.tgd-timeline__body p { font-size: 18px; line-height: 1.6; max-width: 62ch; }
.tgd-timeline__photo { margin: 18px 0 0; border: 2px solid #000; max-width: 420px; }
.tgd-timeline__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 575px) { .tgd-timeline__item { padding-left: 44px; } .tgd-timeline:before { left: 9px; }
.tgd-timeline__marker { width: 20px; height: 20px; } .tgd-timeline__body h4 { font-size: 22px; } }
/* --- Misc --- */
.tgd-hook--lg { font-size: 26px; line-height: 1.45; }
.tgd-narrow { max-width: 70ch; margin-left: auto; margin-right: auto; }
.tgd-narrow-left { max-width: 70ch; }
.tgd-cycle-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
border: 2px solid #000; background: var(--tgd-yellow); padding: 12px 20px; font-weight: 500; }
/* Hero stat cards: pull them inside the viewport (Jano's -10% clips at 1440px) */
.hero-banner-twelve .card-two { right: -2%; width: 170px; height: auto; padding: 14px 10px; }
.hero-banner-twelve .card-three { right: -2%; width: 200px; height: auto; padding: 14px 10px; }
.hero-banner-twelve .card-one { left: -6%; height: auto; padding: 14px 10px; }
@media (max-width: 1199px) {
.hero-banner-twelve .card-two, .hero-banner-twelve .card-three { right: 0; }
}
/* --- Public run schedule, funded programmes, OnePA prices --- */
.tgd-runs thead th { font-size: 14px; font-weight: 500; color: var(--tgd-muted); padding: 14px 16px 14px 0; border-bottom: 2px solid #000; }
.tgd-runs tbody th { width: 34%; white-space: normal; font-weight: 500; }
.tgd-runs td { font-size: 16px; }
.tgd-run-cta { display: inline-block; border: 1.5px solid #000; background: var(--tgd-yellow); padding: 8px 14px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.tgd-run-cta:hover { background: #000; color: #fff; }
.tgd-funded-card { display: block; border: 2px solid #000; background: var(--tgd-cream); padding: 34px 34px 36px; color: #000; }
.tgd-funded-card:hover { background: var(--tgd-yellow); color: #000; }
.tgd-funded-card h3 { font-size: 26px; font-weight: 500; line-height: 1.3; }
.tgd-funded-card p { font-size: 17px; color: var(--tgd-muted); }
.tgd-onepa-price { border-top: 1.5px solid #000; padding-top: 12px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tgd-onepa-price span { font-size: 15px; font-weight: 500; }
.tgd-badge--private { background: #000; color: #fff; border-color: #000; }
/* --- Programme attribute tags (category / funding are separate attributes, never part of a title) --- */
.tgd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tgd-badge--cat { background: #000; color: #fff; border-color: #000; }
.tgd-badge--funded { background: var(--tgd-yellow); border-color: #000; color: #000; }
.tgd-programme-card--dark .tgd-badge { background: #fff; border-color: #fff; }
.tgd-programme-card--dark .tgd-badge--cat { background: transparent; color: #fff; border-color: #fff; }
.tgd-programme-card--dark .tgd-badge--funded { background: var(--tgd-yellow); border-color: var(--tgd-yellow); color: #000; }
.tgd-attr-row { border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; margin-top: 4px; }
.tgd-crosslink--dark { background: #000; border-color: #000; color: #fff; }
.tgd-crosslink--dark h3, .tgd-crosslink--dark p { color: #fff; }
.tgd-quote-panel { border: 2px solid #000; background: var(--tgd-cream); padding: 44px 48px; }
.tgd-quote-panel h3 { font-size: 28px; font-weight: 500; margin-bottom: 24px; }
@media (max-width: 767px) { .tgd-quote-panel { padding: 28px 24px; } }
/* --- Seat status on listed runs --- */
.tgd-seats { display: inline-block; font-size: 13px; font-weight: 500; padding: 6px 10px; border: 1.5px solid #000; white-space: nowrap; }
.tgd-seats--open { background: #E4F4F1; }
.tgd-seats--filling { background: var(--tgd-yellow); }
.tgd-seats--last { background: #FFEBEB; }
.tgd-seats--full, .tgd-seats--closed { background: #EFEFEF; color: rgba(0,0,0,.6); }
.tgd-seats--soon { background: #fff; color: rgba(0,0,0,.6); }
/* --- Giving Back --- */
.tgd-vol-card { border: 2px solid #000; background: #fff; padding: 30px 30px 32px; }
.tgd-vol-card h4 { font-size: 22px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; }
.tgd-vol-card__org { font-size: 16px; font-weight: 500; color: var(--tgd-muted); margin-bottom: 12px; }
.tgd-vol-card p { font-size: 16.5px; }
.tgd-giving-strip { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: center;
border: 2px solid #000; background: var(--tgd-yellow); padding: 46px 50px; color: #000; box-shadow: 8px 8px 0 #000; }
.tgd-giving-strip:hover { color: #000; background: #ffd873; }
.tgd-giving-strip > div { max-width: 58ch; }
.tgd-giving-strip h2 { font-size: 34px; margin: 6px 0 14px; }
.tgd-giving-strip p { font-size: 17px; }
.tgd-giving-strip__nums { display: flex; gap: 30px; }
.tgd-giving-strip__nums strong { display: block; font-size: 40px; font-weight: 700; line-height: 1; }
.tgd-giving-strip__nums span { font-size: 14px; }
@media (max-width: 767px) { .tgd-giving-strip { padding: 30px 26px; } .tgd-giving-strip h2 { font-size: 26px; }
.tgd-giving-strip__nums { gap: 20px; } .tgd-giving-strip__nums strong { font-size: 30px; } }
/* ==========================================================================
Navigation fixes (29 Sep) — breathing room between 992px and 1400px,
and dropdowns wide enough to keep every label on one line.
========================================================================== */
/* Dropdowns: never wrap a menu label */
/* Top-level items: step the spacing down as the window narrows,
instead of letting the labels run into each other. */
@media (min-width: 1400px) {
.theme-menu-nine .navbar .navbar-nav .nav-link { margin: 0 20px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
.theme-menu-nine .navbar .navbar-nav .nav-link { font-size: 16px; margin: 0 16px; }
.theme-menu-nine .signup-btn-three { padding: 0 22px; font-size: 16px; }
.theme-menu-nine .right-widget { margin-left: 18px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.theme-main-menu { padding-right: 16px; padding-left: 16px; }
.theme-menu-nine .navbar .navbar-nav .nav-link { font-size: 15px; margin: 0 11px; }
.theme-menu-nine .signup-btn-three { padding: 0 16px; font-size: 15px; line-height: 42px; }
.theme-menu-nine .right-widget { margin-left: 10px !important; }
.tgd-wordmark { font-size: 17px; }
}
/* The dropdown caret needs its own room, or it crowds the next label */
@media (min-width: 992px) {
.theme-menu-nine .navbar .navbar-nav .nav-link.dropdown-toggle { padding-right: 14px; }
}
/* ==========================================================================
NAV DROPDOWNS — single source of truth. Nothing else in this file sets
width, white-space or text-transform on .dropdown-menu.
Jano (navbar.css) sets left:0 AND right:0 on the desktop dropdown, which
pins its width to min-width, so any longer label wraps. width:max-content
lets the menu size itself to its longest label.
========================================================================== */
@media (min-width: 992px) {
.theme-main-menu .navbar .navbar-nav .dropdown-menu {
left: 0;
right: auto;
width: max-content;
min-width: 300px;
padding: 10px 8px;
}
}
.theme-main-menu .navbar .dropdown-menu .dropdown-item,
.theme-main-menu .navbar .dropdown-menu .dropdown-item span {
white-space: nowrap;
text-transform: none;
}
/* Group label inside a dropdown ("Education systems") */
.theme-main-menu .navbar .navbar-nav .dropdown-menu li.tgd-dd-label {
margin: 8px 0 0;
padding: 18px 15px 8px 20px;
border-top: 1px solid var(--tgd-line, rgba(0, 0, 0, 0.12));
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.45);
white-space: nowrap;
pointer-events: none;
}
@media (max-width: 991px) {
.theme-main-menu .navbar .navbar-nav .dropdown-menu li.tgd-dd-label {
margin-top: 4px;
padding: 14px 10px 6px 15px;
}
}
/* The last two menus sit near the right edge: open them leftwards so a
max-content menu can never push the page sideways on a narrow laptop. */
@media (min-width: 992px) {
.theme-main-menu .navbar .navbar-nav .nav-item.dropdown:nth-last-child(-n+2) .dropdown-menu {
left: auto;
right: 0;
}
}
/* ==========================================================================
2 Oct — hover colour, hero cards, gallery size, run button, dropdown label
========================================================================== */
/* Bootstrap's reboot was colouring plain links blue (#0a58ca) on hover.
Reset that, then set our own hover colour where a link is really text. */
a:hover, a:focus { color: inherit; }
.main-page-wrapper p a:hover,
.tgd-legal a:hover,
.accordion-body a:hover { color: var(--prime-ten); }
.card-style-eighteen:hover h4,
.card-style-eighteen:hover p { color: #000; }
/* Hero stat cards: centre everything */
.hero-banner-twelve .card-style { text-align: center; }
.hero-banner-twelve .card-style h4,
.hero-banner-twelve .card-style h5,
.hero-banner-twelve .card-style p { text-align: center; width: 100%; }
/* Photo gallery: three per row, smaller frames */
.tgd-gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1040px; margin-inline: auto; }
.tgd-gallery__item img { aspect-ratio: 3 / 2; }
.tgd-gallery figcaption { font-size: 14px; padding: 10px 14px; }
@media (max-width: 991px) { .tgd-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 575px) { .tgd-gallery { grid-template-columns: 1fr; } }
/* Register interest: a real button in the runs table */
.tgd-run-btn {
display: inline-block; white-space: nowrap;
font-size: 15px; font-weight: 500; line-height: 1;
padding: 12px 20px; color: #000;
background: var(--tgd-yellow); border: 2px solid #000;
transition: background .15s ease, color .15s ease;
}
.tgd-run-btn:hover { background: #000; color: #fff; }
/* Dropdown group label: aligned with the items, uppercase, orange, divider above */
.theme-main-menu .navbar .navbar-nav .dropdown-menu li.tgd-dd-label {
padding: 16px 15px 8px;
margin: 10px 0 2px;
border-top: 1px solid var(--tgd-line, rgba(0, 0, 0, 0.12));
color: #E8722B;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
@media (max-width: 991px) {
.theme-main-menu .navbar .navbar-nav .dropdown-menu li.tgd-dd-label { padding: 14px 10px 6px; }
}
/* ==========================================================================
2 Oct, round 2 — logo, tile icons, runs table, gallery, OnePA buttons
========================================================================== */
/* Logo */
.tgd-logo img { display: block; height: auto; max-width: 100%; }
.theme-main-menu .logo .tgd-logo img { width: 170px; }
@media (max-width: 1199px) { .theme-main-menu .logo .tgd-logo img { width: 140px; } }
.footer-intro .tgd-logo--footer img { width: 180px; margin-bottom: 4px; }
/* Tile icons are inline SVG now, so the yellow can turn white on hover */
.card-style-eighteen .tgd-tile-icon { max-height: 48px; width: auto; }
.card-style-eighteen:hover .tgd-tile-icon [fill="#FFCE4C"],
.card-style-eighteen:hover .tgd-tile-icon [fill="#ffce4c"] { fill: #fff; }
.card-style-eighteen:hover .tgd-tile-icon [stroke="#FFCE4C"],
.card-style-eighteen:hover .tgd-tile-icon [stroke="#ffce4c"] { stroke: #fff; }
/* Best-selling band: course name at a readable size, not hero size */
.tgd-band-course { font-size: 30px !important; line-height: 1.25; }
@media (max-width: 767px) { .tgd-band-course { font-size: 24px !important; } }
/* Section heading one size down */
.tgd-heading-sm { font-size: 32px !important; }
@media (max-width: 767px) { .tgd-heading-sm { font-size: 24px !important; } }
/* Runs table: narrower course column, wider date column, matching control heights */
.tgd-runs tbody th { width: 26%; }
.tgd-runs td:nth-child(2) { width: 17%; }
.tgd-runs td:nth-child(3) { width: 17%; }
.tgd-seats, .tgd-run-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 40px; padding: 0 16px; font-size: 14px; line-height: 1; white-space: nowrap;
}
.tgd-run-btn { font-size: 15px; padding: 0 20px; }
/* Recent workshops: full container width, same as the cards above */
.tgd-gallery { max-width: none; }
/* OnePA registration button on community cards */
.tgd-onepa-btn {
display: block; text-align: center; margin-top: 18px;
padding: 12px 18px; font-size: 15px; font-weight: 500;
border: 2px solid #000; background: #fff; color: #000;
transition: background .15s ease, color .15s ease;
}
.tgd-onepa-btn:hover { background: var(--tgd-yellow); color: #000; }
/* Read more on story cards */
.tgd-readmore {
display: inline-block; align-self: flex-start; margin-top: 4px;
padding: 10px 18px; font-size: 15px; font-weight: 500;
border: 2px solid #000; background: #fff; color: #000; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.tgd-story-card:hover .tgd-readmore,
.tgd-readmore:hover { background: var(--tgd-yellow); }
/* Community cards: keep the fee row and OnePA button level across the row */
.tgd-quarter > p { flex: 1 1 auto; }
.tgd-quarter .tgd-onepa-price { margin-top: auto; }
/* ==========================================================================
2 Oct, round 3 — photos in cards, full-width galleries
========================================================================== */
/* Photo at the top of a programme card (community programmes) */
.tgd-card-photo { margin: -26px -24px 20px; border-bottom: 2px solid #000; overflow: hidden; }
.tgd-card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* Horizontal photo on a volunteering card */
.tgd-vol-card { padding-top: 0; overflow: hidden; }
.tgd-vol-card__photo { margin: 0 -30px 24px; border-bottom: 2px solid #000; }
.tgd-vol-card__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
/* Galleries: full container width, larger frames */
.tgd-gallery { max-width: none; gap: 30px; }
.tgd-gallery__item img { aspect-ratio: 16 / 10; }
@media (max-width: 991px) { .tgd-gallery { gap: 18px; } }
/* ==========================================================================
2 Oct v4 — best-selling slider, trainer cards, journey timeline
========================================================================== */
.tgd-bs-slider { position: relative; }
.tgd-bs-slider .slick-list { overflow: hidden; }
.tgd-bs-photo { border: 2px solid var(--tgd-yellow); max-width: none; }
.tgd-bs-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tgd-bs-list li { color: #fff; opacity: .8; font-size: 16px; padding: 4px 0 4px 22px; position: relative; }
.tgd-bs-list li:before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; background: var(--tgd-yellow); }
.tgd-bs-slider .btn-twentyFive { margin-top: 26px; }
.tgd-bs-arrow {
position: absolute; bottom: -6px; right: 0; z-index: 3;
width: 48px; height: 48px; border: 2px solid var(--tgd-yellow); background: transparent;
color: var(--tgd-yellow); font-size: 20px; line-height: 1; cursor: pointer; transition: all .15s ease;
}
.tgd-bs-arrow--prev { right: 58px; }
.tgd-bs-arrow:hover { background: var(--tgd-yellow); color: #000; }
.tgd-bs-slider .slick-dots { display: flex; gap: 10px; list-style: none; padding: 0; margin: 34px 0 0; }
.tgd-bs-slider .slick-dots li button { width: 34px; height: 4px; padding: 0; border: 0; background: rgba(255,255,255,.3); font-size: 0; cursor: pointer; }
.tgd-bs-slider .slick-dots li.slick-active button { background: var(--tgd-yellow); }
@media (max-width: 991px) {
.tgd-bs-photo { max-width: none; margin-bottom: 30px; }
.tgd-bs-arrow { position: static; margin: 20px 10px 0 0; }
}
/* Trainer / team cards with photo and LinkedIn */
.tgd-person { border: 2px solid #000; background: #fff; display: flex; flex-direction: column; }
.tgd-person__photo { border-bottom: 2px solid #000; }
.tgd-person__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.tgd-person__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.tgd-person__body h4 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.tgd-person__role { font-size: 15px; color: var(--tgd-muted); margin-bottom: 14px; }
.tgd-person__body p { font-size: 16px; flex: 1; }
.tgd-person__li { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 15px; font-weight: 500; border-bottom: 2px solid var(--tgd-yellow); padding-bottom: 2px; }
.tgd-person__li:hover { border-color: #000; }
/* Journey timeline (About) */
.tgd-journey { position: relative; padding-left: 0; }
.tgd-journey:before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: #000; }
.tgd-journey li { position: relative; padding: 0 0 40px 60px; list-style: none; }
.tgd-journey li:before { content: ""; position: absolute; left: 0; top: 4px; width: 28px; height: 28px; background: var(--tgd-yellow); border: 2px solid #000; }
.tgd-journey h4 { font-size: 24px; font-weight: 500; margin: 0 0 8px; }
.tgd-journey .tgd-journey__year { font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tgd-muted); }
.tgd-journey p { font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 0; }
/* ==========================================================================
2 Oct v6 — wide trainer card, social links, Lunch & Learn series box
========================================================================== */
.tgd-person--wide { flex-direction: row; }
.tgd-person--wide .tgd-person__photo { flex: 0 0 200px; border-bottom: 0; border-right: 2px solid #000; }
.tgd-person--wide .tgd-person__photo img { height: 100%; }
.tgd-person__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 575px) {
.tgd-person--wide { flex-direction: column; }
.tgd-person--wide .tgd-person__photo { flex: none; border-right: 0; border-bottom: 2px solid #000; }
}
.tgd-series-box .tgd-includes { border-left: 2px solid #000; padding-left: 28px; }
.tgd-series-box .tgd-includes h5 { font-size: 18px; font-weight: 500; margin-bottom: 16px; }
.tgd-series-box .tgd-includes .tgd-list li { font-size: 16px; padding-bottom: 10px; }
@media (max-width: 991px) { .tgd-series-box .tgd-includes { border-left: 0; border-top: 2px solid #000; padding: 24px 0 0; } }
/* ---------- Responsive fixes (audit 05-10-2026) ---------- */
/* Notice bar: sit in the header flow on phones so the wrapped text no longer runs under the logo */
@media (max-width: 575px) {
.theme-menu-nine.theme-main-menu { padding-top: 0; }
.theme-menu-nine .notice-banner { position: relative; font-size: 13px; line-height: 1.4; padding: 6px 12px; margin: 0 -12px 10px; }
.theme-menu-nine .notice-banner a { line-height: 1.4; }
.theme-menu-nine.sticky-menu.fixed .notice-banner { display: none; }
.main-page-wrapper { padding-top: 24px; } /* header is taller with the bar in flow; keep hero text clear of the logo */
}
/* Fact boxes: keep long words inside the border on small phones */
@media (max-width: 400px) {
.tgd-facts > div { padding: 18px 14px; }
.tgd-facts strong { font-size: 18px; overflow-wrap: anywhere; }
}
/* Homepage hero badge: undo the desktop -6% offset so it stays on screen */
@media (max-width: 767px) { .hero-banner-twelve .card-one { left: 0; } }
/* Decorative squiggle that runs off the right edge on phones/tablets */
@media (max-width: 991px) { .fancy-feature-fortyOne .wrapper .shape-two { display: none !important; } } /* !important: lazy-load fadeIn sets inline display */
/* Best Selling slider dots: same 4px bar, 24px tall tap area */
.tgd-bs-slider .slick-dots li button { height: 24px; padding: 10px 0; margin-top: -10px; margin-bottom: -10px; background-clip: content-box; }
.tgd-bs-slider .slick-dots li.slick-active button { background-clip: content-box; }
/* Small text links: invisible 44px-tall tap area, no change to how they look */
@media (max-width: 767px) {
.notice-banner a, .btn-eighteen a, .btn-eighteen-link, .tgd-person__li, .pj-title,
a.text-decoration-underline, .btn-line, .btn-fifteen { position: relative; }
.notice-banner a::after, .btn-eighteen a::after, .btn-eighteen-link::after, .tgd-person__li::after, .pj-title::after,
a.text-decoration-underline::after, .btn-line::after, .btn-fifteen::after {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
}
/* Wide tables: swipe hint that stays in view while the table scrolls */
@media (max-width: 767px) {
.table-responsive::after {
content: "Swipe to see more \2192"; display: block; position: sticky; left: 0;
padding-top: 10px; font-size: 13px; color: var(--tgd-muted);
}
}
/* Closing CTA banner: half the gap between the banner and the footer content (pages with the banner only) */
.fancy-short-banner-ten + .footer-style-eleven { padding-top: 75px; }
@media (max-width: 1199px) { .fancy-short-banner-ten + .footer-style-eleven { padding-top: 50px; } }
/* Client logo rail — copied from v8 (3 Oct) */
/* Client logos: eight at a time, scrolling on their own */
.tgd-client-slider { border-top: 2px solid #000; border-bottom: 1px solid var(--tgd-line); padding: 10px 0; }
.tgd-client-slide { padding: 18px 20px; display: flex !important; align-items: center; justify-content: center; height: 110px; }
.tgd-client-logo { max-width: 100%; max-height: 64px; width: auto; object-fit: contain;
filter: grayscale(100%); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.tgd-client-slide:hover .tgd-client-logo { filter: none; opacity: 1; }
.tgd-client-slider .slick-track { display: flex; align-items: center; }
/* Seat status: green available, orange filling, red full */
.tgd-seats--open { background: #DCF3E4; border-color: #0A6B33; color: #0A6B33; }
.tgd-seats--filling, .tgd-seats--last { background: #FFE8CC; border-color: #B35309; color: #B35309; }
.tgd-seats--full { background: #FFE0E0; border-color: #B32020; color: #B32020; }
.tgd-seats--closed { background: #EFEFEF; border-color: rgba(0,0,0,.4); color: rgba(0,0,0,.6); }
.tgd-seats--soon { background: #fff; border-color: rgba(0,0,0,.4); color: rgba(0,0,0,.6); }
.tgd-seats--new { background: #E1EDFB; border-color: #1C5BA6; color: #1C5BA6; } /* blue: new date released */
/* About "From workshops to / national curricula." — fixed two lines (break is a
in the HTML) */
.title-style-eight .main-title.tgd-title-2line { font-size: 54px; }
@media (max-width: 1399px) { .title-style-eight .main-title.tgd-title-2line { font-size: 46px; } }
@media (max-width: 1199px) { .title-style-eight .main-title.tgd-title-2line { font-size: 48px; } }
@media (max-width: 991px) { .title-style-eight .main-title.tgd-title-2line { font-size: 35px; } }
@media (max-width: 374px) { .title-style-eight .main-title.tgd-title-2line { font-size: 30px; } }
/* Upcoming runs on a course detail page */
.tgd-course-runs { border: 2px solid #000; background: #fff; padding: 30px 32px 34px; }
.tgd-course-runs h3 { font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.tgd-course-runs > p { font-size: 16px; color: var(--tgd-muted); margin-bottom: 22px; }
.tgd-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 0; border-top: 1px solid var(--tgd-line); }
.tgd-run-row__date { font-size: 18px; font-weight: 500; min-width: 190px; }
.tgd-run-row__meta { font-size: 15px; color: var(--tgd-muted); flex: 1; min-width: 180px; }
.tgd-run-row .tgd-run-btn { margin-left: auto; }
@media (max-width: 575px) { .tgd-run-row .tgd-run-btn { margin-left: 0; } }
/* Course page runs box: equal-width seat badges and buttons so every row lines up */
.tgd-course-runs .tgd-seats, .tgd-course-runs .tgd-run-btn { width: 170px; }
/* Public Workshops "Upcoming workshops" table: every button the same width */
.tgd-runs--equal .tgd-run-btn, .tgd-runs--equal .tgd-seats { width: 165px; }
/* Work With Us: the form is the last section — same 75px / 50px gap above the footer content as pages ending with the banner */
.tgd-enquiry-section + .footer-style-eleven { padding-top: 29px; } /* + 46px trailing space of the form section */
@media (max-width: 1399px) { .tgd-enquiry-section + .footer-style-eleven { padding-top: 39px; } } /* + 36px */
@media (max-width: 1199px) { .tgd-enquiry-section + .footer-style-eleven { padding-top: 34px; } } /* + 16px */
/* Page that ends with a crosslink strip (no closing banner): same 75px / 50px gap above the footer content */
.tgd-last-section + .footer-style-eleven { padding-top: 75px; }
@media (max-width: 1199px) { .tgd-last-section + .footer-style-eleven { padding-top: 50px; } }
/* "Two ways to fund this work" cards (Teacher Capacity Building): clear guidance line + real call-to-action button */
.tgd-programme-card .tgd-card-fit { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; margin: 0 0 26px; }
.tgd-programme-card .tgd-card-fit i { font-size: 18px; line-height: 1; }
.tgd-card-cta {
display: inline-block; padding: 15px 26px; text-align: left;
font-size: 16px; font-weight: 500; line-height: 1.35; text-decoration: none;
background: #000; color: #fff; border: 2px solid #000;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tgd-card-cta i { display: inline-block; margin-left: 8px; vertical-align: -1px; transition: transform .2s ease; }
.tgd-card-cta:hover, .tgd-card-cta:focus-visible { background: #fff; color: #000; }
.tgd-card-cta:hover i, .tgd-card-cta:focus-visible i { transform: translateX(4px); }
.tgd-card-cta:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.tgd-programme-card--dark .tgd-card-cta { background: var(--tgd-yellow); color: #000; border-color: var(--tgd-yellow); }
.tgd-programme-card--dark .tgd-card-cta:hover, .tgd-programme-card--dark .tgd-card-cta:focus-visible { background: #fff; border-color: #fff; color: #000; }
.tgd-programme-card--dark .tgd-card-cta:focus-visible { outline-color: #fff; }
@media (max-width: 575px) { .tgd-card-cta { padding: 14px 20px; font-size: 15px; } }
/* When the whole card is the link (TVET Curriculum), the button reacts to hovering anywhere on the card */
a.tgd-programme-card:hover .tgd-card-cta, a.tgd-programme-card:focus-visible .tgd-card-cta { background: #fff; color: #000; }
a.tgd-programme-card--dark:hover .tgd-card-cta, a.tgd-programme-card--dark:focus-visible .tgd-card-cta { border-color: #fff; }
a.tgd-programme-card:hover .tgd-card-cta i, a.tgd-programme-card:focus-visible .tgd-card-cta i { transform: translateX(4px); }
/* Client logo rail: trimmed logos sized to an equal visual area (per-logo --w/--h), identical gaps between logos */
.tgd-client-slider .tgd-client-slide { height: 100px; padding: 0 20px; } /* 40px between every pair of logos */
.tgd-client-slider .tgd-client-logo { width: var(--w); height: var(--h); max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 767px) {
.tgd-client-slider .tgd-client-slide { height: 84px; padding: 0 14px; } /* 28px on phones */
.tgd-client-slider .tgd-client-logo { width: calc(var(--w) * .78); height: calc(var(--h) * .78); }
}
/* Course pages: previous / next course blocks show that course's banner photo, same 16:9 shape for both */
.portfolio-details-one .project-pagination .arrow-block img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Default (non-photo) course image in a prev/next block: show it whole, letterboxed in its own cream colour */
.portfolio-details-one .project-pagination .arrow-block img.tgd-img-whole { object-fit: contain; background: var(--tgd-cream); }
/* Private & Corporate Training course cards: each shows its course's banner photo, all at the same 16:9 shape */
.tgd-course-card .img-meta img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Programme cards: button sits 40px below the last bullet, matching the card's 40px bottom padding.
(The list's own margin is zeroed by the theme's .style-none; the last already adds ~16px.) */
.tgd-programme-card .tgd-list + .tgd-card-cta { margin-top: 24px !important; }
/* Course pages: trainer profile — photo on top, details below, LinkedIn link last (open layout, no card box) */
.tgd-trainer-profile { display: flex; flex-direction: column; align-items: flex-start; }
.tgd-trainer-profile__photo { width: 200px; border: 2px solid var(--tgd-ink); box-shadow: 8px 8px 0 var(--tgd-yellow); margin-bottom: 28px; }
.tgd-trainer-profile__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tgd-trainer-profile__name { font-size: 24px; font-weight: 500; margin: 0 0 4px; }
.tgd-trainer-profile__role { font-size: 15px; color: var(--tgd-muted); margin-bottom: 12px; }
.tgd-trainer-profile__bio { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
@media (max-width: 575px) { .tgd-trainer-profile__photo { width: 160px; } }
/* Trainer profile: tighter gap between the bio and the LinkedIn link (beats the theme's 45px paragraph margin) */
.tgd-trainer-profile p.tgd-trainer-profile__bio { margin-bottom: 22px; }
/* Course pages: enquiry form follows the programme cards — standard section gap (70px desktop / 80px below 1200px) */
.tgd-enquiry-section.tgd-enquiry-section--course { margin-top: 40px; } /* + 30px section padding */
@media (max-width: 1399px) { .tgd-enquiry-section.tgd-enquiry-section--course { margin-top: 50px; } }
@media (max-width: 1199px) { .tgd-enquiry-section.tgd-enquiry-section--course { margin-top: 55px; } }
/* Course pages: photo gallery (click to enlarge in the Fancybox lightbox) */
.tgd-gallery--course { max-width: none; gap: 20px; }
.tgd-gallery--course.tgd-gallery--n3 { grid-template-columns: repeat(3, 1fr); }
.tgd-gallery--course.tgd-gallery--n2 { grid-template-columns: repeat(2, 1fr); }
.tgd-gallery--course.tgd-gallery--n1 { grid-template-columns: 1fr; }
.tgd-gallery--course .tgd-gallery__item { display: block; overflow: hidden; cursor: zoom-in; }
.tgd-gallery--course .tgd-gallery__item img { aspect-ratio: 3 / 2; border-bottom: 0; transition: transform .35s ease; }
.tgd-gallery--course.tgd-gallery--n1 .tgd-gallery__item img { aspect-ratio: 16 / 9; }
.tgd-gallery--course .tgd-gallery__item:hover img, .tgd-gallery--course .tgd-gallery__item:focus-visible img { transform: scale(1.04); }
@media (max-width: 991px) { .tgd-gallery--course.tgd-gallery--n3 { grid-template-columns: repeat(2, 1fr); } .tgd-gallery--course { gap: 14px; } }
@media (max-width: 575px) { .tgd-gallery--course.tgd-gallery--n3, .tgd-gallery--course.tgd-gallery--n2 { grid-template-columns: 1fr; } }
/* Course gallery: max 6 photos in the grid; the 6th shows "+N" for the rest, which open in the lightbox */
.tgd-gallery--course .tgd-gallery__item--more { position: relative; }
.tgd-gallery__more {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .55); color: #fff; font-size: 40px; font-weight: 500; letter-spacing: 1px;
transition: background .25s ease;
}
.tgd-gallery--course .tgd-gallery__item--more:hover .tgd-gallery__more { background: rgba(0, 0, 0, .45); }
/* Form response message (enquiry form + course registration form) — from v11 */
.tgd-formmsg { font-size: 16px; padding: 14px 18px; border: 2px solid #000; margin-bottom: 22px; }
.tgd-formmsg.is-ok { background: #DCF3E4; border-color: #0A6B33; color: #0A6B33; }
.tgd-formmsg.is-err { background: #FFE0E0; border-color: #B32020; color: #B32020; }
/* Homepage "Recent workshops": course cards link to their course page */
.tgd-gallery__item--link { display: block; color: inherit; overflow: hidden; }
.tgd-gallery__item--link img { transition: transform .35s ease; }
.tgd-gallery__item--link:hover img, .tgd-gallery__item--link:focus-visible img { transform: scale(1.04); }
.tgd-gallery__item--link:hover figcaption, .tgd-gallery__item--link:focus-visible figcaption { color: #000; }
/* Corporate Training course cards: hover covers the whole image (no rotated band / tilt leaving empty corners) */
.tgd-course-card.hvr-shutter-out .img-meta:before { inset: 0; top: 0; bottom: 0; left: 0; right: 0; transform: none; opacity: 0; transition: opacity .35s ease; }
.tgd-course-card.hvr-shutter-out .img-meta:hover:before { top: 0; bottom: 0; opacity: 1; }
.tgd-course-card.hvr-shutter-out .img-meta img { transition: transform .5s ease; }
.tgd-course-card.hvr-shutter-out .img-meta:hover img { transform: scale(1.17) rotate(5deg); } /* 1.17 = enough zoom to fill a 16:9 box when tilted 5° */
/* Portrait images in the cream bands (About journey illustration, Lunch & Learn photo): never taller than the screen allows */
.illustration-holder .tgd-journey-img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(720px, calc(100vh - 140px)); margin: 0 auto; }
/* Lunch & Learns workshop cards — one consistent layout for every card */
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .pack-details { min-height: calc(2 * 1.5em + 40px); line-height: 1.5; padding: 6px 0 34px; } /* subtitle reserves 2 lines → price boxes line up */
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .top-banner { min-height: 104px; }
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .pr-feature { padding: 30px 0 30px 23px; }
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .pr-feature li { line-height: 1.5; padding-top: 7px; padding-bottom: 7px; } /* wrapped items no longer use the theme's 42px line height */
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .pr-feature li:before { top: 10px; }
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card { padding-bottom: 30px; } /* bottom inner space = top inner space */
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .trial-text { font-size: 15px; } /* one line on every card, so the buttons stay aligned */
@media (max-width: 1399px) { .pricing-table-area-four .pr-table-wrapper.tgd-lnl-card { padding-bottom: 25px; } }
.tgd-ribbon { top: -14px; right: 50%; transform: translateX(50%); white-space: nowrap; } /* centred over the card */
/* "Coming in 2027" card: its full two-line note fits in the same space as the one-line links on the other cards, so every button lines up */
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card .trial-text { height: 47.5px; } /* same note area on every card: 25px gap + one 22.5px line */
.pricing-table-area-four .pr-table-wrapper.tgd-lnl-card--soon .trial-text { font-size: 14px; line-height: 1.35; padding-top: 9.7px !important; } /* two lines (2 × 18.9px) + 9.7px gap = 47.5px */
/* Webinars "Get notified" box: equal space above and below its content (the heading's line-height adds space at the top, so the bottom padding is trimmed to match) */
.tgd-notify { padding-bottom: 40px; }
@media (max-width: 991px) { .tgd-notify { padding-bottom: 31px; } }
/* Navigation: services that are not open yet — shown greyed out, not clickable */
.theme-main-menu .navbar .dropdown-menu .dropdown-item.tgd-dd-disabled,
.theme-main-menu .navbar .dropdown-menu .dropdown-item.tgd-dd-disabled:hover { opacity: .4; cursor: default; pointer-events: none; background: transparent; }
/* Footer Subscribe button: fit the label + arrow instead of the theme's fixed width */
.theme-basic-footer .form-widget form button { width: auto; padding: 0 20px; }
.theme-basic-footer .form-widget form input { padding-right: 165px; }
/* Course pages: normal paragraph spacing in the Overview text (theme default is 45px) */
.portfolio-details-one .project-desctiption [data-cms="course.overview"] p { margin-bottom: 20px; }
/* Floating WhatsApp: opens a chat with +65 9296 3877. Sits above the back-to-top button. */
.tgd-whatsapp {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 990;
display: inline-flex;
align-items: center;
gap: 8px;
height: 56px;
padding: 0 18px 0 16px;
background: #25D366;
color: #fff;
border: 2px solid var(--tgd-ink);
border-radius: 999px;
box-shadow: 4px 4px 0 var(--tgd-ink);
font-size: 16px;
font-weight: 500;
line-height: 1;
text-decoration: none;
}
.tgd-whatsapp:hover,
.tgd-whatsapp:focus-visible {
color: #fff;
background: #1ebe5d;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--tgd-ink);
}
.tgd-whatsapp svg { display: block; flex: 0 0 auto; }
.scroll-top { bottom: 90px; right: 33px; }
@media (max-width: 575px) {
.tgd-whatsapp { width: 56px; height: 56px; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
.tgd-whatsapp span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.scroll-top { bottom: 82px; right: 26px; }
}
/* Course registration form: tighter spacing between its parts */
.tgd-enquiry-section--course .tgd-form .input-bg-group { padding: 40px 60px; }
.tgd-enquiry-section--course .tgd-form .tgd-fieldset { margin-bottom: 25px; }
@media (max-width: 767px) { .tgd-enquiry-section--course .tgd-form .input-bg-group { padding: 30px 26px; } }
/* Home hero: photo slider inside the theme's image frame */
.hero-banner-twelve .tgd-hero-slider { overflow: hidden; }
.hero-banner-twelve .tgd-hero-slide img { display: block; width: 100%; height: auto; aspect-ratio: 490 / 542; object-fit: cover; }
.hero-banner-twelve .tgd-hero-slider:not(.slick-initialized) .tgd-hero-slide:not(:first-child) { display: none; }
/* About, "From workshops to national curricula": sit the illustration against the text side, not centred in its column */
@media (min-width: 992px) { .illustration-holder .tgd-journey-img--end { margin-right: 0; } }
/* ...and centre the illustration + text as one group so the space on both sides is equal */
@media (min-width: 1200px) {
.tgd-journey-row { justify-content: center; }
.tgd-journey-row > .order-lg-first { flex: 0 0 auto; width: auto; margin: 0 !important; }
.tgd-journey-row > .order-lg-last { margin-left: 0 !important; }
}
/* About, "What we believe": icon at the top of each card, number kept on the right */
.tgd-help-card--icon .tgd-help-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.tgd-help-card--icon .tgd-help-card__icon { width: 72px; height: 72px; }
@media (max-width: 767px) { .tgd-help-card--icon .tgd-help-card__icon { width: 60px; height: 60px; } }
/* TVET Curriculum, "Scaffolding Learning Across the Quarters": icon at the top of each step, number kept on the right */
.tgd-steps--icons .tgd-steps__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tgd-steps--icons .tgd-steps__top span { margin-bottom: 0; }
.tgd-steps--icons .tgd-steps__icon { width: 64px; height: 64px; }
@media (max-width: 767px) { .tgd-steps--icons .tgd-steps__icon { width: 56px; height: 56px; } }
/* Steps on phones: one column, so no left indent on any step (the five/six-step padding was overriding the reset) */
@media (max-width: 767px) { .tgd-steps--five li + li, .tgd-steps--six li + li { padding-left: 0; } }
/* ...step number shown as a small muted label (like the About "What we believe" cards) instead of the yellow box, so it doesn't compete with the icon */
.tgd-steps--icons .tgd-steps__top { align-items: flex-start; }
.tgd-steps--icons .tgd-steps__top span { display: inline; width: auto; height: auto; background: none; border: 0; font-size: 14px; font-weight: 700; opacity: .4; }
/* Work With Us, three option cards: keep each button label on one line so the buttons match */
.address-block-four .btn-twentySix { white-space: nowrap; padding: 0 22px; }
@media (min-width: 1200px) and (max-width: 1399px) { .address-block-four .btn-twentySix { padding: 0 16px; font-size: 16px !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .address-block-four .btn-twentySix { padding: 0 12px; font-size: 15px !important; } }
@media (max-width: 400px) { .address-block-four .btn-twentySix { padding: 0 16px; font-size: 16px !important; } }
/* Work With Us card buttons: clear hover — fills black, white text, arrow nudges right */
.address-block-four .btn-twentySix { transition: color .25s ease; }
.address-block-four .btn-twentySix:hover, .address-block-four .btn-twentySix:focus-visible { color: #fff; }
.address-block-four .btn-twentySix:hover:after, .address-block-four .btn-twentySix:focus-visible:after { top: 0; left: 0; background: #000; }
.address-block-four .btn-twentySix i { display: inline-block; transition: transform .25s ease; }
.address-block-four .btn-twentySix:hover i, .address-block-four .btn-twentySix:focus-visible i { transform: translateX(4px); }
/* 3D-edge buttons (btn-twentyFour, used site-wide): clear hover — front fills black with white text, edges fill yellow, arrow nudges right */
body .btn-twentyFour { transition: background-color .25s ease, color .25s ease; }
body .btn-twentyFour:hover, body .btn-twentyFour:focus-visible { background: #000 !important; color: #fff !important; border-color: #000; }
body .btn-twentyFour:hover span, body .btn-twentyFour:focus-visible span { color: #fff; }
body .btn-twentyFour:hover:before, body .btn-twentyFour:hover:after,
body .btn-twentyFour:focus-visible:before, body .btn-twentyFour:focus-visible:after { background: #f3c755; border-color: #000; }
body .btn-twentyFour i, body .btn-twentyFour img { display: inline-block; transition: transform .25s ease, filter .25s ease; }
body .btn-twentyFour:hover i, body .btn-twentyFour:hover img,
body .btn-twentyFour:focus-visible i, body .btn-twentyFour:focus-visible img { transform: translateX(4px); }
body .btn-twentyFour:hover img, body .btn-twentyFour:focus-visible img { filter: invert(1); }
/* Webinars cards: the "Get notified" / "Suggest a topic" label turns yellow when the card is hovered or focused */
.card-style-nineteen .tag2 { transition: background-color .25s ease; }
.card-style-nineteen:hover .tag2, .card-style-nineteen:focus-visible .tag2 { background: var(--tgd-yellow); }
.card-style-nineteen .tag2 i { display: inline-block; transition: transform .25s ease; }
.card-style-nineteen:hover .tag2 i, .card-style-nineteen:focus-visible .tag2 i { transform: translateX(4px); }
/* Work With Us header: beige runs full width (no white frame); the theme's 30px/20px frame padding is added inside instead so the text stays put */
@media (min-width: 1400px) { .tgd-wwu-hero .address-wrapper { padding-top: 210px; } .tgd-wwu-hero { padding-bottom: 30px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .tgd-wwu-hero .address-wrapper { padding-top: 200px; } .tgd-wwu-hero { padding-bottom: 20px; } }
/* Beige panels (About, Community Programmes, Lunch & Learns, Workshops for Students): colour runs full width.
Only the side padding of the theme's p-30 frame is removed; top/bottom stay, so section gaps are unchanged. */
.p-30.tgd-full-bleed { padding-left: 0; padding-right: 0; }
/* Two-photo gallery (Community Programmes) */
.tgd-gallery--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 575px) { .tgd-gallery--two { grid-template-columns: 1fr; } }
/* In-page links (#register, #enquire, #notify, #services…): stop below the sticky header instead of under it */
html { scroll-padding-top: 110px; }
@media (max-width: 991px) { html { scroll-padding-top: 95px; } }
/* Black btn-one buttons (e.g. Webinars "Register your interest"): theme yellow on hover instead of Jano's orange (--prime-one) */
body .btn-one:hover, body .btn-one:focus-visible { background: var(--tgd-yellow); color: #000; }
body .btn-one i { display: inline-block; transition: transform .25s ease; }
body .btn-one:hover i, body .btn-one:focus-visible i { transform: translateX(4px); }
/* Disabled pages (e.g. Teacher Capacity Building): footer links and homepage service card shown greyed out, not clickable — same look as the disabled menu items */
.tgd-link-disabled { opacity: .4; cursor: default; pointer-events: none; }
.card-style-eighteen.tgd-card-disabled { cursor: default; pointer-events: none; border-color: rgba(0,0,0,.25); }
.card-style-eighteen.tgd-card-disabled > * { opacity: .4; }
/* Home hero frame: sized from its width/height attributes before it downloads, so the photo slider never starts tiny */
.hero-banner-twelve .image-holder .tgd-hero-frame { max-width: 100%; height: auto; }
/* Venue always on one line (run tables and course-page run rows) */
.tgd-runs td[data-cms="run.venue"] { white-space: nowrap; }
/* Course-page runs table at its original width: on 1200–1399px laptops, slightly narrower badge/button so all six columns fit without scrolling */
@media (min-width: 1200px) and (max-width: 1399px) {
.tgd-course-runs .tgd-runs--equal .tgd-seats, .tgd-course-runs .tgd-runs--equal .tgd-run-btn { width: 138px; padding: 0 8px; font-size: 13px; }
.tgd-course-runs .tgd-runs th, .tgd-course-runs .tgd-runs td { padding-right: 12px; }
}
/* Course-page runs tables (Date | Time | Venue | Seats): date and time on one line from 1400px up (narrower screens wrap so the table never scrolls) */
@media (min-width: 1400px) { .tgd-course-runs .tgd-runs td[data-cms="run.date"], .tgd-course-runs .tgd-runs td[data-cms="run.time"] { white-space: nowrap; } }
/* Checklist ticks always sit in a yellow box, so the tick is always black (was inheriting white text in black cards) */
.tgd-list--check li:before { color: #000; }
/* 3D-edge buttons on black backgrounds (e.g. homepage "See 1-to-1 coaching" strip): hover turns white, not black */
.tgd-crosslink--dark .btn-twentyFour:hover, .tgd-crosslink--dark .btn-twentyFour:focus-visible,
.tgd-programme-card--dark .btn-twentyFour:hover, .tgd-programme-card--dark .btn-twentyFour:focus-visible { background: #fff !important; color: #000 !important; border-color: #fff; }
.tgd-crosslink--dark .btn-twentyFour:hover span, .tgd-crosslink--dark .btn-twentyFour:focus-visible span,
.tgd-programme-card--dark .btn-twentyFour:hover span, .tgd-programme-card--dark .btn-twentyFour:focus-visible span { color: #000; }
.tgd-crosslink--dark .btn-twentyFour:hover:before, .tgd-crosslink--dark .btn-twentyFour:hover:after,
.tgd-programme-card--dark .btn-twentyFour:hover:before, .tgd-programme-card--dark .btn-twentyFour:hover:after { background: var(--tgd-yellow); border-color: #fff; }
/* Homepage black "1-to-1 coaching" strip: flat button, same look as the closing banner's "Book a discovery call" */
.tgd-crosslink--dark .btn-solid { display: inline-block; line-height: 54px; font-size: 17px; padding: 0 36px; color: #0C0C0C; background: var(--prime-six); white-space: nowrap; }
.tgd-crosslink--dark .btn-solid:hover, .tgd-crosslink--dark .btn-solid:focus-visible { background: #fff; color: #0C0C0C; }
.tgd-crosslink--dark .btn-solid i { display: inline-block; transition: transform .25s ease; }
.tgd-crosslink--dark .btn-solid:hover i, .tgd-crosslink--dark .btn-solid:focus-visible i { transform: translateX(4px); }
@media (max-width: 1199px) { .tgd-crosslink--dark .btn-solid { line-height: 50px; font-size: 15px; padding: 0 30px; } }
/* ==========================================================================
Lunch & Learn — four-part session outline
Shift Mindsets / Plant New Convictions / Spark New Perspectives / Inspire Action
Lives inside the "Module by module" accordion bodies on lunch-and-learns.html.
========================================================================== */
.tgd-outline__head {
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: #6B6B70;
margin: 0 0 14px;
font-weight: 600;
}
.tgd-outline__head + .tgd-outline { margin-bottom: 34px; }
.tgd-agenda--modules + .tgd-outline__head,
.table-responsive + .tgd-outline__head { margin-top: 34px; }
.tgd-outline__head:not(:first-child) { margin-top: 34px; }
.tgd-outline {
margin: 0 0 30px;
border-left: 3px solid var(--tgd-yellow, #FFCE4C);
padding-left: 0;
}
.tgd-outline__row {
display: grid;
grid-template-columns: 215px 1fr;
gap: 0 22px;
padding: 13px 0 13px 22px;
border-bottom: 1px solid #ECECEC;
}
.tgd-outline__row:last-child { border-bottom: 0; }
.tgd-outline dt {
font-weight: 600;
color: #0C0C0C;
font-size: 16px;
line-height: 1.5;
}
.tgd-outline dd {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: #4A4A50;
}
@media (max-width: 767px) {
.tgd-outline__row { grid-template-columns: 1fr; gap: 4px; padding-left: 18px; }
.tgd-outline dt { font-size: 15px; }
.tgd-outline dd { font-size: 15px; }
}
/* ==========================================================================
Form dropdowns
The four longest radio groups on work-with-us.html, and "Who are you
registering?" on the course pages, are now