/* ========================================================================== 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: 1599px) { .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; } /* ---------- 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-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 { top: 52%; left: -6%; height: auto; padding: 14px 10px; } /* sits lower so the hero photos stay visible */ @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) */ /* The .tgd-journey timeline list was replaced by the story component (§27). */ /* ========================================================================== 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; } } .title-style-eight .main-title.tgd-title-tight { line-height: 1.05; } /* a two-line heading set close, e.g. Workshops for Students "Skills that lead somewhere." */ /* 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 */ /* 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