+ showModal(), all 68 reviews,
longest-first, scrollable. */
.siimt-reviews-dialog {
width: min(640px, calc(100vw - 2.5rem));
max-height: min(720px, calc(100vh - 5rem));
margin: auto;
padding: 0;
border: 0;
border-radius: var(--wp--custom--radius--card);
box-shadow: 0 24px 60px -20px rgba(11, 45, 91, .45);
}
.siimt-reviews-dialog::backdrop {
background: rgba(11, 45, 91, .55);
}
.siimt-reviews-dialog__head {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
background: var(--wp--preset--color--surface);
border-bottom: 1px solid var(--wp--preset--color--line);
}
.siimt-reviews-dialog__head h2 {
margin: 0;
font-size: var(--wp--preset--font-size--medium);
}
.siimt-reviews-dialog__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 999px;
background: none;
color: var(--wp--preset--color--blue-deep);
cursor: pointer;
}
.siimt-reviews-dialog__close svg { width: 16px; height: 16px; }
.siimt-reviews-dialog__close:hover,
.siimt-reviews-dialog__close:focus-visible {
background: var(--wp--preset--color--teal);
border-color: var(--wp--preset--color--teal);
color: var(--wp--preset--color--navy);
}
.siimt-reviews-dialog__list {
list-style: none;
margin: 0;
padding: 1.25rem;
display: grid;
gap: 1rem;
overflow-y: auto;
max-height: calc(min(720px, calc(100vh - 5rem)) - 68px);
}
.siimt-reviews-dialog__list .siimt-reviews__card { min-height: 0; }
@media (max-width: 782px) {
.siimt-reviews-dialog { width: calc(100vw - 1.5rem); max-height: calc(100vh - 3rem); }
}
@media (prefers-reduced-motion: reduce) {
/* Autoplay itself is gated in JS (never starts). This covers the
remaining motion: user-driven slide changes still work (arrows,
dots, swipe are never disabled), they just don't fly across the
viewport, matching how the hero/journey/career-pathways sections
already fall back to instant or fade-only transitions. */
.siimt-reviews__track { transition-duration: 0.01ms; }
}
/* ==========================================================================
Homepage UI/UX refinement (v0.9.0)
Spacing rhythm, section separation, card polish, header on mobile.
Scoped to the homepage where a rule should not leak to inner pages.
========================================================================== */
/* --- Header: single-row nav on tablet/mobile ------------------------------
The logo + hamburger + (search + Apply) group could not fit one flex line
and wrapped Apply onto a third row. Keep one row: logo left, then search,
Apply and the menu toggle, all compact. */
@media (max-width: 860px) {
.siimt-nav > .wp-block-group {
flex-wrap: nowrap;
gap: 0.5rem;
}
.siimt-nav .siimt-brand { margin-right: auto; }
.siimt-nav .siimt-brand .wp-block-site-logo img { width: 150px; } /* was 132px; new logo lockup, 2026-10-25 */
.siimt-nav .siimt-actions { order: 2; gap: 0.5rem; }
.siimt-nav .siimt-primary { order: 3; }
.siimt-search__toggle { width: 38px; height: 38px; }
.siimt-nav .wp-block-button__link {
padding-block: 0.6rem;
padding-inline: 0.9rem;
font-size: 0.82rem;
}
.siimt-header .siimt-nav { padding-block: 0.6rem; }
}
/* Tablets and small laptops (600–999px), 2026-10-25: the menu button instead of
the full menu. WordPress only switches below 600px, and the five links need
1000px to fit beside the logo, search and Apply, so between 600 and 999 they
wrapped onto a second line and squeezed "Apply Now" onto two lines. The first
two rules out-rank core's own min-width:600px rules; the open menu is core's
full-screen overlay, the same one phones use. The order rules put the menu
button after Apply, as on phones (the 860px block above already does this
below 861px). */
@media (min-width: 600px) and (max-width: 999px) {
.siimt-primary .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.siimt-primary .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
.siimt-nav > .wp-block-group { flex-wrap: nowrap; }
.siimt-nav .siimt-brand { margin-right: auto; }
.siimt-nav .siimt-actions { order: 2; }
.siimt-nav .siimt-primary { order: 3; }
}
@media (max-width: 400px) {
.siimt-nav > .wp-block-group { gap: 0.4rem; }
.siimt-nav .siimt-brand .wp-block-site-logo img { width: 128px; } /* was 116px; new logo lockup, 2026-10-25 (134 pushed "Apply Now" onto two lines at 360) */
.siimt-nav .wp-block-button__link { white-space: nowrap; }
.siimt-nav .siimt-actions { gap: 0.4rem; }
.siimt-search__toggle { width: 36px; height: 36px; }
.siimt-nav .wp-block-button__link { padding-inline: 0.75rem; font-size: 0.8rem; }
}
/* Only the very narrowest phones drop the header search icon (still in the
search panel + it is a secondary action). */
@media (max-width: 340px) {
.siimt-search__toggle { display: none; }
}
/* --- Consistent section rhythm ------------------------------------------
Patterns now carry a matched clamp; this only removes the residual
blockGap the editor adds between a section's own heading group and its
grid, so every section flows heading -> content at one step. */
.home main > section > .wp-block-heading,
.home main > section > .is-style-siimt-eyebrow { margin-block: 0; }
/* Small teal dash before the accreditation eyebrow — scoped to this one
heading rather than added to .is-style-siimt-eyebrow globally. */
.siimt-eyebrow--dash { display: inline-flex; align-items: center; gap: 0.5rem; }
.siimt-eyebrow--dash::before {
content: "";
display: inline-block;
width: 20px;
height: 2px;
background: var(--wp--preset--color--teal);
flex: 0 0 auto;
}
/* --- Trust band: uniform accreditation chips --------------------------- */
.siimt-accred-row {
flex-wrap: wrap;
gap: 0.6rem;
align-content: center;
align-items: stretch;
}
.siimt-accred-row > .is-style-siimt-card {
/* grow:0 — an odd item count (5 partners, not 6) must not stretch the
last tile to fill its row; it should just sit at its normal width. */
flex: 0 1 calc(33.333% - 0.4rem);
min-width: 8.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 46px;
padding: 0.5rem 0.6rem;
background: var(--wp--preset--color--neutral);
border-color: transparent;
box-shadow: none;
}
.siimt-accred-row > .is-style-siimt-card:hover { transform: none; box-shadow: none; }
.siimt-accred-row > .is-style-siimt-card p { font-weight: 600; color: var(--wp--preset--color--navy); }
/* --- Programme discovery: category links + card polish ----------------- */
.siimt-cat-links { align-items: center; }
.siimt-cat-links p { margin: 0; }
.siimt-cat-links a {
display: inline-block;
padding: 0.4rem 0.85rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--navy);
font-weight: 600;
text-decoration: none;
transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}
.siimt-cat-links a:hover,
.siimt-cat-links a:focus-visible {
border-color: var(--wp--preset--color--navy);
background: var(--wp--preset--color--neutral);
}
.siimt-grid .is-style-siimt-card { height: 100%; }
/* pin the "Explore field" link to the card foot so every card's CTA lines up */
.siimt-grid .is-style-siimt-card > p:last-child { margin-top: auto; padding-top: 0.15rem; }
.siimt-grid .is-style-siimt-card > p:last-child a {
display: inline-block;
padding-block: 0.4rem; /* lift the tap target to ~34px */
margin-block: -0.15rem;
font-weight: 600;
color: var(--wp--preset--color--teal-deep);
text-decoration: none;
}
.siimt-grid .is-style-siimt-card > p:last-child a:hover,
.siimt-grid .is-style-siimt-card > p:last-child a:focus-visible { text-decoration: underline; }
.siimt-grid .is-style-siimt-card h3 { line-height: 1.25; }
/* --- Proof strip: stronger numbers ------------------------------------- */
/* Same minimum height for every headline (number / year / acronym list) so
titles and descriptions line up across the four columns. */
.siimt-statrow .siimt-stat-num { display: flex; align-items: center; min-height: 2.6rem; font-size: clamp(1.9rem, 2.7vw, 2.45rem); }
/* One stat holds a phrase ("GTEC · UCC · CTVET · CSA") instead of a number — the number-sized clamp above reads oversized
* and wraps badly for those, so give them their own smaller scale. */
.siimt-statrow .siimt-stat-num.siimt-stat-num--text { font-size: clamp(0.95rem, 1.25vw, 1.05rem); line-height: 1.15; }
/* --- News grid: media slot with fallback so image-less posts still read
as finished cards, not stubs. --------------------------------------- */
.siimt-news-card { overflow: hidden; }
/* WordPress flex-column layout aligns children to flex-start, so an
image-less media slot collapses to 0 width. Force both rows full-width. */
.siimt-news-card > * { align-self: stretch; width: 100%; }
.siimt-news-media {
position: relative;
aspect-ratio: 16 / 9;
background: linear-gradient(150deg, #14497F, #071F3F);
}
.siimt-news-media::after {
content: "SIIMT";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.9rem;
letter-spacing: 0.22em;
color: rgba(160, 200, 235, 0.55);
}
.siimt-news-media .wp-block-post-featured-image {
position: relative;
z-index: 1;
margin: 0;
height: 100%;
}
.siimt-news-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The "SIIMT" fallback mark above is for cards with no photo. It was painted on top of real photos
too (the photo link was not positioned, so the mark drew over it). Put the photo link above the
mark; an empty link (no photo) is transparent, so the mark still shows there. */
.siimt-news-media::after { z-index: 0; }
.siimt-news-media > a { position: relative; z-index: 1; display: block; height: 100%; }
.siimt-news-card { height: 100%; } /* grid items stretch to the row's tallest card by default, but this makes it explicit rather than relying on that alone */
.siimt-news-card .siimt-news-body { flex: 1 1 auto; }
.siimt-news-card .wp-block-post-title { margin: 0; line-height: 1.3; }
.siimt-news-card .wp-block-post-date { color: var(--wp--preset--color--muted); margin-top: auto; }
/* Clamp title/excerpt to a fixed line count (ellipsis on overflow) instead
of letting variable text length make cards different heights — client
feedback 2026-09-21. Shared across every card-rendering code path
(patterns/community.php's core post-title/post-excerpt blocks via their
className attribute; patterns/siimt-news-archive.php and
patterns/siimt-news-single.php's hand-written // ; and
assets/js/news-loader.js's infinite-scroll cards) via this one class
pair, rather than four separate near-duplicate rules.
Doubled up as .siimt-news-card — core's own block CSS sets
.wp-block-post-title { display: flow-root }, equal specificity to a
bare .siimt-news-title, and silently wins on source order, which
breaks -webkit-line-clamp entirely (it's a no-op on anything but
display:-webkit-box). The extra ancestor is what actually wins.
The core post-excerpt block additionally wraps its actual text in its
OWN inner — .siimt-news-excerpt
(from the block's className) lands on the outer wrapper, one level
above the text, so it needs its own selector reaching that inner
;
the other three rendering paths put .siimt-news-excerpt directly on the
text-holding element, no nesting involved. */
.siimt-news-card .siimt-news-title,
.siimt-news-card .siimt-news-excerpt,
.siimt-news-card .siimt-news-excerpt .wp-block-post-excerpt__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 2;
-webkit-line-clamp: 2;
}
/* Core's post-title block link renders display:inline-block (presumably
for its own hit-area/hover styling) — an inline-block child is an
atomic box to a -webkit-line-clamp container, so its text can't be
wrapped/clipped across the parent's line boxes at all. Put it back to
a genuine inline so the clamp above can actually see the text. */
.siimt-news-card .siimt-news-title a { display: inline; }
/* Tap target (WCAG 2.5.8, 24 px): an inline link is only as tall as its font, about 21 px at
this size. Vertical padding on an inline box grows the hit area without changing the line
layout, so the 2-line clamp above is unaffected. */
.siimt-news-card .siimt-news-title a { padding-block: 2px; }
/* --- Hero: make the secondary (ghost) CTA read as a button ------------ */
.siimt-hero .wp-block-button.is-style-siimt-ghost > .wp-block-button__link {
background-color: rgba(255, 255, 255, 0.10);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.siimt-hero .wp-block-button.is-style-siimt-ghost > .wp-block-button__link:hover,
.siimt-hero .wp-block-button.is-style-siimt-ghost > .wp-block-button__link:focus-visible {
background-color: rgba(255, 255, 255, 0.18);
box-shadow: inset 0 0 0 1.5px #fff;
}
/* --- Section header rows (heading left, button right) keep the button
aligned to the baseline of the copy block on wide screens. --------- */
@media (max-width: 640px) {
.home main > section .wp-block-buttons { width: 100%; }
.home main > section .wp-block-buttons .wp-block-button { width: 100%; }
.home main > section .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
}
/* --- Body lists in the spotlight / CTA copy: tighten the marker indent so
bullets sit under the paragraph text, not floating out to the left. --- */
.home main > section .wp-block-list:not(.is-style-siimt-checklist) {
padding-inline-start: 1.15rem;
margin-block: 0.75rem;
}
.home main > section .wp-block-list:not(.is-style-siimt-checklist) li { margin-block: 0.3rem; }
/* --- Why-SIIMT / value cards: settle the icon-to-heading rhythm -------- */
.home main > section .siimt-iconwell + * { margin-top: 0.35rem; }
/* --- Footer: tighter column stack on small screens ------------------- */
@media (max-width: 781px) {
.siimt-footer .wp-block-columns { gap: 1.5rem; }
.siimt-footer .wp-block-column { flex-basis: 100% !important; }
.siimt-footer .wp-block-navigation { --wp--style--block-gap: 0.35rem; }
}
/* --- News cards: category eyebrow + title spacing ------------------- */
.siimt-news-card .wp-block-post-terms { margin-bottom: 0.15rem; }
.siimt-news-card .wp-block-post-terms a { text-decoration: none; }
.siimt-news-card__meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.35rem;
font-size: 0.78rem;
color: var(--wp--preset--color--muted);
}
.siimt-news-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.siimt-news-card__meta svg { width: 13px; height: 13px; }
/* --- News archive: featured-hero story (patterns/siimt-news-archive.php),
inspired by tagDiv Newspaper's homepage lead story — full-bleed image,
dark gradient overlay, category badge + headline + excerpt at the
bottom. Client feedback 2026-09-21. --------------------------------- */
.siimt-news-hero {
display: block;
position: relative;
border-radius: 16px;
overflow: hidden;
margin-bottom: 2rem;
text-decoration: none;
color: var(--wp--preset--color--surface);
aspect-ratio: 16 / 8;
}
.siimt-news-hero__media { position: absolute; inset: 0; }
.siimt-news-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.siimt-news-hero:hover .siimt-news-hero__media img,
.siimt-news-hero:focus-visible .siimt-news-hero__media img { transform: scale(1.04); }
.siimt-news-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(6,20,40,.94) 0%, rgba(6,20,40,.76) 50%, rgba(6,20,40,.36) 80%, rgba(6,20,40,.08) 100%);
}
/* The headline took the theme's navy heading colour, so on the dark photo it was unreadable.
Two classes so it beats the theme.json heading colour. */
.siimt-news-hero .siimt-news-hero__title { color: var(--wp--preset--color--surface); text-shadow: 0 1px 14px rgba(6, 20, 40, .45); }
.siimt-news-hero__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.6rem;
height: 100%;
justify-content: flex-end;
padding: clamp(1.25rem, 4vw, 2.5rem);
max-width: 46rem;
}
.siimt-news-hero__badge {
align-self: flex-start;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: var(--wp--preset--color--teal);
color: var(--wp--preset--color--navy);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.siimt-news-hero__title {
margin: 0;
font-size: clamp(1.4rem, 3.2vw, 2.1rem);
line-height: 1.2;
font-family: var(--wp--preset--font-family--display);
}
.siimt-news-hero__excerpt {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255, 255, 255, .82);
max-width: 40rem;
}
.siimt-news-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 0.3rem;
font-size: 0.82rem;
color: rgba(255, 255, 255, .75);
}
.siimt-news-hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.siimt-news-hero__meta svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
.siimt-news-hero { aspect-ratio: 4 / 5; }
.siimt-news-hero__body { max-width: none; }
}
/* --- News archive: two-column "real feel" layout (patterns/siimt-news-archive.php)
— main column (hero + infinite-scroll grid) + sidebar (latest-headlines
list + an application CTA in place of Newspaper's newsletter box, which
needs a mailing-list backend this site doesn't have). Client feedback
2026-09-21, inspired by tagDiv Newspaper's homepage. ------------------- */
.siimt-news-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 21rem;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.siimt-news-main .siimt-news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1.5rem;
}
@media (max-width: 900px) {
.siimt-news-layout { grid-template-columns: 1fr; }
.siimt-news-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
}
.siimt-news-aside { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.siimt-news-widget {
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--line);
border-radius: 14px;
padding: 1.25rem;
}
.siimt-news-widget__title {
margin: 0 0 0.9rem;
font-family: var(--wp--preset--font-family--display);
font-size: 1.05rem;
}
.siimt-news-trending { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.siimt-news-trending li:not(:last-child) { padding-bottom: 0.9rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-news-trending a { display: flex; align-items: flex-start; gap: 0.7rem; text-decoration: none; color: inherit; }
.siimt-news-trending__num {
flex-shrink: 0;
font-family: var(--wp--preset--font-family--display);
font-size: 1.35rem;
font-weight: 800;
color: #7A8BA0; /* was the hairline colour: 1.3:1 on white */
line-height: 1.2;
}
.siimt-news-trending__body { display: flex; flex-direction: column; gap: 0.25rem; }
.siimt-news-trending__title { font-size: 0.9rem; font-weight: 600; line-height: 1.35; transition: color var(--wp--custom--transition); }
.siimt-news-trending a:hover .siimt-news-trending__title,
.siimt-news-trending a:focus-visible .siimt-news-trending__title { color: var(--wp--preset--color--teal-deep); }
.siimt-news-trending__date { font-size: 0.76rem; color: var(--wp--preset--color--muted); }
.siimt-news-cta { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--surface); }
.siimt-news-cta h3 { margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; color: var(--wp--preset--color--surface); } /* navy heading colour was invisible on the navy box */
.siimt-news-cta p { margin: 0 0 1rem; font-size: 0.88rem; color: rgba(255, 255, 255, .8); }
.siimt-news-cta .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background-color: var(--wp--preset--color--teal);
color: var(--wp--preset--color--navy);
font-weight: 600;
font-size: 0.85rem;
}
/* --- Infinite-scroll loader (assets/js/news-loader.js) ---------------- */
.siimt-news-loader {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-top: 2rem;
padding: 1rem;
font-size: 0.88rem;
color: var(--wp--preset--color--muted);
opacity: 0;
transition: opacity .25s ease;
}
.siimt-news-loader.is-loading { opacity: 1; }
.siimt-news-loader__spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--wp--preset--color--line);
border-top-color: var(--wp--preset--color--teal-deep);
animation: siimt-news-spin .7s linear infinite;
}
@keyframes siimt-news-spin { to { transform: rotate(360deg); } }
.siimt-news-loader__end {
margin-top: 2rem;
text-align: center;
font-size: 0.85rem;
color: var(--wp--preset--color--muted);
}
@media (prefers-reduced-motion: reduce) {
.siimt-news-loader__spinner { animation: none; }
}
/* --- Single news article (patterns/siimt-news-single.php) ----------- */
.siimt-article-crumb { margin: 0 0 0.9rem; font-size: 0.85rem; }
.siimt-article-crumb a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--wp--preset--color--muted);
text-decoration: none;
transition: color var(--wp--custom--transition);
}
.siimt-article-crumb a:hover,
.siimt-article-crumb a:focus-visible { color: var(--wp--preset--color--teal-deep); }
.siimt-article-crumb__icon { width: 13px; height: 13px; transform: rotate(180deg); }
.siimt-article-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-top: 0.9rem;
}
.siimt-article-meta__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--wp--preset--color--muted);
}
.siimt-article-meta__item svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Content typography: a bit more breathing room and a teal rule under H2s,
matching the eyebrow/heading rhythm used across the rest of the site,
so the article body doesn't read as a bare, undifferentiated text wall. */
.siimt-article-body .wp-block-post-content > * + * { margin-top: 1.15rem; }
.siimt-article-body .wp-block-post-content p { line-height: 1.75; font-size: 1.05rem; }
.siimt-article-body .wp-block-post-content h2 {
margin-top: 2.25rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--wp--preset--color--teal);
font-size: 1.4rem;
}
.siimt-article-body .wp-block-post-content h3 { margin-top: 1.75rem; font-size: 1.15rem; }
.siimt-article-body .wp-block-post-content figure.wp-block-image {
margin: 0;
border-radius: 12px;
overflow: hidden;
}
.siimt-article-body .wp-block-post-content figure.wp-block-image img { display: block; width: 100%; }
.siimt-article-body .wp-block-post-content figcaption {
padding: 0.5rem 0.1rem 0;
font-size: 0.82rem;
color: var(--wp--preset--color--muted);
text-align: center;
}
.siimt-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.siimt-share__label { font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.siimt-share__btn { text-decoration: none; }
/* ==========================================================================
Homepage rebuild v1.0 — HOME_PAGE_LAYOUT blueprint (2026-09-12)
New section set: student pathways, programme finder, SIIMT journey,
career pathways + accreditation, student life, student stories + news.
Brand colours/typography kept (navy/teal/blue + Sora/Plex Sans/Plex Mono);
only structure and layout follow the blueprint.
========================================================================== */
/* --- Icon wells: colour + shape variants ---------------------------------
Icons swapped 2026-09-18 to Phosphor Icons (see inc/icons.php header) —
refined the wells alongside that swap: bigger icon-to-well ratio (the
hand-drawn set's 20px icon in a 44px well read small/lost; Phosphor's
filled "bold" glyphs read cleanly bigger) and a soft lift shadow on
every well so flat colour circles/squares don't sit totally flat
against the page — this is the bulk of the "premium/executive" polish
pass, not the icon linework alone. */
.siimt-iconwell {
box-shadow: 0 3px 8px -3px rgba(11, 45, 91, .14);
}
.siimt-iconwell--blue { background: var(--wp--preset--color--neutral); color: var(--wp--preset--color--blue-deep); }
.siimt-iconwell--teal { background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal-deep); }
.siimt-iconwell--mint { background: #E3F7F0; color: #0F7A5C; }
.siimt-iconwell--sky { background: #E6F2FB; color: #0369A1; }
.siimt-iconwell--gold { background: #FEF6E7; color: #B45309; }
/* Saturated/gradient wells get an inset highlight near the top edge too —
a soft "glossy sphere" cue that reads as depth rather than a flat
sticker, layered alongside each variant's own outer shadow below. */
.siimt-iconwell--round {
border-radius: 999px;
background: var(--wp--preset--color--blue);
color: var(--wp--preset--color--surface);
box-shadow: 0 6px 14px -6px rgba(2, 132, 199, .45), inset 0 1.5px 1px rgba(255, 255, 255, .4);
}
.siimt-iconwell--sm { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.siimt-iconwell svg { width: 23px; height: 23px; }
/* Must come after the rule above — same specificity, needs source order
to win the override back down for the smaller 34px well. */
.siimt-iconwell--sm svg { width: 18px; height: 18px; }
/* --- Explore link (used outside .siimt-grid too) ------------------------ */
.siimt-explore-link { margin-top: auto; padding-top: 0.15rem; }
.siimt-explore-link a {
font-weight: 600;
color: var(--wp--preset--color--teal-deep);
text-decoration: none;
display: inline-block;
padding-block: 0.3rem;
}
.siimt-explore-link a,
.siimt-cat-links a,
.wp-block-button.is-style-siimt-ghost > .wp-block-button__link,
.wp-block-button.is-style-siimt-outline > .wp-block-button__link { transition: color var(--wp--custom--transition), transform var(--wp--custom--transition), background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition); }
/* Micro-interaction: links that end in "→" nudge a couple of pixels right on
hover/focus — small, purposeful, and free (no markup change needed since
the nudge moves the whole link, arrow included). */
.siimt-explore-link a:hover,
.siimt-explore-link a:focus-visible { text-decoration: underline; transform: translateX(2px); }
/* --- Button variant: outline (navy ring on light backgrounds) ---------- */
.wp-block-button.is-style-siimt-outline > .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--navy);
box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--navy);
}
.wp-block-button.is-style-siimt-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-siimt-outline > .wp-block-button__link:focus-visible {
background-color: var(--wp--preset--color--navy);
color: var(--wp--preset--color--surface);
}
/* "More news" — same secondary-CTA treatment, centred under the 4-card
homepage preview, separate from the section header's own "View all
news" button (client feedback 2026-09-21: show fewer cards, add a
dedicated "more" CTA below them, same shape as the finder's). The
sitewide max-width:640px button-full-width rule (further down this
file) already makes this stack full-width on mobile automatically. */
.siimt-news-more > .wp-block-button__link {
padding: 0.55rem 1.25rem;
font-size: 0.85rem;
}
/* --- Hero: full-bleed photo slideshow, text over the left ---------------
Layers, back to front:
1. .siimt-hero-slides — 5 stacked
top margin below, this stacked with the stat
* row's intentional 24px padding-top to read as "too much space above
* Our Impact in Numbers". Found 2026-09-17. */
.siimt-hero > .siimt-hero__stats { margin-top: 0; }
/* Rail alignment (found 2026-09-19 measuring real widths: the row started
* 27px inside the headline at every width >= 1366, and before that 59/144/
* 336px inside — a stale double inset). Cause: WP's constrained layout gives
* this grid item margin-inline:auto, which makes it shrink-to-fit its
* content (1146px at 1536, NOT the 1200px max-width) and centre on THAT, so
* its left edge never matched the headline's. The headline fixes its own
* left edge explicitly (.siimt-hero__content above); do the same here. The
* width term keeps it inside the hero when the viewport is barely wider than
* the rail. Mobile (<=900px) is handled in the media query below. */
.siimt-hero > .siimt-hero__stats {
width: min(1200px, calc(100% - 1.5rem));
margin-left: max(1.5rem, calc((100% - 1200px) / 2)) !important;
margin-right: auto !important;
}
@media (max-width: 900px) {
.siimt-hero > .siimt-hero__stats { width: 100%; margin-left: 0 !important; }
}
.siimt-hero__stats-label { margin-top: 0; margin-bottom: 0.85rem; }
/* Closing line under the stat row: a small teal caption plus a short,
* wide-spaced tagline — echoes the site's "eyebrow + heading" pairing at
* a much smaller scale, since this is a footnote to the numbers above it,
* not its own heading. Centred rather than left-aligned (like the stats
* themselves) because it reads as a closing statement for the whole row. */
.siimt-hero__stats-foot {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
padding-top: clamp(1.1rem, 2vw, 1.4rem);
border-top: 1px solid rgba(255, 255, 255, .14);
text-align: center;
}
.siimt-hero__stats-foot-eyebrow {
margin: 0 0 0.35rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--teal);
}
.siimt-hero__stats-foot-tag {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: clamp(0.95rem, 1.8vw, 1.15rem);
letter-spacing: 0.02em;
color: var(--wp--preset--color--surface);
}
.siimt-hero-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
font-size: 0.82rem;
color: #BBD5EA;
}
.siimt-hero-chip svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* --- Slide indicators ---------------------------------------------------- */
.siimt-hero__dots {
position: relative;
z-index: 4;
display: flex;
gap: 0.5rem;
margin-top: clamp(1.5rem, 4vw, 2.5rem);
padding: 0;
list-style: none;
}
.siimt-hero__dot {
width: 22px;
height: 4px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.32);
cursor: pointer;
transition: background-color var(--wp--custom--transition);
}
.siimt-hero__dot:hover { background: rgba(255, 255, 255, 0.55); }
.siimt-hero__dot[aria-current="true"] { background: var(--wp--preset--color--teal); }
@media (prefers-reduced-motion: reduce) {
.siimt-hero-slide { transition: none !important; transform: none !important; }
}
@media (max-width: 900px) {
/* Was clamp(520px, 86vh, 720px) — on a typical phone that's a near
full-screen hero, and with content bottom-anchored (flex-end) it left
a large empty band of pure photo between the header and the first
line of text. Shorter box, same bottom-anchored copy. */
.siimt-hero { min-height: clamp(440px, 66vh, 580px); }
/* The desktop rail-matching margin-left above doesn't apply here — at
this width content is full-bleed (max-width:none) and the section's
own padding already gives a symmetric gutter, so reset to 0 rather
than inheriting a left-only inset that would push content off-centre
the other way. align-self:flex-end (was align-items:flex-end on the
old flex-based .siimt-hero, dead now that this is a grid with the
stat row as its own row) keeps the copy anchored low, near the stat
row, rather than centred in the now-shorter space above it. */
.siimt-hero__content { align-self: flex-end; max-width: none; margin-left: 0 !important; margin-right: 0 !important; padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
/* Each photo gets its own mobile crop (--pos-m) rather than reusing the
desktop position — a tall narrow crop needs the subject's face kept
in frame differently than a wide one does. */
.siimt-hero-slide { object-position: var(--pos-m, var(--pos, 50% 30%)); }
/* Less width to work with, so the strong zone has to cover more of the
frame, and a bottom-up wash helps too since the crop is much taller. */
.siimt-hero::before {
background-image:
linear-gradient(100deg, rgba(7, 31, 63, 0.95) 0%, rgba(7, 31, 63, 0.9) 55%, rgba(11, 45, 91, 0.45) 82%, rgba(11, 45, 91, 0.1) 96%),
linear-gradient(0deg, rgba(4, 22, 45, 0.75) 0%, rgba(4, 22, 45, 0.15) 46%, rgba(4, 22, 45, 0) 70%);
}
}
/* --- Student pathways: horizontal icon + text cards --------------------- */
.siimt-pathway-card { align-items: flex-start; gap: 0.9rem; }
.siimt-pathway-card .siimt-iconwell { flex: 0 0 auto; }
/* --- Programme finder (patterns/programme-grid.php, homepage + /programmes)
Rebuilt 2026-09-24 from the approved mockup: filter sidebar beside a
seamless catalogue grid, both frosted glass over the homepage journey's
light-blue plate (same gradient, glows and terrain/lines art as .siimt-jny),
6 programmes per page. Behaviour: assets/js/programme-finder.js. */
.siimt-pf {
--pf-hair: rgba(11, 99, 194, .12);
--pf-glass: rgba(255, 255, 255, .58);
--pf-edge: rgba(255, 255, 255, .85);
--pf-ease: cubic-bezier(.22, .61, .36, 1);
position: relative;
isolation: isolate;
overflow: hidden;
background-color: #F1F8FE;
background-image:
radial-gradient(55% 50% at 12% 78%, rgba(170, 214, 247, .45), transparent 72%),
radial-gradient(45% 45% at 88% 18%, rgba(170, 214, 247, .38), transparent 72%),
radial-gradient(30% 30% at 60% 60%, rgba(20, 195, 166, .08), transparent 70%),
linear-gradient(180deg, #F9FCFF 0%, #EFF7FE 58%, #E7F1FB 100%);
}
.siimt-pf::before,
.siimt-pf::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.siimt-pf::before { left: 0; right: 0; bottom: 0; height: 220px; background: url(assets/img/journey/terrain.svg) repeat-x 0 100% / auto 220px; opacity: .85; }
.siimt-pf::after { inset: -3%; background: url(assets/img/journey/lines.svg) center / cover no-repeat; opacity: .7; }
.siimt-pf__wrap { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.siimt-pf__eyebrow { margin: 0 0 .5rem; font-family: var(--wp--preset--font-family--mono); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--blue-deep); }
/* Frosted glass panels: translucent white over the plate, a bright top edge
and a soft navy-tinted shadow rather than a hard white card. Browsers
without backdrop-filter just get the translucent white, which still reads. */
.siimt-pf__filters,
.siimt-pf__frame {
background: var(--pf-glass);
border: 1px solid var(--pf-edge);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 48px -30px rgba(11, 45, 91, .35);
}
/* Sidebar */
.siimt-pf__filters { position: sticky; top: 7rem; border-radius: 20px; padding: 1.4rem 1.3rem 1.3rem; }
.siimt-pf__search { position: relative; margin-top: .35rem; }
.siimt-pf__search svg { position: absolute; left: .85rem; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--wp--preset--color--muted); pointer-events: none; }
.siimt-pf__search input { width: 100%; height: 2.85rem; padding: 0 .9rem 0 2.5rem; border: 1px solid var(--pf-hair); border-radius: 12px; background: rgba(255, 255, 255, .7); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--body); font-size: .92rem; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.siimt-pf__search input::placeholder { color: #8BA0B8; }
.siimt-pf__search input:focus { outline: none; border-color: var(--wp--preset--color--blue); background: var(--wp--preset--color--surface); box-shadow: 0 0 0 3px rgba(2, 132, 199, .15); }
.siimt-pf__toggle { display: none; }
.siimt-pf__group { margin: 1.35rem 0 0; padding: 1.2rem 0 0; min-width: 0; border: 0; border-top: 1px solid var(--pf-hair); }
.siimt-pf__group legend { float: left; width: 100%; margin: 0 0 .65rem; padding: 0; font-family: var(--wp--preset--font-family--mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--navy); }
.siimt-pf__opt { clear: both; position: relative; display: flex; align-items: center; gap: .65rem; margin: 0 -.45rem; padding: .38rem .45rem; border-radius: 8px; cursor: pointer; font-size: .9rem; color: var(--wp--preset--color--body); transition: background-color .2s; }
.siimt-pf__opt:hover { background: rgba(255, 255, 255, .7); }
.siimt-pf__opt input { position: absolute; opacity: 0; pointer-events: none; }
.siimt-pf__mark { flex: 0 0 18px; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #B9CADB; background: var(--wp--preset--color--surface); transition: border-color .2s, background-color .2s; }
.siimt-pf__mark--radio { border-radius: 50%; }
.siimt-pf__mark--check { border-radius: 5px; }
.siimt-pf__mark::after { content: ""; transform: scale(0); transition: transform .2s var(--pf-ease); }
.siimt-pf__mark--radio::after { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--surface); }
.siimt-pf__mark--check::after { width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); }
.siimt-pf__opt input:checked + .siimt-pf__mark { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--navy); }
.siimt-pf__opt input:checked + .siimt-pf__mark--radio::after { transform: scale(1); }
.siimt-pf__opt input:checked + .siimt-pf__mark--check::after { transform: rotate(-45deg) scale(1); }
.siimt-pf__opt input:focus-visible + .siimt-pf__mark { box-shadow: 0 0 0 3px rgba(2, 132, 199, .3); }
.siimt-pf__opt input:checked ~ .siimt-pf__label { color: var(--wp--preset--color--ink); font-weight: 600; }
.siimt-pf__label { flex: 1; }
/* Programme-type options carry a one-line summary under the name; the mark
and count stay aligned to the name, not the middle of the two lines. */
.siimt-pf__opt:has(.siimt-pf__hint) { align-items: flex-start; }
.siimt-pf__opt:has(.siimt-pf__hint) .siimt-pf__mark { margin-top: .12rem; }
.siimt-pf__opt:has(.siimt-pf__hint) .siimt-pf__count { padding-top: .18rem; }
.siimt-pf__text { display: block; }
.siimt-pf__hint { display: block; margin-top: .1rem; font-size: .74rem; font-weight: 400; line-height: 1.35; color: var(--siimt-pp-muted); } /* 5.2:1 on mist (theme muted was 4.3:1) */
.siimt-pf__count { min-width: 1.4rem; font-family: var(--wp--preset--font-family--mono); font-size: .72rem; text-align: right; color: var(--wp--preset--color--muted); }
.siimt-pf__opt.is-empty { opacity: .45; }
.siimt-pf__clear { width: 100%; height: 2.6rem; margin-top: 1.3rem; border: 1px solid var(--pf-hair); border-radius: 12px; background: rgba(255, 255, 255, .6); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--body); font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.siimt-pf__clear:hover:not(:disabled) { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--navy); color: #fff; }
.siimt-pf__clear:disabled { color: #A5B6C8; cursor: default; }
/* Results head + active-filter chips */
.siimt-pf__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.1rem; }
.siimt-pf__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--wp--preset--color--ink); }
.siimt-pf__total { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); }
.siimt-pf__total b { font-weight: 600; color: var(--wp--preset--color--ink); }
.siimt-pf__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.25rem 0 1rem; }
.siimt-pf__chips:empty { display: none; }
.siimt-pf__chip { display: inline-flex; align-items: center; gap: .35rem; height: 1.9rem; padding: 0 .55rem 0 .8rem; border: 1px solid var(--pf-edge); border-radius: 999px; background: var(--pf-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--body); font-size: .8rem; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.siimt-pf__chip svg { width: 12px; height: 12px; }
.siimt-pf__chip:hover,
.siimt-pf__chip:focus-visible { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--navy); color: #fff; }
/* Seamless catalogue grid: one frosted frame; cells transparent and edge to
edge, divided by hairline right/bottom borders. The grid overhangs the
frame by 1px right and bottom so the last column/row borders tuck under
the frame's own edge instead of doubling it. */
.siimt-pf__frame { border-radius: 20px; overflow: hidden; }
.siimt-pf__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; margin: 0 -1px -1px 0; transition: opacity .17s ease; }
.siimt-pf__grid.is-swapping { opacity: 0; }
.siimt-pf__cell { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 17.5rem; padding: 1.55rem 1.5rem 1.3rem; border-right: 1px solid var(--pf-hair); border-bottom: 1px solid var(--pf-hair); color: inherit; text-decoration: none; outline: none; transition: box-shadow .45s var(--pf-ease); }
.siimt-pf__cell[hidden] { display: none; }
.siimt-pf__cell--blank { background: rgba(255, 255, 255, .25); }
/* Navy fill on its own layer, so it can fade in over the glass. */
.siimt-pf__cell::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, #0E3A70 0%, var(--wp--preset--color--navy) 45%, var(--wp--preset--color--navy-deep) 100%); opacity: 0; transition: opacity .45s var(--pf-ease); }
/* Accent bar that draws across the top of the active cell. */
.siimt-pf__cell::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 3px; background: linear-gradient(90deg, var(--wp--preset--color--teal-bright), var(--wp--preset--color--blue-light)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--pf-ease); }
.siimt-pf__cell--blank::before,
.siimt-pf__cell--blank::after { display: none; }
.siimt-pf__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.siimt-pf__well { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; transition: background-color .4s var(--pf-ease), color .4s var(--pf-ease), transform .4s var(--pf-ease); }
.siimt-pf__well svg { width: 23px; height: 23px; }
.siimt-pf__well--cyber { background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal-deep); }
.siimt-pf__well--data-ai,
.siimt-pf__well--cloud { background: var(--wp--preset--color--neutral); color: var(--wp--preset--color--blue-deep); }
.siimt-pf__well--software { background: #E3F7F0; color: #0F7A5C; }
.siimt-pf__well--digital-marketing,
.siimt-pf__well--business { background: #FEF6E7; color: #B45309; }
.siimt-pf__badge { flex: none; padding: .28rem .6rem; border-radius: 6px; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background-color .4s var(--pf-ease), color .4s var(--pf-ease); }
.siimt-pf__badge--bsc { background: #E4ECF6; color: var(--wp--preset--color--navy); }
.siimt-pf__badge--diploma { background: var(--wp--preset--color--teal-tint); color: var(--wp--preset--color--teal-deep); }
.siimt-pf__badge--short-course { background: #FEF6E7; color: #92400E; }
.siimt-pf__name { margin: 1.15rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: 1.12rem; font-weight: 700; line-height: 1.28; color: var(--wp--preset--color--ink); transition: color .4s var(--pf-ease); }
.siimt-pf__desc { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--wp--preset--color--muted); transition: color .4s var(--pf-ease); }
.siimt-pf__note { display: block; margin-top: .6rem; font-size: .76rem; font-style: italic; line-height: 1.35; color: var(--wp--preset--color--blue-deep); transition: color .4s var(--pf-ease); }
.siimt-pf__note[hidden] { display: none; }
.siimt-pf__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1.1rem; }
.siimt-pf__foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--pf-hair); transition: background-color .4s var(--pf-ease); }
/* Meta and CTA share one grid cell, so the box is as tall as the taller of
the two. It was a fixed one-line height with the lines absolutely
positioned, which clipped a meta line long enough to wrap (e.g. "2 Months
· Business & Productivity" in a 3-column cell). */
.siimt-pf__swap { position: relative; flex: 1; display: grid; min-height: 1.4rem; overflow: hidden; }
.siimt-pf__meta,
.siimt-pf__cta { grid-area: 1 / 1; display: flex; align-items: center; gap: .4rem; font-size: .82rem; line-height: 1.35; transition: transform .4s var(--pf-ease), opacity .3s ease; }
.siimt-pf__meta { align-items: flex-start; color: var(--wp--preset--color--muted); }
.siimt-pf__meta svg { flex: none; width: 14px; height: 14px; margin-top: .1rem; }
.siimt-pf__cta { font-weight: 600; letter-spacing: .01em; color: var(--wp--preset--color--teal-bright); opacity: 0; transform: translateY(100%); }
.siimt-pf__arrow { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--wp--preset--color--teal); color: #fff; opacity: 0; transform: translateX(-10px) scale(.8); transition: opacity .35s ease, transform .45s var(--pf-ease), background-color .3s; }
.siimt-pf__arrow svg { width: 16px; height: 16px; }
/* Hover / keyboard focus: the whole cell fills navy, CTA + arrow reveal. */
.siimt-pf__cell:is(:hover, :focus-visible) { z-index: 2; box-shadow: 0 20px 40px -24px rgba(7, 31, 63, .6); }
.siimt-pf__cell:is(:hover, :focus-visible)::after { opacity: 1; }
.siimt-pf__cell:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__well { background: rgba(255, 255, 255, .1); color: var(--wp--preset--color--teal-bright); transform: translateY(-2px); }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__badge { background: rgba(255, 255, 255, .12); color: #fff; }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__name { color: #fff; }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__desc { color: #B9CCE2; }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__note { color: var(--wp--preset--color--blue-light); }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__foot::before { background: rgba(255, 255, 255, .14); }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__meta { opacity: 0; transform: translateY(-100%); }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__cta { opacity: 1; transform: none; }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__arrow { opacity: 1; transform: none; }
.siimt-pf__cell:focus-visible { box-shadow: inset 0 0 0 2px var(--wp--preset--color--teal-bright); }
.siimt-pf__cell:active::after { background: var(--wp--preset--color--navy-deep); }
.siimt-pf__cell:active .siimt-pf__arrow { background: var(--wp--preset--color--teal-deep); }
/* Touch screens have no hover: keep the arrow showing so cells read as tappable. */
@media (hover: none) {
.siimt-pf__arrow { opacity: 1; transform: none; background: var(--wp--preset--color--neutral); color: var(--wp--preset--color--navy); }
}
.siimt-pf__empty { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; gap: .5rem; min-height: 17.5rem; padding: 2rem; text-align: center; color: var(--wp--preset--color--muted); }
.siimt-pf__empty[hidden] { display: none; }
.siimt-pf__empty strong { font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; color: var(--wp--preset--color--ink); }
.siimt-pf__empty button { border: 0; background: none; color: var(--wp--preset--color--blue-deep); font-family: var(--wp--preset--font-family--body); font-weight: 600; text-decoration: underline; cursor: pointer; }
/* Paging */
.siimt-pf__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1.25rem; }
.siimt-pf__range { margin: 0; font-size: .85rem; color: var(--wp--preset--color--muted); }
.siimt-pf__pages { display: flex; align-items: center; gap: .4rem; }
.siimt-pf__pages button { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem; border: 1px solid var(--pf-edge); border-radius: 12px; background: var(--pf-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--mono); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.siimt-pf__pages button svg { width: 15px; height: 15px; }
.siimt-pf__pages button[data-dir="prev"] svg { transform: rotate(180deg); }
.siimt-pf__pages button:hover:not(:disabled):not([aria-current]) { border-color: var(--wp--preset--color--navy); }
.siimt-pf__pages button[aria-current="page"] { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--navy); color: #fff; }
.siimt-pf__pages button:disabled { opacity: .4; cursor: default; }
.siimt-pf__pages button:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 2px; }
@media (max-width: 1100px) {
.siimt-pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below 900px the sidebar stacks above the grid, filters folded behind a
toggle (the search box stays out, it's the most-used control). */
@media (max-width: 900px) {
.siimt-pf__wrap { grid-template-columns: 1fr; gap: 1.25rem; }
.siimt-pf__filters { position: static; padding: 1rem 1.1rem; }
.siimt-pf__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 2.6rem; margin-top: .9rem; padding: 0 .9rem; border: 1px solid var(--pf-hair); border-radius: 12px; background: rgba(255, 255, 255, .7); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--body); font-weight: 600; cursor: pointer; }
.siimt-pf__toggle svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .3s var(--pf-ease); }
.siimt-pf__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.siimt-pf__body[hidden] { display: none; }
/* iOS zooms the page on focusing an input under 16px. */
.siimt-pf__search input { font-size: 16px; }
}
@media (min-width: 901px) {
.siimt-pf__body[hidden] { display: block; }
}
@media (max-width: 600px) {
.siimt-pf__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
.siimt-pf__cell { min-height: 0; }
.siimt-pf__pager { justify-content: center; }
.siimt-pf__range { width: 100%; text-align: center; }
/* 3 per page on phones means up to 6 page numbers: slimmer buttons, and they wrap rather than
push the finder wider than the screen (2026-10-04). */
.siimt-pf__pages { flex-wrap: wrap; justify-content: center; gap: .15rem; }
.siimt-pf__pages button { min-width: 2.25rem; height: 2.25rem; padding: 0 .4rem; }
}
@media (prefers-reduced-motion: reduce) {
.siimt-pf *,
.siimt-pf *::before,
.siimt-pf *::after { transition-duration: 0s !important; }
}
/* --- Why SIIMT: photo band + intro row + accented 4-up grid ------------- */
/* Real campus photo as texture behind the navy: a strong multi-stop overlay
keeps every stat/icon/text at full contrast (this is content, not the
hero's slideshow), while still letting the photo read at the edges so
the section doesn't look like a flat colour fill. --siimt-why-bg is set
inline per-pattern (see why-siimt.php) since this file is never PHP-
processed — same technique as the hero's own background. */
.siimt-why {
position: relative;
overflow: hidden;
background-color: var(--wp--preset--color--navy-deep);
/* Background swapped 2026-09-13 to an abstract tech/globe graphic
* (why-siimt-bg.jpg, from build_theme/art_work/bg_images/why_siimt.png
* — .png name, actually JPEG-encoded) instead of a campus photo. It's
* already dark navy on its own, so the overlay is lighter than a photo
* background would need — this is meant to read as visible texture,
* not be washed out to a flat colour. */
background-image:
linear-gradient(158deg, rgba(7, 31, 63, .88) 8%, rgba(11, 45, 91, .68) 48%, rgba(7, 31, 63, .9) 100%),
var(--siimt-why-bg);
background-size: cover;
background-position: center 42%;
background-repeat: no-repeat;
}
.siimt-why > .siimt-why-intro,
.siimt-why > .siimt-why-grid { position: relative; z-index: 2; }
/* .siimt-why-decor and .siimt-why-sidelist (both position:absolute, out of
* flow) are still real DOM siblings that precede .siimt-why-intro, so WP's
* own layout/blockGap CSS treats the intro as "not the first child" and
* gives it an unwanted 1.5rem top margin on top of the section's own
* padding — 64px of top space instead of the intended 40px. Compound
* selector (not just .siimt-why-intro) so this reliably beats WP's
* same-specificity generated rule regardless of stylesheet order. Found
* 2026-09-17 during a full-page spacing audit; cta-band.php and hero.php
* had the identical bug from the identical cause, fixed alongside this. */
.siimt-why > .siimt-why-intro { margin-top: 0; }
/* Longer dash variant for this section's eyebrow, per the reference. */
.siimt-eyebrow--dash-lg::before { width: 40px; }
.siimt-why-head__accent { color: var(--wp--preset--color--blue-light); }
.siimt-why-head__sub { margin: 0.6rem 0 0; color: #9FBAD6; max-width: 46ch; }
.siimt-why-intro { margin-bottom: 2rem; }
.siimt-why-intro .wp-block-buttons,
.siimt-why-intro .wp-block-button,
.siimt-why-intro .wp-block-button__link { max-width: 100%; }
/* Decorative building illustration + dot-grid, bottom-left corner — same
technique as .siimt-accred-head__decor, mirrored to the opposite corner
so the two sections don't feel like copy-pasted twins. */
.siimt-why-decor {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.siimt-why-decor::before {
content: "";
position: absolute;
bottom: -10px;
left: -10px;
width: 220px;
height: 160px;
background-image: radial-gradient(circle at 1px 1px, rgba(92, 184, 234, .18) 1px, transparent 0);
background-size: 18px 18px;
-webkit-mask-image: linear-gradient(45deg, #000 0%, transparent 65%);
mask-image: linear-gradient(45deg, #000 0%, transparent 65%);
}
.siimt-why-decor__building {
position: absolute;
bottom: -6px;
left: 6px;
width: 150px;
height: auto;
color: var(--wp--preset--color--blue-light);
opacity: 0.14;
}
@media (max-width: 640px) {
.siimt-why-decor__building { display: none; }
.siimt-why-decor::before { width: 150px; height: 110px; }
}
/* Vertical "People / Skills / Opportunities / Impact" side-list — purely
atmospheric, echoes the reference's right-edge label column. Needs real
width to sit clear of the grid without crowding it, so it only appears
above the container's own content width. */
.siimt-why-sidelist {
display: none;
position: absolute;
top: 50%;
right: 0.5rem;
z-index: 0;
transform: translateY(-50%);
flex-direction: column;
align-items: center;
gap: 1rem;
pointer-events: none;
}
.siimt-why-sidelist::before {
content: "";
width: 1px;
height: 28px;
background: rgba(92, 184, 234, .4);
}
.siimt-why-sidelist span {
writing-mode: vertical-rl;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6E93B8;
}
@media (min-width: 1400px) {
.siimt-why-sidelist { display: flex; }
}
/* One frosted-glass tile holding all four values — same treatment as the hero
"Our Impact in Numbers" tile (.siimt-statrow): 16%-white hairline border and
dividers, 42% navy fill, 6px backdrop blur, soft drop shadow + top highlight. */
.siimt-why-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-block: 1.6rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 20px;
background: rgba(7, 31, 63, 0.42);
box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.siimt-why-item {
min-width: 0;
position: relative;
padding-inline: clamp(1.1rem, 2vw, 1.6rem);
}
.siimt-why-item::before {
content: "";
position: absolute;
top: 0.2rem;
bottom: 0.2rem;
left: 0;
width: 1px;
background: rgba(255, 255, 255, 0.16);
}
.siimt-why-item:first-child::before { display: none; }
.siimt-why-item__num {
margin: 0 0 0.6rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.siimt-why-item .siimt-why-item__icon { margin-bottom: 0.85rem; transition: transform var(--wp--custom--transition); }
.siimt-why-item:hover .siimt-why-item__icon { transform: translateY(-2px); }
.siimt-why-item__tag {
margin: 0 0 0.4rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.siimt-why-item__title { margin: 0 0 0.3rem; font-weight: 600; color: var(--wp--preset--color--surface); }
.siimt-why-item__desc { margin: 0; font-size: 0.85rem; color: #9FBAD6; line-height: 1.5; }
/* Per-item accent colour: icon well fill + glow, number and tagline text.
Inset highlight layered into each glow 2026-09-18, alongside the wider
icon-well depth/size pass (see .siimt-iconwell above). */
.siimt-why-item--blue .siimt-why-item__icon { background: #0284C7; color: #fff; box-shadow: 0 8px 20px -6px rgba(2, 132, 199, .55), inset 0 1.5px 1px rgba(255, 255, 255, .35); }
.siimt-why-item--blue .siimt-why-item__num,
.siimt-why-item--blue .siimt-why-item__tag { color: #5CB8EA; }
.siimt-why-item--teal .siimt-why-item__icon { background: #00A88F; color: #fff; box-shadow: 0 8px 20px -6px rgba(0, 168, 143, .55), inset 0 1.5px 1px rgba(255, 255, 255, .35); }
.siimt-why-item--teal .siimt-why-item__num,
.siimt-why-item--teal .siimt-why-item__tag { color: #2DD4BF; }
.siimt-why-item--purple .siimt-why-item__icon { background: #8B5CF6; color: #fff; box-shadow: 0 8px 20px -6px rgba(139, 92, 246, .55), inset 0 1.5px 1px rgba(255, 255, 255, .35); }
.siimt-why-item--purple .siimt-why-item__num,
.siimt-why-item--purple .siimt-why-item__tag { color: #C4B5FD; }
.siimt-why-item--orange .siimt-why-item__icon { background: #F59E0B; color: #fff; box-shadow: 0 8px 20px -6px rgba(245, 158, 11, .55), inset 0 1.5px 1px rgba(255, 255, 255, .35); }
.siimt-why-item--orange .siimt-why-item__num,
.siimt-why-item--orange .siimt-why-item__tag { color: #FBBF24; }
@media (max-width: 900px) {
.siimt-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
.siimt-why-item:nth-child(3)::before { display: none; }
.siimt-why-item:nth-child(n+3) { padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
}
@media (max-width: 480px) {
.siimt-why-grid { grid-template-columns: 1fr; row-gap: 1.3rem; padding-block: 1.3rem; border-radius: 16px; }
.siimt-why-item::before { display: none; }
.siimt-why-item:not(:first-child) { padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
}
/* --- SIIMT journey (homepage) ---------------------------------------------
Rebuilt 2026-09-19 from build_theme/art_work/theme_suggestions/
suggestion_3.png: a light-blue plate with a winding blue-to-teal path
behind four alternating ring-badge nodes, start/end markers and a scroll-
cue into the next section. The section plate is scoped to .siimt-jny; the
header/track/step classes below are also reused by
programme-admission-process.php (its differences are the .siimt-adm-*
rules further down), so changes here show up on both. See the pattern
file's header for how the path/nodes stay aligned, and
build_theme/gen-journey-assets.js for the generated art.
Layers (top to bottom): dotted wave terrain (tiles horizontally, pinned to
the bottom), faint flowing lines, two soft glows, base gradient. Relative
url()s resolve against this stylesheet, i.e. the theme root. */
.siimt-jny {
--tile: 1000px; /* one terrain tile's width at its display height (1200x240 art at 200px tall) */
position: relative;
z-index: 2; /* so the scroll-cue line can overhang into the next section */
overflow-x: clip;
background-color: #F1F8FE;
background-image:
radial-gradient(55% 50% at 16% 70%, rgba(170, 214, 247, .40), transparent 72%),
radial-gradient(50% 46% at 86% 38%, rgba(170, 214, 247, .30), transparent 72%),
linear-gradient(180deg, #F9FCFF 0%, #EFF7FE 58%, #E7F1FB 100%);
}
/* Background art as two pseudo-element layers (Stage 6, 2026-09-19) instead of
CSS backgrounds, so they can move on the compositor (transform only — animating
background-position would repaint this whole gradient section every frame).
z-index:-1 sits them above the section's own background but under its content
(the section is a stacking context via z-index:2). Both are decorative,
pointer-events:none, and paused when the section is off-screen. */
.siimt-jny::before,
.siimt-jny::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
/* Dotted wave terrain: a strip one tile wider than the section, slid left by
exactly one tile per loop, so the join never shows. ~110s per tile is ~9px/s —
slow enough to read as drift, not motion. */
.siimt-jny::before {
left: 0;
bottom: 0;
width: calc(100% + var(--tile));
height: 200px;
background: url(assets/img/journey/terrain.svg) repeat-x 0 100% / auto 200px;
animation: siimt-terrain-drift 110s linear infinite;
will-change: transform;
}
@keyframes siimt-terrain-drift {
to { transform: translateX(calc(-1 * var(--tile))); }
}
/* Faint flowing lines: a gentle back-and-forth sway (a couple of percent). */
.siimt-jny::after {
inset: -3% -3%;
background: url(assets/img/journey/lines.svg) center / cover no-repeat;
animation: siimt-lines-sway 70s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes siimt-lines-sway {
from { transform: translate3d(-1.2%, 0, 0) scale(1.02); }
to { transform: translate3d(1.2%, -1%, 0) scale(1.02); }
}
/* journey-motion.js sets data-bg="off" while the section is off-screen. */
.siimt-jny[data-bg="off"]::before,
.siimt-jny[data-bg="off"]::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.siimt-jny::before,
.siimt-jny::after { animation: none; }
}
#siimt-journey,
#career-pathways { scroll-margin-top: 7rem; }
/* Vertical "Skills / People / Opportunities / A brighter tomorrow" list —
same motif as .siimt-why-sidelist / .siimt-life-sidelist, only where
there's real margin outside the 1200px rail for it. */
.siimt-jny-sidelist {
display: none;
position: absolute;
top: clamp(2.5rem, 4vw, 3.5rem);
right: 1.25rem;
z-index: 0;
flex-direction: column;
gap: 0.5rem;
padding-left: 0.9rem;
border-left: 1px solid #C5DDF0;
pointer-events: none;
}
.siimt-jny-sidelist span {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #1B2C48;
max-width: 7.5rem; /* lets "A brighter tomorrow" wrap to two lines, as in the reference */
}
.siimt-jny-sidelist::after {
content: "";
width: 2.4rem;
height: 2px;
margin-top: 0.6rem;
background: #0EA5E9;
}
/* Needs the margin outside the 1200px rail (~160px each side at 1536) to sit
clear of the header note; from 1500px up. */
@media (min-width: 1500px) {
.siimt-jny-sidelist { display: flex; }
/* ...and there is room to put "A brighter tomorrow" beside the end dot, as
in the reference, instead of above it. */
.siimt-jny-cap--end { right: auto; left: calc(99% + 1.6rem); top: 64px; text-align: left; }
}
/* Header: title block left, note + CTA right. */
.siimt-jny-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.5rem 3rem;
align-items: start;
}
.siimt-jny-head__main { max-width: 42rem; }
.siimt-jny-head__title {
margin: 0.3rem 0 0;
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-size: clamp(2rem, 3.4vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--wp--preset--color--ink);
}
.siimt-jny-head__accent { color: #0B7FD4; }
.siimt-jny-head__sub { margin: 0.9rem 0 0; font-size: 1.05rem; color: #4A6280; }
.siimt-jny-head__aside { max-width: 22rem; padding-top: 0.35rem; }
.siimt-jny-head__note {
position: relative;
margin: 0 0 1rem;
padding-left: 1.1rem;
font-size: 0.92rem;
line-height: 1.55;
color: #3A526F;
}
.siimt-jny-head__note::before {
content: "";
position: absolute;
left: 0;
top: 0.2rem;
bottom: 0.2rem;
width: 1px;
background: #B8D3EA;
}
.siimt-jny-head__aside .wp-block-buttons { margin: 0; }
/* Track: SVG line behind, four-column node grid in front. SVG is 160px tall in
real px (Y never scales) but its X follows the grid's width, so the
path meets the nodes at any width — nodes sit at x 150/450/750/1050 of
1200, y 80 (28px number + 8px gap + half of the 88px well). */
.siimt-jny-track {
position: relative;
margin-top: clamp(2.75rem, 5vw, 4rem);
}
.siimt-jny-track__svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 160px;
overflow: visible;
pointer-events: none;
}
.siimt-jny-track__glow { opacity: .13; }
.siimt-jny-steps {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.siimt-jny-step {
--c1: #0B5AB4;
--c2: #082F66;
--glow: 2, 132, 199;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
padding-inline: 0.5rem;
text-align: center;
}
.siimt-jny-step--teal { --c1: #14B8A6; --c2: #0B6B78; --glow: 20, 184, 166; }
.siimt-jny-step--blue2 { --c1: #0B72CE; --c2: #0A3F8F; --glow: 2, 132, 199; }
.siimt-jny-step--green { --c1: #2DD4B4; --c2: #0E8F86; --glow: 20, 184, 166; }
.siimt-jny-step__num {
display: block;
height: 28px;
margin-bottom: 8px;
font-family: var(--wp--preset--font-family--mono);
font-weight: 600;
font-size: 1.05rem;
line-height: 28px;
letter-spacing: 0.06em;
color: #0776B5;
}
/* Node: gradient disc + gloss, a thin ring 14px out, and a soft glow 34px
out (behind everything in the step, above the path so it dims it). */
.siimt-jny-step__well {
position: relative;
display: grid;
place-items: center;
width: 88px;
height: 88px;
border-radius: 50%;
color: #fff;
background:
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 52%),
linear-gradient(150deg, var(--c1), var(--c2));
box-shadow:
0 16px 30px -12px rgba(var(--glow), .55),
inset 0 2px 1px rgba(255, 255, 255, .35),
inset 0 -8px 14px rgba(0, 0, 0, .14);
}
.siimt-jny-step__well svg { position: relative; z-index: 1; width: 38px; height: 38px; }
.siimt-jny-step__well::before {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
border: 1px solid rgba(var(--glow), .32);
}
.siimt-jny-step__well::after {
content: "";
position: absolute;
inset: -34px;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--glow), .22) 0%, rgba(var(--glow), .08) 45%, transparent 68%);
}
.siimt-jny-step__title {
margin: 1rem 0 0;
font-family: var(--wp--preset--font-family--display);
font-weight: 700;
font-size: 1.45rem;
line-height: 1.2;
color: var(--wp--preset--color--ink);
}
.siimt-jny-step__desc {
margin: 0.5rem 0 0;
max-width: 15.5rem;
font-size: 0.98rem;
line-height: 1.5;
color: #4E6480;
}
.siimt-jny-step__tag {
margin-top: 1rem;
padding: 0.32rem 0.95rem;
border-radius: 999px;
background: #DCEEFB;
color: #0A6DB3;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.siimt-jny-step--teal .siimt-jny-step__tag,
.siimt-jny-step--green .siimt-jny-step__tag { background: #D3F3EC; color: #09695D; }
/* Start / end markers and the glowing orb (static here; it travels the
path in the animation stage). Positioned by % of X so they track the
path's ends (x 12 and 1188 of 1200) at any width. */
.siimt-jny-dot {
position: absolute;
z-index: 2;
width: 14px;
height: 14px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 35% 30%, #4FB3F0, #0B63C2);
box-shadow: 0 0 0 4px rgba(11, 99, 194, .14), 0 4px 10px -2px rgba(11, 99, 194, .5);
}
.siimt-jny-dot--start { left: 1%; top: 80px; }
.siimt-jny-dot--end {
left: 99%;
top: 80px;
background: radial-gradient(circle at 35% 30%, #34D3BE, #0E9F8E);
box-shadow: 0 0 0 4px rgba(20, 184, 166, .16), 0 4px 10px -2px rgba(14, 159, 142, .5);
}
/* A solid directional arrow (not a glowing dot — client feedback
2026-09-21) rides the line, making the left-to-right (desktop) /
top-to-bottom (mobile, rotated 90deg on the icon itself below) travel
direction explicit rather than just implying motion with a blob. */
.siimt-jny-orb {
position: absolute;
z-index: 0; /* above the line (DOM order), below the step nodes (z-index:1) so it passes BEHIND each checkpoint */
left: 27.5%;
top: 80px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
}
.siimt-jny-orb-arrow {
width: 100%;
height: 100%;
color: #0EA5E9;
filter: drop-shadow(0 0 6px rgba(14, 165, 233, .75)) drop-shadow(0 0 14px rgba(14, 165, 233, .4));
}
.siimt-jny-cap {
position: absolute;
z-index: 2;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.22em;
line-height: 1.6;
text-transform: uppercase;
white-space: nowrap; /* line breaks are explicit controls (the reviews carousel's prev/next) need the UA
button chrome reset — doesn't. */
button.siimt-arrow-btn { background: none; padding: 0; cursor: pointer; font: inherit; }
a.siimt-arrow-btn,
button.siimt-arrow-btn { transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), transform var(--wp--custom--transition); }
a.siimt-arrow-btn:hover,
a.siimt-arrow-btn:focus-visible,
button.siimt-arrow-btn:hover,
button.siimt-arrow-btn:focus-visible {
background: var(--wp--preset--color--teal);
border-color: var(--wp--preset--color--teal);
color: var(--wp--preset--color--navy);
transform: translateX(2px);
}
.siimt-news-card { position: relative; }
.siimt-news-card__arrow {
position: absolute;
right: 0.7rem;
bottom: 0.7rem;
background: var(--wp--preset--color--surface);
pointer-events: none; /* decorative only — the card's real links are the title/image */
}
/* Keep the last lines of a card's text clear of the round arrow in the bottom-right corner
(it used to sit on top of the end of the title). Padding, not margin: the title carries an inline margin. */
.siimt-news-card:has(.siimt-news-card__arrow) :is(.siimt-news-title, .siimt-news-excerpt) { padding-inline-end: 3rem; }
/* --- CTA band: vertical corner text (restrained tech/brand flourish) ---- */
.siimt-cta-band { position: relative; overflow: hidden; }
/* .siimt-cta-band__vertical (position:absolute, out of flow) is still a
* real DOM sibling preceding the kicker+buttons row, so WP's blockGap CSS
* treats that row as "not the first child" and gives it an unwanted
* 1.5rem top margin on top of the section's own padding. Same bug, same
* cause, as why-siimt.php and hero.php — found together in the
* 2026-09-17 full-page spacing audit. Compound selector (needs the
* className added to the row in cta-band.php) so it reliably beats WP's
* same-specificity generated rule. */
.siimt-cta-band > .siimt-cta-band__row { margin-top: 0; }
.siimt-cta-band__vertical {
position: absolute;
top: 1.5rem;
right: 1.75rem;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
color: #e2effa; /* was 45% opacity: 1.97:1 on the blue band */
pointer-events: none;
}
/* The label sat on top of the "Talk to admissions" button on screens narrower than about 1600px (found in the live test, 2026-10-26); it is decoration, so it only shows where there is room. */
@media (max-width: 1599px) {
.siimt-cta-band__vertical { display: none; }
}
/* ==========================================================================
Programme page template — Course_Page_Layout blueprint (2026-09-12)
Shared components: breadcrumb, programme hero, info strip, info cards,
tabs, accordion (native ), fees rows, FAQ, career cards.
========================================================================== */
/* --- Breadcrumb (Rank Math) --------------------------------------------- */
.siimt-breadcrumb.rank-math-breadcrumb {
margin-bottom: 0.75rem;
font-size: 0.82rem;
}
.siimt-breadcrumb.rank-math-breadcrumb p { margin: 0; }
.siimt-breadcrumb.rank-math-breadcrumb a { color: #9FBAD6; text-decoration: none; }
.siimt-breadcrumb.rank-math-breadcrumb a:hover { color: var(--wp--preset--color--surface); text-decoration: underline; }
.siimt-breadcrumb.rank-math-breadcrumb .last { color: var(--wp--preset--color--surface); }
.siimt-breadcrumb.rank-math-breadcrumb .separator { margin: 0 0.4rem; color: #6C8CAE; }
/* On a light section instead of navy (rare, but keep it legible either way). */
.siimt-breadcrumb-light.rank-math-breadcrumb a { color: var(--wp--preset--color--muted); }
.siimt-breadcrumb-light.rank-math-breadcrumb .last { color: var(--wp--preset--color--ink); }
/* --- Programme hero: two-column, matches the homepage hero treatment --- */
.siimt-prog-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--wp--preset--color--navy-deep);
background-image: var(--wp--preset--gradient--hero-navy);
color: var(--wp--preset--color--surface);
}
.siimt-prog-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(120, 190, 240, 0.14) 1px, transparent 0);
background-size: 32px 32px;
-webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
mask-image: linear-gradient(115deg, #000 0%, transparent 55%);
pointer-events: none;
}
.siimt-prog-hero > .wp-block-columns { position: relative; z-index: 1; }
.siimt-prog-hero .has-lead-font-size,
.siimt-prog-hero .wp-block-post-excerpt { color: #C7DAEC; }
.siimt-prog-hero h1.has-display-font-size { font-size: clamp(1.9rem, 3.2vw, 3.1rem) !important; }
.siimt-prog-hero-media {
position: relative;
border-radius: var(--wp--custom--radius--card);
overflow: hidden;
box-shadow: var(--wp--preset--shadow--lift);
aspect-ratio: 4 / 3;
}
.siimt-prog-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.siimt-prog-hero-media__vertical {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
writing-mode: vertical-rl;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Three feature bullets under the hero CTAs. */
.siimt-hero-features {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 1.5rem;
margin-top: var(--wp--preset--spacing--md);
list-style: none;
padding: 0;
}
.siimt-hero-features li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #BBD5EA; }
.siimt-hero-features .siimt-iconwell { width: 30px; height: 30px; flex: 0 0 auto; }
.siimt-hero-features .siimt-iconwell svg { width: 18px; height: 18px; }
@media (max-width: 782px) {
.siimt-prog-hero-media { aspect-ratio: 16 / 11; }
}
/* --- Programme info strip (Duration / Affiliation / Intakes / Mode) ---- */
.siimt-info-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.siimt-info-strip__item { display: flex; align-items: flex-start; gap: 0.6rem; }
.siimt-info-strip__item .siimt-iconwell { flex: 0 0 auto; }
.siimt-info-strip__item strong { display: block; font-size: 0.78rem; color: var(--wp--preset--color--blue-deep); font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.siimt-info-strip__item span { display: block; font-size: 0.9rem; color: var(--wp--preset--color--ink); margin-top: 0.1rem; }
@media (max-width: 900px) {
.siimt-info-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.siimt-info-strip { grid-template-columns: 1fr; }
}
/* --- Info card row (Why choose SIIMT — 4 cards with icon + text) ------- */
.siimt-info-card-row {
margin-top: var(--wp--preset--spacing--md);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.siimt-info-card { flex-direction: row !important; align-items: flex-start; gap: 0.7rem; }
.siimt-info-card__title { margin: 0 0 0.2rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.siimt-info-card__desc { margin: 0; font-size: 0.82rem; color: var(--wp--preset--color--muted); line-height: 1.45; }
@media (max-width: 900px) {
.siimt-info-card-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.siimt-info-card-row { grid-template-columns: 1fr; }
}
/* --- Admission process (patterns/programme-admission-process.php) -------
Built on the homepage journey's own .siimt-jny-* classes ("SIIMT journey
(homepage)" above) so the two sections stay consistent by construction;
only what genuinely differs lives here. Rebuilt 2026-09-24, replacing a
separate .siimt-journey look-alike system that had drifted from the
homepage (grey line, smaller type, no start/end markers, tags out of
line with each other). */
.siimt-adm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.siimt-adm-actions .wp-block-buttons { margin: 0; }
.siimt-adm-actions__link { font-size: 0.9rem; font-weight: 600; }
/* 5th node colour, for "Choose Payment Plan" — the homepage only needs 4.
Built on #B45309, the site's existing gold accent. */
.siimt-jny-step--gold { --c1: #F0A020; --c2: #B45309; --glow: 180, 83, 9; }
.siimt-jny-step--gold .siimt-jny-step__tag { background: #FEF6E7; color: #92400E; }
/* No step numbers here (removed at client request — the traveling arrow
already shows the order), so the well is the first thing in each step and
its centre, where the line, dots and orb sit, is y 44 rather than the
homepage's y 80. */
.siimt-adm-track__svg { height: 88px; }
.siimt-adm-track .siimt-jny-dot { top: 44px; }
.siimt-adm-track .siimt-jny-cap--start { top: -1.4rem; }
.siimt-adm-track .siimt-jny-cap--end { top: -0.35rem; }
@media (min-width: 1500px) {
.siimt-adm-track .siimt-jny-cap--end { top: 28px; }
}
/* Orb, appended by assets/js/admission-motion.js; hidden until its loop starts. */
.siimt-adm-track .siimt-jny-orb { top: 44px; opacity: 0; }
@media (min-width: 901px) {
/* 5 columns, inset 5% each side so the start/end captions sit clear of
the first/last node: nodes land at 14/32/50/68/86%, which is where the
SVG's gradient stops and junction dots are drawn. */
.siimt-adm-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-inline: 5%; }
/* Two-word titles wrap at 5 columns, so a step's text block varies in
height; letting the description take the slack and pinning the tag to
the bottom keeps all five tags on one line, as the homepage's are. */
.siimt-adm-steps .siimt-jny-step__title { font-size: 1.25rem; }
.siimt-adm-steps .siimt-jny-step__desc { font-size: 0.92rem; margin-bottom: 1rem; }
.siimt-adm-steps .siimt-jny-step__tag { margin-top: auto; }
}
@media (max-width: 900px) {
.siimt-adm-track .siimt-jny-orb { top: 0; }
}
/* --- Tabs (Programme Structure | Admission Requirements) --------------- */
.siimt-tabs { margin-top: var(--wp--preset--spacing--md); }
.siimt-tabs [role="tablist"] {
display: inline-flex;
gap: 0.25rem;
padding: 0.25rem;
background: var(--wp--preset--color--neutral);
border-radius: var(--wp--custom--radius--pill);
margin-bottom: 1.25rem;
}
.siimt-tabs [data-tab-trigger] {
border: 0;
background: transparent;
padding: 0.55rem 1.1rem;
border-radius: var(--wp--custom--radius--pill);
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
font-size: 0.88rem;
color: var(--wp--preset--color--navy);
cursor: pointer;
transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.siimt-tabs [data-tab-trigger].is-active { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--surface); }
.siimt-tabs [data-tab-trigger]:not(.is-active):hover { background: rgba(11,45,91,0.08); }
/* --- Accordion (native /, zero JS) -------------------- */
.siimt-accordion { margin-top: 0.75rem; }
.siimt-accordion details {
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--small);
background: var(--wp--preset--color--surface);
margin-bottom: 0.6rem;
overflow: hidden;
}
.siimt-accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.1rem;
font-weight: 600;
color: var(--wp--preset--color--navy);
cursor: pointer;
list-style: none;
}
.siimt-accordion summary::-webkit-details-marker { display: none; }
.siimt-accordion summary::marker { content: ""; }
.siimt-accordion summary .siimt-accordion__icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 22px;
height: 22px;
color: var(--wp--preset--color--navy);
transition: transform var(--wp--custom--transition);
}
.siimt-accordion details[open] summary .siimt-accordion__icon { transform: rotate(45deg); }
.siimt-accordion__body { padding: 0 1.1rem 1rem; color: var(--wp--preset--color--muted); font-size: 0.9rem; }
.siimt-accordion__body :last-child { margin-bottom: 0; }
.siimt-accordion summary:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -2px; }
/* --- Learning outcomes box ------------------------------------------------ */
.siimt-outcomes-box { height: 100%; }
.siimt-outcomes-box__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
/* --- Fees rows (Duration & Fees) ----------------------------------------- */
.siimt-fees-table { border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); overflow: hidden; background: var(--wp--preset--color--surface); }
.siimt-fees-table__row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.siimt-fees-table__row:last-child { border-bottom: 0; }
.siimt-fees-table__row .siimt-iconwell { flex: 0 0 auto; }
.siimt-fees-table__label { flex: 0 0 auto; width: 11rem; font-weight: 600; color: var(--wp--preset--color--ink); font-size: 0.88rem; }
.siimt-fees-table__value { color: var(--wp--preset--color--muted); font-size: 0.88rem; }
@media (max-width: 560px) {
.siimt-fees-table__row { flex-wrap: wrap; }
.siimt-fees-table__label { width: 100%; }
}
/* --- Career opportunity cards -------------------------------------------- */
.siimt-career-cards { display: grid; gap: 0.85rem; margin-top: var(--wp--preset--spacing--md); }
.siimt-career-card { padding: 0 !important; }
.siimt-career-card summary {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.15rem;
cursor: pointer;
list-style: none;
}
.siimt-career-card summary::-webkit-details-marker { display: none; }
.siimt-career-card summary::marker { content: ""; }
.siimt-career-card__title { flex: 1 1 auto; min-width: 0; }
.siimt-career-card__title strong { display: block; color: var(--wp--preset--color--ink); }
.siimt-career-card__title span { display: block; font-size: 0.82rem; color: var(--wp--preset--color--teal-deep); font-weight: 600; margin-top: 0.1rem; }
.siimt-career-card .siimt-accordion__icon { color: var(--wp--preset--color--muted); }
.siimt-career-card__body { padding: 0 1.15rem 1.1rem 4.35rem; color: var(--wp--preset--color--muted); font-size: 0.88rem; }
.siimt-career-card__body p { margin: 0; }
/* --- CTA help link (chat icon) -------------------------------------------- */
.siimt-cta-help { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; }
.siimt-cta-help svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--wp--preset--color--teal); }
.siimt-cta-help a { color: var(--wp--preset--color--surface); text-decoration: underline; }
.siimt-cta-help a:hover { color: var(--wp--preset--color--teal); }
/* --- Programme overview: text + framed image ----------------------------- */
.siimt-overview-media {
border-radius: var(--wp--custom--radius--card);
overflow: hidden;
aspect-ratio: 16 / 11;
background: linear-gradient(150deg, #14497F, #071F3F);
position: relative;
}
.siimt-overview-media__label {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
padding: 1rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.78rem;
letter-spacing: 0.14em;
line-height: 2;
color: rgba(160, 200, 235, 0.7);
text-transform: uppercase;
}
/* ==========================================================================
Partner / accreditation logo cards (real logos + full names)
========================================================================== */
.siimt-partner-row {
display: grid;
/* A plain auto-fit track fits 5 of these (226px) across the 1200px
content rail, splitting 6 real cards into an uneven 5+1 instead of a
clean 3x2 — force 3 columns explicitly. */
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
@media (max-width: 900px) {
.siimt-partner-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.siimt-partner-row { grid-template-columns: 1fr; }
}
/* programme-accreditation.php: 4 logos in a column that's already narrower
than trust-band's full-width rail (62% of 1200px, beside a sidebar card)
— a plain 2-column grid regardless of viewport, not just below 900px,
since the constraint here is the column's width, not the window's. */
.siimt-partner-row--compact { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
.siimt-partner-row--compact { grid-template-columns: 1fr; }
}
/* Each partner is its own bordered card — logo, name, description, status
tag and a "value pillar" tagline, all inside the same white box, bottom
edge included — matching a supplied reference layout. */
.siimt-partner-logo {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.7rem;
/* Grid's own default alignment (align-items: stretch) already fills
each item to its row's height — an explicit height:100% here doesn't
add anything on Chromium, but on iOS Safari a percentage height on a
flex column nested in a CSS Grid auto-track item was mis-resolving to
a much taller box than the row actually needed, which combined with
margin-top:auto below produced the huge name→tag gap (and visual
overlap into the next row) seen on a real iPhone. Grid stretch alone
is enough; the explicit percentage was the bug. */
padding: 1.75rem 1.5rem;
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--card);
transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}
.siimt-partner-logo:hover {
box-shadow: var(--wp--preset--shadow--lift);
transform: translateY(-3px);
}
/* Was 64px in a bordered inner box — read as small next to the rest of the
card's generous padding. A bigger mark with no inner border reads as the
logo sitting directly on the card, matching the reference. */
.siimt-partner-logo__mark {
display: flex;
align-items: center;
justify-content: center;
height: 92px;
width: 100%;
}
.siimt-partner-logo__mark img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
/* IndoSoftwares Solutions' logo is a white wordmark with no baked-in
background — it needs a dark tile behind it, unlike the others. */
.siimt-partner-logo__mark--dark { background: var(--wp--preset--color--navy-deep); border-radius: var(--wp--custom--radius--small); padding: 0.5rem 0.75rem; height: 76px; }
/* Names run from one line ("University of Cape Coast") to three
("Commission for Technical and Vocational Education and Training"), so
without a reserved height the status tag below lands at a different
vertical position on every card and the row reads as misaligned. Reserve
space for two lines and let a third line push past it — the tag is
bottom-pinned below regardless, so it still lines up across the row. */
.siimt-partner-logo__name { margin: 0; min-height: calc(1rem * 1.35 * 2); font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--wp--preset--color--navy); }
.siimt-partner-logo__desc { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.siimt-partner-logo__tag {
display: inline-block;
margin: 0;
padding: 0.2rem 0.55rem;
border-radius: var(--wp--custom--radius--pill);
background: var(--wp--preset--color--neutral);
color: var(--wp--preset--color--blue-deep);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Last element in the card, so this is the one that's bottom-pinned —
pushes to the card's bottom edge and lines up across a row regardless of
how many lines the name/description above it wrapped to. */
.siimt-partner-pillars {
margin: 0;
margin-top: auto;
padding-top: 0.4rem;
text-align: center;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--wp--preset--color--blue-deep);
}
.siimt-partner-pillars span { margin-inline: 0.35em; color: var(--wp--preset--color--line); }
/* Single column on mobile means each card is its own grid row — there's no
sibling to align the pillars line against, so the reserved 2-line name
height and the bottom-pinned margin only add dead space here. Let the
card size to its own natural content instead. */
@media (max-width: 560px) {
.siimt-partner-logo__name { min-height: 0; }
.siimt-partner-pillars { margin-top: 0; }
}
/* QA 2026-09-19: larger tap targets without changing the look. */
.siimt-hero__dot { position: relative; }
.siimt-hero__dot::after { content: ""; position: absolute; inset: -10px -4px; }
.siimt-cp-head__link::after { content: ""; position: absolute; inset: -10px -6px -6px; }
/* ==========================================================================
Premium pilot — /programmes (2026-09-24)
Approved mockup: _mockups/programmes-premium.html (local web root).
Rules for the pilot, so later pages can follow them:
1. One accent (teal), used rarely: the headline accent, the quote mark,
the finder's hover bar, the admission dot. Everything else is navy on
white / mist.
2. Type does the work: no icon wells, no card boxes. Hairlines only.
3. More white space than feels comfortable (one section rhythm below).
4. Every claim is a real, already-published fact.
5. Motion is slow and rare.
Patterns: programme-header, programme-teach, programme-voice, and the
is_page('programmes') variants of programme-grid (.siimt-pf--quiet),
programme-accreditation, programme-admission-process and programme-cta.
========================================================================== */
:root {
--siimt-pp-mist: #F3F6F9;
--siimt-pp-rule: #C5D2E0; /* a step stronger than --line, for list rules */
--siimt-pp-muted: #56697F; /* 5.2:1 on mist, 5.6:1 on white (theme muted is 4.3:1 on mist) */
--siimt-pp-accent: #008F79; /* teal for large text on white, 4:1 */
--siimt-pp-section: clamp(3rem, 5.5vw, 4.75rem); /* ~76px at 1440 (was up to 8rem: client, too much gap) */
--siimt-pp-h2: clamp(2rem, 3.4vw, 3rem);
--siimt-pp-lead: clamp(1.08rem, 1.3vw, 1.22rem);
--siimt-pp-ease: cubic-bezier(.22, .61, .36, 1);
}
/* The constrained layout puts a 1.5rem block gap above every page section,
which would show as a white stripe between two grounds. */
.siimt-pp-hero,
.siimt-pp-section,
.siimt-pp-cta,
.siimt-pf--quiet { margin-block-start: 0; }
.siimt-pp-section { padding-block: var(--siimt-pp-section); background: var(--wp--preset--color--surface); }
.siimt-pp-section--mist { background: var(--siimt-pp-mist); }
.siimt-pp-section--rule { border-top: 1px solid var(--wp--preset--color--line); }
/* --- Shared type and controls ---------------------------------------------- */
.siimt-pp-eyebrow { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: .74rem; font-weight: 500; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-h2 { margin: .9rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: var(--siimt-pp-h2); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: var(--wp--preset--color--navy); text-wrap: balance; }
.siimt-pp-lead { margin: 1.4rem 0 0; font-size: var(--siimt-pp-lead); line-height: 1.6; color: var(--wp--preset--color--body); }
.siimt-pp-note { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--siimt-pp-muted); }
.siimt-pp-source { font-family: var(--wp--preset--font-family--mono); font-size: .68rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-arr { display: inline-block; transition: transform .3s var(--siimt-pp-ease); }
.siimt-pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.siimt-pp-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border: 1px solid transparent; border-radius: 4px; font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .25s var(--siimt-pp-ease), color .25s var(--siimt-pp-ease), border-color .25s var(--siimt-pp-ease); }
.siimt-pp-btn:hover .siimt-pp-arr,
.siimt-pp-btn:focus-visible .siimt-pp-arr,
.siimt-pp-link:hover .siimt-pp-arr,
.siimt-pp-link:focus-visible .siimt-pp-arr { transform: translateX(4px); }
.siimt-pp-btn--navy { background: var(--wp--preset--color--navy); color: #fff; }
.siimt-pp-btn--navy:hover,
.siimt-pp-btn--navy:focus-visible { background: var(--wp--preset--color--navy-deep); color: #fff; }
.siimt-pp-btn--white { background: #fff; color: var(--wp--preset--color--navy); }
.siimt-pp-btn--white:hover,
.siimt-pp-btn--white:focus-visible { background: #E7EEF6; color: var(--wp--preset--color--navy); }
.siimt-pp-btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.siimt-pp-btn--ghost:hover,
.siimt-pp-btn--ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.siimt-pp-link { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 2px; font-weight: 600; color: var(--wp--preset--color--navy); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .25s var(--siimt-pp-ease); }
.siimt-pp-link:hover,
.siimt-pp-link:focus-visible { color: var(--wp--preset--color--teal-deep); }
/* Section heading row: heading left, a short note or actions right. */
.siimt-pp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem 4rem; align-items: end; margin-block: 0 clamp(2.5rem, 5vw, 4rem); }
.siimt-pp-head__aside { justify-self: end; max-width: 30rem; margin: 0; color: var(--siimt-pp-muted); }
.siimt-pp-head--adm .siimt-pp-head__aside { display: grid; justify-items: end; gap: 1.1rem; text-align: right; }
/* --- 1. Hero: text on the content rail, photo to the viewport edge --------- */
.siimt-pp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100vh - 7rem), 800px); background: var(--wp--preset--color--surface); }
.siimt-pp-hero > * { margin-block: 0; }
/* The column is half the page, so (100% - 600px) is the gap from the
viewport edge to a centred 1200px rail. */
.siimt-pp-hero__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem) max(var(--wp--style--root--padding-left, 1.5rem), calc(100% - 600px)); }
.siimt-pp-crumb { margin-bottom: clamp(2rem, 4vw, 3.25rem); font-family: var(--wp--preset--font-family--mono); font-size: .74rem; letter-spacing: .08em; color: var(--siimt-pp-muted); }
.siimt-pp-crumb p { margin: 0; }
.siimt-pp-crumb a { display: inline-block; padding-block: .45rem; margin-block: -.45rem; color: inherit; text-decoration: none; } /* 24px+ target, same visual size */
.siimt-pp-crumb a:hover,
.siimt-pp-crumb a:focus-visible { color: var(--wp--preset--color--navy); text-decoration: underline; }
.siimt-pp-crumb .separator { margin-inline: .5rem; }
.siimt-pp-hero__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.75rem, 5.2vw, 5.1rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; color: var(--wp--preset--color--navy); text-wrap: balance; }
.siimt-pp-hero__title em { font-style: normal; color: var(--siimt-pp-accent); }
.siimt-pp-hero__lead { max-width: 34rem; margin: 1.75rem 0 0; font-size: var(--siimt-pp-lead); line-height: 1.6; color: var(--wp--preset--color--body); }
.siimt-pp-hero .siimt-pp-actions { margin-top: 2.25rem; }
.siimt-pp-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(2.75rem, 5vw, 4rem) 0 0; border-top: 1px solid var(--wp--preset--color--line); }
.siimt-pp-ledger > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1.1rem 1rem 0 0; }
.siimt-pp-ledger > div + div { padding-left: 1rem; border-left: 1px solid var(--wp--preset--color--line); }
.siimt-pp-ledger dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--wp--preset--color--navy); }
.siimt-pp-ledger dt { margin-top: .35rem; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-hero__photo { position: relative; overflow: hidden; background: var(--siimt-pp-mist); }
.siimt-pp-hero__photo img { position: absolute; inset: -8% 0 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 22%; will-change: transform; }
.siimt-pp-hero__badge { will-change: transform; }
/* The one glass element in the page body: a small frosted label on the photo. */
.siimt-pp-hero__badge { position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); max-width: 19rem; margin: 0; padding: 1rem 1.2rem; border-left: 3px solid var(--wp--preset--color--teal); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); font-size: .88rem; line-height: 1.45; color: var(--wp--preset--color--ink); }
.siimt-pp-hero__badge span { display: block; margin-bottom: .3rem; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--siimt-pp-muted); }
@media (prefers-reduced-motion: no-preference) {
.siimt-pp-hero__text > * { animation: siimt-pp-rise .9s var(--siimt-pp-ease) both; }
.siimt-pp-hero__text > :nth-child(2) { animation-delay: .08s; }
.siimt-pp-hero__text > :nth-child(3) { animation-delay: .18s; }
.siimt-pp-hero__text > :nth-child(4) { animation-delay: .28s; }
.siimt-pp-hero__text > :nth-child(5) { animation-delay: .38s; }
.siimt-pp-hero__photo img { animation: siimt-pp-settle 1.8s var(--siimt-pp-ease) both; }
.siimt-pp-hero__badge { animation: siimt-pp-rise .9s .6s var(--siimt-pp-ease) both; }
}
@keyframes siimt-pp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes siimt-pp-settle { from { transform: scale(1.05); } to { transform: none; } }
/* --- 2. Finder, quiet variant (/programmes only; homepage keeps the glass) -- */
.siimt-pf--quiet { --pf-hair: var(--wp--preset--color--line); background: var(--wp--preset--color--surface); background-image: none; border-top: 1px solid var(--wp--preset--color--line); }
.siimt-pf--quiet::before,
.siimt-pf--quiet::after { display: none; }
.siimt-pf--quiet > .siimt-pf__wrap { margin-block-start: 0; grid-template-columns: 15.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
/* The grid takes whatever height the sidebar sets, so the two columns end level
and the cards share the extra room (client, 2026-09-25). */
.siimt-pf--quiet .siimt-pf__results { display: flex; flex-direction: column; }
@media (min-width: 901px) {
.siimt-pf--quiet .siimt-pf__frame { flex: 1; display: flex; }
.siimt-pf--quiet .siimt-pf__frame > .siimt-pf__grid { flex: 1; grid-auto-rows: 1fr; }
}
.siimt-pf--quiet .siimt-pf__filters,
.siimt-pf--quiet .siimt-pf__frame { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.siimt-pf--quiet .siimt-pf__filters { top: 8.5rem; padding: 0; }
.siimt-pf--quiet .siimt-pf__filters > .siimt-pf__eyebrow { display: none; }
.siimt-pf--quiet .siimt-pf__search { margin: 0 0 .5rem; }
.siimt-pf--quiet .siimt-pf__search svg { left: 0; }
.siimt-pf--quiet .siimt-pf__search input { height: auto; padding: .7rem 0 .7rem 1.75rem; border: 0; border-bottom: 1px solid var(--siimt-pp-rule); border-radius: 0; background: transparent; }
.siimt-pf--quiet .siimt-pf__search input:focus { border-bottom-color: var(--wp--preset--color--navy); background: transparent; box-shadow: none; }
.siimt-pf--quiet .siimt-pf__group { margin-top: 1.25rem; padding-top: 0; border-top: 0; }
.siimt-pf--quiet .siimt-pf__group legend { font-weight: 500; letter-spacing: .16em; color: var(--siimt-pp-muted); }
.siimt-pf--quiet .siimt-pf__opt { margin: 0; padding: .3rem 0; border-radius: 0; color: var(--wp--preset--color--ink); }
.siimt-pf--quiet .siimt-pf__opt:hover { background: none; }
.siimt-pf--quiet .siimt-pf__opt:hover .siimt-pf__mark { border-color: var(--wp--preset--color--navy); }
.siimt-pf--quiet .siimt-pf__mark { flex-basis: 16px; width: 16px; height: 16px; border-width: 1px; border-color: var(--siimt-pp-rule); }
.siimt-pf--quiet .siimt-pf__mark--check { border-radius: 2px; }
.siimt-pf--quiet .siimt-pf__opt input:checked ~ .siimt-pf__label { font-weight: 500; }
.siimt-pf--quiet .siimt-pf__count { color: var(--siimt-pp-muted); }
.siimt-pf--quiet .siimt-pf__clear { width: auto; height: auto; margin-top: 1.5rem; padding: 0; border: 0; border-radius: 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
.siimt-pf--quiet .siimt-pf__clear:hover:not(:disabled) { background: none; color: var(--wp--preset--color--teal-deep); }
.siimt-pf--quiet .siimt-pf__head { align-items: baseline; margin-bottom: 1rem; }
.siimt-pf--quiet .siimt-pf__head .siimt-pf__eyebrow { display: none; }
.siimt-pf--quiet .siimt-pf__title { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; color: var(--wp--preset--color--navy); }
.siimt-pf--quiet .siimt-pf__total,
.siimt-pf--quiet .siimt-pf__range { font-family: var(--wp--preset--font-family--mono); font-size: .76rem; letter-spacing: .06em; color: var(--siimt-pp-muted); }
.siimt-pf--quiet .siimt-pf__total b { font-weight: 500; }
.siimt-pf--quiet .siimt-pf__chip { border-color: var(--siimt-pp-rule); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--wp--preset--color--ink); font-weight: 500; }
/* One hairline grid: the frame draws top/left, each cell right/bottom. */
.siimt-pf--quiet .siimt-pf__frame { overflow: visible; border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line); }
.siimt-pf--quiet .siimt-pf__grid { margin: 0; }
.siimt-pf--quiet .siimt-pf__cell { min-height: 15.5rem; padding: 1.6rem 1.5rem 1.4rem; background: #fff; }
.siimt-pf--quiet .siimt-pf__cell--blank { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(11, 45, 91, .025) 9px 10px); }
.siimt-pf--quiet .siimt-pf__cell::after { background: var(--wp--preset--color--navy); }
.siimt-pf--quiet .siimt-pf__cell::before { background: var(--wp--preset--color--teal); }
.siimt-pf--quiet .siimt-pf__cell:is(:hover, :focus-visible) { box-shadow: none; }
.siimt-pf--quiet .siimt-pf__cell:focus-visible { box-shadow: inset 0 0 0 2px var(--wp--preset--color--teal-bright); }
.siimt-pf--quiet .siimt-pf__well { display: none; }
.siimt-pf--quiet .siimt-pf__top { display: block; }
.siimt-pf--quiet .siimt-pf__badge,
.siimt-pf--quiet .siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__badge { padding: 0; border-radius: 0; background: none; font-size: .7rem; font-weight: 500; letter-spacing: .12em; }
.siimt-pf--quiet .siimt-pf__badge { color: var(--siimt-pp-muted); }
.siimt-pf--quiet .siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__badge { color: var(--wp--preset--color--teal-bright); }
.siimt-pf--quiet .siimt-pf__name { margin-top: 1.1rem; font-size: 1.28rem; font-weight: 600; line-height: 1.22; letter-spacing: -.02em; color: var(--wp--preset--color--navy); }
.siimt-pf--quiet .siimt-pf__desc { font-size: .93rem; line-height: 1.55; color: var(--siimt-pp-muted); }
.siimt-pf--quiet .siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__desc { color: #C9D8EA; }
.siimt-pf--quiet .siimt-pf__foot::before { display: none; }
/* Career role line: one Ghanaian job title at a time, crossfading on the card's
own clock (assets/js/programme-finder.js). Anchored to the card bottom so the
line reads level across a row whatever the description length. */
.siimt-pf__roles { display: flex; align-items: baseline; gap: .6rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--wp--preset--color--line); font-size: .82rem; color: var(--siimt-pp-muted); transition: color .35s var(--siimt-pp-ease), border-color .35s var(--siimt-pp-ease); }
.siimt-pf__roles i { flex: none; width: 6px; height: 6px; margin-bottom: 1px; border-radius: 50%; background: var(--wp--preset--color--teal); }
.siimt-pf__roles b { font-weight: 600; color: var(--wp--preset--color--navy); transition: color .35s var(--siimt-pp-ease), opacity .3s var(--siimt-pp-ease), transform .3s var(--siimt-pp-ease); }
.siimt-pf__roles b.is-out { opacity: .15; transform: translateY(4px); } /* a soft dip between job titles, not a blank: a full fade left "Leads to" with nothing after it for a moment */
.siimt-pf__roles + .siimt-pf__foot { margin-top: 0; padding-top: .9rem; }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__roles { color: #C9D8EA; border-color: rgba(255, 255, 255, .16); }
.siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__roles b { color: #fff; }
.siimt-pf--quiet .siimt-pf__meta { font-size: .85rem; color: var(--siimt-pp-muted); }
.siimt-pf--quiet .siimt-pf__meta svg { display: none; }
.siimt-pf--quiet .siimt-pf__cta { color: #fff; }
.siimt-pf--quiet .siimt-pf__arrow,
.siimt-pf--quiet .siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__arrow { width: auto; height: auto; border-radius: 0; background: none; opacity: 1; }
.siimt-pf--quiet .siimt-pf__arrow { color: var(--wp--preset--color--navy); transform: none; transition: transform .35s var(--siimt-pp-ease), color .35s var(--siimt-pp-ease); }
.siimt-pf--quiet .siimt-pf__cell:is(:hover, :focus-visible) .siimt-pf__arrow { color: #fff; transform: translateX(5px); }
.siimt-pf--quiet .siimt-pf__pages button { border-color: transparent; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--wp--preset--color--ink); }
.siimt-pf--quiet .siimt-pf__pages button:hover:not(:disabled):not([aria-current]) { border-color: var(--siimt-pp-rule); }
.siimt-pf--quiet .siimt-pf__pages button[aria-current="page"] { background: var(--wp--preset--color--navy); color: #fff; }
@media (max-width: 900px) {
.siimt-pf--quiet > .siimt-pf__wrap { grid-template-columns: 1fr; }
.siimt-pf--quiet .siimt-pf__filters { padding: 0; }
.siimt-pf--quiet .siimt-pf__toggle { border-color: var(--siimt-pp-rule); border-radius: 0; background: #fff; }
}
/* --- 3. How we teach -------------------------------------------------------- */
/* The section is the grid itself (layout "default", no content wrapper): the text
column pads itself onto the rail with the same formula as the closing section
(a 5/12 column, so 120% of it is half the page), and the photo column runs from
the band's top edge to its bottom edge and off the right of the screen. */
.siimt-pp-teach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; background: var(--siimt-pp-mist); }
.siimt-pp-teach > * { margin-block: 0; }
/* Pinned below the sticky header while the taller photo column scrolls past. */
.siimt-pp-teach__text { position: sticky; top: 9rem; align-self: start; padding: var(--siimt-pp-section) 0 var(--siimt-pp-section) max(var(--wp--style--root--padding-left, 1.5rem), calc(120% - 600px)); }
.siimt-pp-facts { margin: 2.25rem 0 2rem; border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-facts > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--siimt-pp-rule); }
.siimt-pp-facts dt { font-family: var(--wp--preset--font-family--display); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; color: var(--wp--preset--color--navy); }
.siimt-pp-facts dd { margin: 0; font-size: .95rem; color: var(--wp--preset--color--body); }
/* The photo column has to be well taller than the text for the pinned text
to read (client, 2026-09-24: the first version gave it ~120px of travel,
too little to notice). Classroom shot on top; the detail shot, larger and
on the left, overlaps its corner; the 80% figure sits to its right. */
/* Photo column: the classroom shot fills whatever height is left above the
detail shot, so the pictures always meet the band's edges; min-height keeps the
column taller than the pinned text so the text has room to stay put. */
.siimt-pp-teach__media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; min-height: 60rem; }
.siimt-pp-teach__wide { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 40%; }
.siimt-pp-teach__tall { grid-column: 1 / 8; grid-row: 2; width: 100%; height: auto; margin-top: -12%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 45%; border: 10px solid var(--siimt-pp-mist); border-left: 0; border-bottom: 0; }
.siimt-pp-teach__stat { grid-column: 8 / -1; grid-row: 2; align-self: center; margin: 0; padding: 2rem 1.5rem 2rem 1.75rem; }
.siimt-pp-teach__stat b { display: block; font-family: var(--wp--preset--font-family--display); font-size: clamp(4.5rem, 9vw, 8rem); font-weight: 800; line-height: .9; letter-spacing: -.06em; color: var(--wp--preset--color--navy); }
.siimt-pp-teach__stat sup { font-size: .45em; letter-spacing: 0; vertical-align: .95em; color: var(--siimt-pp-accent); }
.siimt-pp-teach__stat span { display: block; max-width: 17rem; margin-top: 1rem; color: var(--wp--preset--color--body); }
/* --- 4. Student voice ------------------------------------------------------- */
.siimt-pp-voice { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.siimt-pp-voice figure { margin: 0; }
.siimt-pp-voice blockquote { margin: 0; padding: 0; border: 0; }
.siimt-pp-voice blockquote p { margin: 0; }
.siimt-pp-voice .siimt-pp-voice__quote { margin-top: 1.5rem; font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 4.3vw, 3.7rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; color: var(--wp--preset--color--navy); text-wrap: balance; }
.siimt-pp-voice__quote::before { content: "\201C"; display: block; height: .55em; margin-bottom: .1em; font-size: 1.9em; line-height: 1; color: var(--wp--preset--color--teal); }
.siimt-pp-voice__cite { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; max-width: 38rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--body); }
.siimt-pp-voice__cite b { font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-voice__side { display: grid; border-top: 1px solid var(--wp--preset--color--line); }
.siimt-pp-voice__side figure { padding: 1.4rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-voice__side blockquote { font-size: .98rem; line-height: 1.6; color: var(--wp--preset--color--ink); }
.siimt-pp-voice__side figcaption { margin-top: .7rem; font-size: .85rem; font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-voice__side .siimt-pp-link { justify-self: start; margin-top: 1.4rem; }
/* --- 5. Accreditation ------------------------------------------------------- */
.siimt-pp-accred { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.siimt-pp-accred__statement { margin: 1rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 400; line-height: 1.55; letter-spacing: -.01em; color: var(--wp--preset--color--ink); }
.siimt-pp-accred__statement strong { font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line); }
.siimt-pp-logos li { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0; padding: 2rem .75rem 1.6rem; border-right: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); text-align: center; }
.siimt-pp-logos img { width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); opacity: .85; transition: filter .4s var(--siimt-pp-ease), opacity .4s var(--siimt-pp-ease); }
.siimt-pp-logos li:hover img { filter: none; opacity: 1; }
.siimt-pp-logos span { font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-logos b { display: block; font-family: var(--wp--preset--font-family--body); font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--navy); }
/* --- 6. Admission: hairline timeline + deadlines ---------------------------- */
/* Same device as How we teach: the left column pins while the tall timeline
scrolls past. The teal dot and the filled line follow the scroll position
(assets/js/programmes-premium.js); the step level with the upper-middle of
the screen is the one in navy, earlier steps are done, later ones faint. */
#how-to-apply { scroll-margin-top: 9rem; }
.siimt-pp-adm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.siimt-pp-adm__text { position: sticky; top: 9rem; }
.siimt-pp-adm__text .siimt-pp-actions { margin-top: 2rem; }
.siimt-pp-adm__text .siimt-pp-note { max-width: 28rem; margin-top: 1.5rem; }
.siimt-pp-adm__count { display: block; margin-top: 2.5rem; font-family: var(--wp--preset--font-family--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-adm__count b { font-weight: 500; color: var(--wp--preset--color--navy); }
.siimt-pp-track { position: relative; margin-block-start: 0; padding-left: 2.6rem; }
.siimt-pp-track::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 6px; width: 1px; background: var(--siimt-pp-rule); }
.siimt-pp-track__fill { position: absolute; top: 8px; left: 6px; width: 1px; height: 0; background: var(--wp--preset--color--navy); }
.siimt-pp-track__orb { position: absolute; top: 8px; left: 2px; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--wp--preset--color--teal); box-shadow: 0 0 0 5px rgba(0, 168, 143, .16); }
.siimt-pp-track__list { margin: 0; padding: 0; list-style: none; }
.siimt-pp-track__list li { position: relative; margin: 0; padding: 0 0 clamp(3.5rem, 7.5vw, 6.75rem); }
.siimt-pp-track__list li:last-child { padding-bottom: .5rem; }
.siimt-pp-track__list li::before { content: ""; position: absolute; top: 2px; left: -2.6rem; width: 13px; height: 13px; border: 1.5px solid var(--siimt-pp-rule); border-radius: 50%; background: var(--siimt-pp-mist); transition: border-color .5s var(--siimt-pp-ease), background-color .5s var(--siimt-pp-ease); }
.siimt-pp-track__list li.is-done::before { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--navy); }
.siimt-pp-track__list li.is-current::before { border-color: var(--wp--preset--color--navy); }
.siimt-pp-track__n { display: block; font-family: var(--wp--preset--font-family--mono); font-size: .74rem; letter-spacing: .12em; color: var(--siimt-pp-muted); transition: color .5s var(--siimt-pp-ease); }
.siimt-pp-track__list h3 { margin: .5rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: #5F7088; transition: color .5s var(--siimt-pp-ease); } /* faint state 4.6:1 on mist; passes AA at phone size where the heading is not "large" text */
.siimt-pp-track__list p { max-width: 30rem; margin: .6rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--siimt-pp-muted); transition: color .5s var(--siimt-pp-ease); } /* faint state 5.2:1 on mist; was #9AA8B8 (2.2:1) */
.siimt-pp-track__list li:is(.is-current, .is-done) .siimt-pp-track__n { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-track__list li:is(.is-current, .is-done) h3 { color: var(--wp--preset--color--navy); }
.siimt-pp-track__list li.is-current p { color: var(--wp--preset--color--body); }
.siimt-pp-track__list li.is-done p { color: var(--siimt-pp-muted); }
/* Without the script (or under reduced motion) every step reads in full. */
.siimt-pp-track:not(.is-live) .siimt-pp-track__list h3 { color: var(--wp--preset--color--navy); }
.siimt-pp-track:not(.is-live) .siimt-pp-track__list p { color: var(--wp--preset--color--body); }
.siimt-pp-track:not(.is-live) .siimt-pp-track__list li::before { border-color: var(--wp--preset--color--navy); }
.siimt-pp-track:not(.is-live) .siimt-pp-track__orb { display: none; }
.siimt-pp-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); margin-block: clamp(3rem, 5vw, 4.5rem) 0; padding-top: 2rem; border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-dates h3 { margin: .6rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--wp--preset--color--navy); }
.siimt-pp-dates dl { margin: 1.1rem 0 0; }
.siimt-pp-dates dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-dates dt { font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-dates dd { margin: 0; color: var(--wp--preset--color--body); }
.siimt-pp-dates__intro { margin: 1.1rem 0 0; color: var(--wp--preset--color--body); }
.siimt-pp-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.siimt-pp-months li { display: grid; place-items: center; height: 2.6rem; margin: 0; background: #fff; font-family: var(--wp--preset--font-family--mono); font-size: .74rem; color: var(--siimt-pp-muted); } /* was #8A99AB (2.9:1); 5.6:1 now */
.siimt-pp-months li.is-intake { background: var(--wp--preset--color--navy); color: #fff; font-weight: 500; }
.siimt-pp-months__legend { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-size: .82rem; color: var(--siimt-pp-muted); }
.siimt-pp-months__legend i { width: 10px; height: 10px; background: var(--wp--preset--color--navy); }
/* --- 7. Closing call to action: mirrors the hero ---------------------------- */
.siimt-pp-cta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--wp--preset--color--navy-deep); color: #fff; }
.siimt-pp-cta > * { margin-block: 0; }
/* Column is 5/12 of the page, so the rail offset is (120% - 600px). */
.siimt-pp-cta__text { display: flex; flex-direction: column; justify-content: center; padding: var(--siimt-pp-section) clamp(2rem, 4vw, 4rem) var(--siimt-pp-section) max(var(--wp--style--root--padding-left, 1.5rem), calc(120% - 600px)); }
.siimt-pp-cta .siimt-pp-eyebrow { color: var(--wp--preset--color--teal-bright); }
.siimt-pp-cta .siimt-pp-h2 { margin-top: 1rem; color: #fff; }
.siimt-pp-cta__lead { max-width: 26rem; margin: 1.25rem 0 0; color: #C9D8EA; }
.siimt-pp-cta .siimt-pp-actions { gap: .85rem; margin-top: 2rem; }
.siimt-pp-cta__phones { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-family: var(--wp--preset--font-family--mono); font-size: .76rem; letter-spacing: .04em; line-height: 1.8; color: #9FBAD6; }
.siimt-pp-cta__phones a { color: #fff; text-decoration: none; }
.siimt-pp-cta__phones a:hover { text-decoration: underline; }
.siimt-pp-cta__photo { position: relative; min-height: 480px; overflow: hidden; }
.siimt-pp-cta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.siimt-pp-cta__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--wp--preset--color--navy-deep) 0%, rgba(7, 31, 63, .55) 9%, rgba(7, 31, 63, 0) 26%); }
/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
.siimt-pp-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.siimt-pp-hero { grid-template-columns: 1fr; min-height: 0; }
.siimt-pp-hero__text { padding: 2.5rem var(--wp--style--root--padding-left, 1.5rem) 3rem; }
.siimt-pp-hero__photo { aspect-ratio: 4 / 5; max-height: 80vh; }
.siimt-pp-head { grid-template-columns: 1fr; align-items: start; }
.siimt-pp-head__aside,
.siimt-pp-head--adm .siimt-pp-head__aside { justify-self: start; justify-items: start; text-align: left; }
.siimt-pp-teach,
.siimt-pp-voice,
.siimt-pp-accred,
.siimt-pp-dates { grid-template-columns: 1fr; }
.siimt-pp-teach__text { position: static; padding: 2.5rem var(--wp--style--root--padding-left, 1.5rem) 0; }
.siimt-pp-teach__media { min-height: 0; margin-top: 2.5rem; grid-template-rows: auto auto; }
.siimt-pp-teach__wide { height: auto; aspect-ratio: 3 / 2; }
.siimt-pp-adm { grid-template-columns: 1fr; }
.siimt-pp-adm__text { position: static; }
.siimt-pp-adm__count { display: none; }
.siimt-pp-track__list li { padding-bottom: 2.25rem; }
.siimt-pp-track__list h3 { font-size: 1.3rem; }
.siimt-pp-cta { grid-template-columns: 1fr; }
.siimt-pp-cta__photo { order: -1; min-height: 0; aspect-ratio: 3 / 2; }
.siimt-pp-cta__photo::before { background: linear-gradient(0deg, var(--wp--preset--color--navy-deep) 0%, rgba(7, 31, 63, 0) 30%); }
.siimt-pp-cta__text { padding: 2.5rem var(--wp--style--root--padding-left, 1.5rem) 3.5rem; }
}
@media (max-width: 600px) {
.siimt-pp-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-ledger > div:nth-child(3) { padding-left: 0; border-left: 0; }
.siimt-pp-ledger > div:nth-child(n+3) { margin-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
.siimt-pp-facts > div,
.siimt-pp-dates dl > div { grid-template-columns: 1fr; gap: .15rem; }
.siimt-pp-teach__stat { padding: 1rem 0 1rem .9rem; }
.siimt-pp-teach__stat b { font-size: 4rem; }
.siimt-pp-teach__stat span { font-size: .86rem; }
.siimt-pp-months li { height: 2.2rem; font-size: .66rem; }
}
/* ==========================================================================
Sitewide header + footer, restyled with the premium pilot (2026-09-24,
client: "use your header and footer style"). Same content and behaviour.
========================================================================== */
/* Frosted sticky bar: the other place glass earns its keep, since content
scrolls underneath it. Opaque white where backdrop-filter is unsupported. */
.siimt-header { background: #fff; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.siimt-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
/* While the menu overlay is open (WordPress adds .has-modal-open to ), drop the
frosted effect: backdrop-filter makes the header the frame for position:fixed
children, so the full-screen menu was trapped inside the header strip (115px on a
phone). Bug since 2026-09-24, fixed 2026-10-25. */
html.has-modal-open .siimt-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The open menu (phones and tablets): the premium type and hairlines instead of core's bare list. */
.siimt-primary .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem var(--wp--style--root--padding-left, 1.5rem) 2rem; background: #fff; }
.siimt-primary .is-menu-open .wp-block-navigation__responsive-close { max-width: 1200px; margin-inline: auto; }
.siimt-primary .is-menu-open .wp-block-navigation__responsive-container-close { top: .25rem; right: 0; padding: .5rem; color: var(--wp--preset--color--navy); }
.siimt-primary .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.25rem; align-items: stretch; }
.siimt-primary .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; border-top: 1px solid var(--wp--preset--color--line); }
.siimt-primary .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-primary .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 1rem 0; font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: var(--wp--preset--color--navy); }
.siimt-primary .is-menu-open .siimt-nav-current > .wp-block-navigation-item__content { box-shadow: none; color: var(--wp--preset--color--teal-deep); }
.siimt-utility a { color: #C9D8EA; }
.siimt-primary .wp-block-navigation-item__content { font-weight: 500; color: var(--wp--preset--color--ink); }
.siimt-primary .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); }
/* "You are here": set by the render filter in inc/blocks.php. */
.siimt-primary .siimt-nav-current > .wp-block-navigation-item__content { color: var(--wp--preset--color--navy); box-shadow: inset 0 -2px 0 var(--wp--preset--color--teal); }
.siimt-nav .wp-block-button.is-style-siimt-navy > .wp-block-button__link { border-radius: 4px; }
.siimt-nav .wp-block-button.is-style-siimt-navy > .wp-block-button__link .siimt-cta-arrow { display: inline-block; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.siimt-nav .wp-block-button.is-style-siimt-navy > .wp-block-button__link:is(:hover, :focus-visible) .siimt-cta-arrow { transform: translateX(4px); }
/* Footer logo (2026-10-25): the white-lettering lockup replaces the text site title. */
.siimt-footer__logo { display: inline-block; margin-bottom: .25rem; }
.siimt-footer__logo img { display: block; width: 220px; max-width: 100%; height: auto; }
.siimt-footer__logo:focus-visible { outline: 2px solid var(--wp--preset--color--teal-bright); outline-offset: 4px; }
.siimt-footer h2.wp-block-heading { margin-bottom: .9rem; font-family: var(--wp--preset--font-family--mono); font-size: .7rem !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.siimt-footer .wp-block-separator { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); background: none; opacity: 1; }
#reviews { scroll-margin-top: 7rem; }
.siimt-footer .wp-block-navigation .wp-block-navigation-item__content { font-weight: 400; color: #C9D8EA; }
.siimt-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: #fff; }
.siimt-footer p { color: #C9D8EA; }
.siimt-footer > .wp-block-group:last-child p { color: #9FBAD6; }
@media (max-width: 600px) {
.siimt-pf--quiet .siimt-pf__cell { min-height: 0; }
}
/* ==========================================================================
Premium homepage (2026-09-25) — patterns/hp-*.php, assets/js/hp-motion.js.
Approved mockup: _mockups/home-premium.html (local web root). Same rules
as the /programmes pilot above; reuses .siimt-pp-* wherever the mockup
does. The page keeps the old homepage's order and its light/navy rhythm:
navy hero → white journey → mist finder → navy Why SIIMT → white student
life → mist trust strip → white stories → mist news → navy closing.
========================================================================== */
/* One icon treatment for the page: thin, type-weight, navy; teal on hover of its parent. */
.siimt-hp-ic { display: block; width: 26px; height: 26px; color: var(--wp--preset--color--navy); transition: color .35s var(--siimt-pp-ease), transform .45s var(--siimt-pp-ease); }
a:hover .siimt-hp-ic { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-link--light { color: #fff; }
.siimt-pp-link--light:hover,
.siimt-pp-link--light:focus-visible { color: var(--wp--preset--color--teal-bright); }
/* Enlarged, invisible hit areas so small links meet the touch minimum. */
.siimt-pp-link { position: relative; }
.siimt-pp-link::after { content: ""; position: absolute; inset: -8px 0; }
/* --- 1. Hero: full-bleed slideshow, headline over, fact strip along the bottom -- */
.siimt-hp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(100vh - 110px), 720px); margin-block-start: 0; color: #fff; background: var(--wp--preset--color--navy-deep); }
.siimt-hp-hero > * { margin-block: 0; }
.siimt-hp-hero__slide { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 20%); transform-origin: var(--pos, 50% 20%); opacity: 0; transition: opacity 2s var(--siimt-pp-ease); will-change: transform, opacity; }
.siimt-hp-hero__slide.is-active { opacity: 1; }
.siimt-hp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 31, 63, .92) 0%, rgba(7, 31, 63, .8) 28%, rgba(7, 31, 63, .55) 50%, rgba(7, 31, 63, .08) 80%), linear-gradient(0deg, rgba(7, 31, 63, .88) 0%, rgba(7, 31, 63, 0) 45%); }
.siimt-hp-hero__text { width: min(100% - 2 * var(--wp--style--root--padding-left, 1.5rem), 1200px); margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 3.5vw, 3rem); }
.siimt-hp-hero__eyebrow { color: var(--wp--preset--color--teal-bright); transition: text-shadow .6s var(--siimt-pp-ease); }
.siimt-hp-hero__eyebrow.is-pulse { text-shadow: 0 0 14px rgba(63, 214, 188, .9); }
.siimt-hp-hero__title { max-width: 13ch; margin: 1rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(3rem, 6.4vw, 6rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.siimt-hp-hero__title em { font-style: normal; color: var(--wp--preset--color--teal-bright); }
.siimt-hp-hero__lead { max-width: 30rem; margin: 1.5rem 0 0; font-size: var(--siimt-pp-lead); font-weight: 500; line-height: 1.55; color: #fff; }
.siimt-hp-hero .siimt-pp-actions { margin-top: 2rem; }
.siimt-hp-hero__strip { border-top: 1px solid rgba(255, 255, 255, .18); }
.siimt-hp-hero__strip-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 1rem; width: min(100% - 2 * var(--wp--style--root--padding-left, 1.5rem), 1200px); margin: 0 auto; padding-block: 1.1rem; }
.siimt-hp-hero__strip b { display: block; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.siimt-hp-hero__strip div > span { display: block; margin-top: .25rem; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #9FBAD6; }
.siimt-hp-hero__dots { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.siimt-hp-hero__dots li { margin: 0; }
.siimt-hp-hero__dots button { position: relative; width: 22px; height: 3px; padding: 0; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .4s var(--siimt-pp-ease); }
.siimt-hp-hero__dots button::after { content: ""; position: absolute; inset: -16px -4px; } /* touch target */
.siimt-hp-hero__dots button[aria-current="true"] { width: 34px; overflow: hidden; }
.siimt-hp-hero__dots button[aria-current="true"]::before { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.siimt-hp-hero__dots button:focus-visible { outline: 2px solid var(--wp--preset--color--teal-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.siimt-hp-hero__slide.is-active { animation: siimt-hp-kenburns 7.4s linear both; }
.siimt-hp-hero__dots button[aria-current="true"]::before { animation: siimt-hp-dotfill 5s linear both; }
.siimt-hp-hero__text > * { animation: siimt-pp-rise .9s var(--siimt-pp-ease) both; }
.siimt-hp-hero__text > :nth-child(2) { animation-delay: .08s; }
.siimt-hp-hero__text > :nth-child(3) { animation-delay: .18s; }
.siimt-hp-hero__text > :nth-child(4) { animation-delay: .28s; }
.siimt-hp-hero__strip { animation: siimt-pp-rise .9s .5s var(--siimt-pp-ease) both; }
}
@media (prefers-reduced-motion: reduce) { .siimt-hp-hero__dots button[aria-current="true"] { background: #fff; } }
@keyframes siimt-hp-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes siimt-hp-dotfill { to { transform: scaleX(1); } }
/* --- 2. Journey: four stations on one line (ported from the approved mockup, 2026-10-03) --
The line passes through four 48px station icons; the text hangs under each. One teal dot
travels between stations and the trail fills behind it. On arrival a station lights and does
its moment (book turns and a page runs to Build; brackets type in; cursor blinks; second person
joins; the rocket fires, lifts off its station and lands on the flag). Plays once on entry
(desktop), replays after leaving; on phones the same states follow the reader's scroll.
Nothing is dimmed: progress is the trail, the numbers turning teal, and the ring on the
station being visited. Durations come from a --dur custom property set by hp-motion.js. */
.siimt-hp-jny { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.siimt-hp-jny__track { position: relative; margin: clamp(3.5rem, 6vw, 5rem) 0 0; }
.siimt-hp-jny__rail { position: absolute; left: 2rem; right: 2rem; top: 0; height: 48px; }
.siimt-hp-jny__cap { position: absolute; top: -1.9rem; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--siimt-pp-muted); transition: color .5s var(--siimt-pp-ease); }
.siimt-hp-jny__cap--start { left: 0; }
.siimt-hp-jny__cap--end { right: 0; text-align: right; }
.siimt-hp-jny.is-done .siimt-hp-jny__cap--end { color: var(--wp--preset--color--teal-deep); }
.siimt-hp-jny__line, .siimt-hp-jny__trail { position: absolute; left: 0; top: 23px; height: 2px; }
.siimt-hp-jny__line { right: 0; background: var(--siimt-pp-rule); }
.siimt-hp-jny__trail { width: 0; background: var(--wp--preset--color--teal); transition: width var(--dur, 2.6s) cubic-bezier(.45, .05, .55, .95); }
.siimt-hp-jny.is-reduced .siimt-hp-jny__trail { width: 100%; transition: none; }
.siimt-hp-jny__end { position: absolute; top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--wp--preset--color--navy); z-index: 2; }
.siimt-hp-jny__end--start { left: 0; margin-left: -8px; }
.siimt-hp-jny__end--end { right: 0; top: 4px; width: 40px; height: 40px; margin-right: -20px; display: grid; place-items: center; background: #fff; border: 2px solid var(--siimt-pp-rule); color: var(--siimt-pp-rule); transition: border-color .5s var(--siimt-pp-ease), color .5s var(--siimt-pp-ease), background-color .5s var(--siimt-pp-ease), transform .5s var(--siimt-pp-ease); }
.siimt-hp-jny__end--end .siimt-hp-ic { width: 20px; height: 20px; color: inherit; }
.siimt-hp-jny.is-done .siimt-hp-jny__end--end { border-color: var(--wp--preset--color--teal); color: #fff; background: var(--wp--preset--color--teal); transform: scale(1.08); }
/* The dot. */
.siimt-hp-jny__trav { position: absolute; top: 12px; left: 0; width: 24px; height: 24px; margin-left: -12px; display: grid; place-items: center; z-index: 3; opacity: 0; transition: left var(--dur, 2.6s) cubic-bezier(.45, .05, .55, .95), opacity .3s var(--siimt-pp-ease); }
.siimt-hp-jny__trav.is-on { opacity: 1; }
.siimt-hp-jny__trav-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--teal); box-shadow: 0 0 0 6px rgba(0, 168, 143, .16); transition: transform .35s var(--siimt-pp-ease); }
.siimt-hp-jny__trav.is-land .siimt-hp-jny__trav-dot { transform: scale(0); } /* absorbed by the station */
/* Leg 2: the page lifts out of the book, flattens, runs the line to Build. */
.siimt-hp-jny__page { position: absolute; top: -6px; width: 16px; height: 21px; margin-left: -8px; background: var(--wp--preset--color--teal); border-radius: 2px; opacity: 0; z-index: 3; transform-origin: 50% 100%; transition: left var(--dur, 2.4s) cubic-bezier(.45, .05, .55, .95); }
.siimt-hp-jny__page.is-lift { animation: siimt-hp-jpage-lift .9s var(--siimt-pp-ease) both; }
.siimt-hp-jny__page.is-dash { opacity: 1; transform: translateY(26px) scaleY(.2) scaleX(1.7); transition: left var(--dur, 2.4s) cubic-bezier(.45, .05, .55, .95), transform .5s var(--siimt-pp-ease); }
.siimt-hp-jny__page.is-gone { opacity: 0; transition: opacity .3s var(--siimt-pp-ease); }
/* Leg 4: exhaust under the rocket station. */
.siimt-hp-jny__exhaust { position: absolute; top: 44px; width: 0; height: 3px; margin-left: -24px; border-radius: 2px; background: var(--wp--preset--color--teal); opacity: 0; z-index: 2; }
.siimt-hp-jny__exhaust.is-on { animation: siimt-hp-jexhaust 1.1s var(--siimt-pp-ease) both; }
/* Stations: the icon sits on the line, the text hangs below. */
.siimt-hp-jny__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0 2rem 0 8rem; list-style: none; }
.siimt-hp-jny__steps li { position: relative; margin: 0; padding-top: 4.4rem; }
.siimt-hp-jny__ico { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--navy); background: #fff; color: var(--wp--preset--color--navy); transition: border-color .4s var(--siimt-pp-ease), color .4s var(--siimt-pp-ease), transform .4s var(--siimt-pp-ease), box-shadow .4s var(--siimt-pp-ease); }
.siimt-hp-jny__ico .siimt-hp-ic { width: 24px; height: 24px; color: inherit; transition: color .5s var(--siimt-pp-ease), opacity .3s var(--siimt-pp-ease); }
.siimt-hp-jny__n { display: block; font-family: var(--wp--preset--font-family--mono); font-size: .74rem; letter-spacing: .12em; color: var(--siimt-pp-muted); transition: color .4s var(--siimt-pp-ease); }
.siimt-hp-jny__steps h3 { margin: .4rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--wp--preset--color--navy); }
.siimt-hp-jny__steps p { margin: .6rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--wp--preset--color--body); }
.siimt-hp-jny__tag { display: inline-block; margin-top: 1rem; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep); }
.siimt-hp-jny__steps li.is-lit .siimt-hp-jny__ico { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal-deep); box-shadow: 0 0 0 6px rgba(0, 168, 143, .14); transform: translateY(-3px); }
.siimt-hp-jny__steps li.is-lit .siimt-hp-jny__n, .siimt-hp-jny__steps li.is-done .siimt-hp-jny__n { color: var(--wp--preset--color--teal-deep); }
/* Station moments: one smooth motion each, starting the instant the dot lands. */
.siimt-hp-jny__steps li.is-open .siimt-hp-jny__ico { animation: siimt-hp-jbook .8s var(--siimt-pp-ease) both; }
.siimt-hp-jny__steps li.is-type .siimt-hp-jny__ico .siimt-hp-ic { animation: siimt-hp-jtype .7s var(--siimt-pp-ease) both; }
.siimt-hp-jny__steps li.is-blink .siimt-hp-jny__ico .siimt-hp-ic { animation: siimt-hp-jblink .9s var(--siimt-pp-ease) both; }
.siimt-hp-jny__steps li.is-join .siimt-hp-jny__ico .siimt-hp-ic { animation: siimt-hp-jjoin .7s var(--siimt-pp-ease) both; }
/* The rocket flies bare: the station's own icon hides (the ring stays as the launch pad) while a
separate 26px rocket tilts, fires and flies an arc to the flag; then the pad's icon fades back. */
.siimt-hp-jny__steps li.is-away .siimt-hp-jny__ico .siimt-hp-ic { opacity: 0; }
.siimt-hp-jny__steps li.is-back .siimt-hp-jny__ico .siimt-hp-ic { animation: siimt-hp-jback .5s var(--siimt-pp-ease) both; }
.siimt-hp-jny__rocket { position: absolute; top: 11px; left: 0; width: 26px; height: 26px; margin-left: -13px; color: var(--wp--preset--color--teal-deep); opacity: 0; z-index: 4; transform-origin: 50% 60%; transition: left 1.4s cubic-bezier(.4, 0, .6, 1), opacity .25s var(--siimt-pp-ease), transform .35s var(--siimt-pp-ease); }
.siimt-hp-jny__rocket .siimt-hp-ic { width: 26px; height: 26px; color: inherit; }
.siimt-hp-jny__rocket.is-on { opacity: 1; }
.siimt-hp-jny__rocket.is-tilt { transform: rotate(-22deg); }
.siimt-hp-jny__rocket.is-fly { animation: siimt-hp-jfly 1.4s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes siimt-hp-jpage-lift { 0% { opacity: 0; transform: translateY(10px); } 45% { opacity: 1; transform: translateY(-26px) rotate(-10deg); } 100% { opacity: 1; transform: translateY(-20px) rotate(0); } }
@keyframes siimt-hp-jexhaust { 0% { width: 0; opacity: 0; } 30% { opacity: 1; } 100% { width: 48px; opacity: 0; } }
@keyframes siimt-hp-jbook { 0% { transform: translateY(-3px) rotateY(0); } 50% { transform: translateY(-6px) scale(1.06) rotateY(-28deg); } 100% { transform: translateY(-3px) rotateY(0); } }
@keyframes siimt-hp-jtype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes siimt-hp-jblink { 0%, 100% { opacity: 1; } 25%, 75% { opacity: .35; } 50% { opacity: 1; } }
@keyframes siimt-hp-jjoin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes siimt-hp-jback { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes siimt-hp-jfly { 0% { transform: translateY(0) rotate(-22deg) scale(1); } 45% { transform: translateY(-44px) rotate(-6deg) scale(1.08); } 100% { transform: translateY(0) rotate(32deg) scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.siimt-hp-jny__trail, .siimt-hp-jny__trav, .siimt-hp-jny__page, .siimt-hp-jny__rocket, .siimt-hp-jny__ico, .siimt-hp-jny__end--end { transition: none; animation: none !important; }
}
/* --- 3. Finder on the homepage: the /programmes quiet variant on the mist ground -- */
.siimt-pf--quiet.siimt-pf--home { background: var(--siimt-pp-mist); }
.siimt-pf--quiet.siimt-pf--home .siimt-pf__cell { background: var(--siimt-pp-mist); }
.siimt-pf--quiet.siimt-pf--home .siimt-pf__cell:is(:hover, :focus-visible) { background: var(--wp--preset--color--navy); }
.siimt-pf--quiet.siimt-pf--home .siimt-pf__chip,
.siimt-pf--quiet.siimt-pf--home .siimt-pf__mark { background: #fff; }
/* --- 4. Why SIIMT: the How-we-teach layout on navy --------------------------- */
.siimt-pp-teach--navy { background: var(--wp--preset--color--navy-deep); color: #fff; }
.siimt-pp-teach--navy .siimt-pp-eyebrow { color: var(--wp--preset--color--teal-bright); }
.siimt-pp-teach--navy .siimt-pp-h2 { color: #fff; }
.siimt-pp-teach--navy .siimt-pp-lead { color: #DCE6F2; }
.siimt-pp-teach--navy .siimt-pp-facts { border-top-color: rgba(255, 255, 255, .18); }
.siimt-pp-teach--navy .siimt-pp-facts > div { grid-template-columns: 12rem minmax(0, 1fr); border-bottom-color: rgba(255, 255, 255, .18); }
.siimt-pp-teach--navy .siimt-pp-facts dt { display: flex; align-items: center; gap: .6rem; color: #fff; }
.siimt-pp-teach--navy .siimt-pp-facts .siimt-hp-ic { width: 18px; height: 18px; flex: none; color: rgba(255, 255, 255, .7); }
.siimt-pp-teach--navy .siimt-pp-facts dd { color: #C9D8EA; }
.siimt-pp-teach--navy .siimt-pp-teach__tall { border-color: var(--wp--preset--color--navy-deep); }
.siimt-pp-teach--navy .siimt-pp-teach__stat b { color: #fff; }
.siimt-pp-teach--navy .siimt-pp-teach__stat span { color: #C9D8EA; }
/* --- 5. Student life: four photo cards on hairlines --------------------------- */
.siimt-hp-life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: 0; border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line); }
.siimt-hp-life a { display: flex; flex-direction: column; padding: 1rem 1rem 1.5rem; border-right: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--body); text-decoration: none; transition: background-color .35s var(--siimt-pp-ease); }
.siimt-hp-life a:hover { background: var(--siimt-pp-mist); }
.siimt-hp-life img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92); transition: filter .6s var(--siimt-pp-ease); }
.siimt-hp-life a:hover img { filter: none; }
.siimt-hp-life__k { margin-top: 1.1rem; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep); }
.siimt-hp-life h3 { margin: .4rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--wp--preset--color--navy); }
.siimt-hp-life p { margin: .4rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--siimt-pp-muted); }
/* --- 6. Trust strip ----------------------------------------------------------- */
.siimt-hp-trust { margin-block-start: 0; padding-block: clamp(2rem, 4vw, 3rem); }
.siimt-hp-trust__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
.siimt-hp-trust__line { max-width: 14rem; line-height: 1.6; }
.siimt-pp-logos--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.siimt-pp-logos--six li { padding: 1.2rem .5rem 1rem; }
.siimt-pp-logos--six img { width: 60px; height: 60px; }
.siimt-pp-logos--six .is-wide img { width: 130px; max-width: 100%; height: 60px; }
/* --- 7. Student stories: one quote at a time ----------------------------------- */
.siimt-hp-voice { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.siimt-hp-voice__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
/* All quotes share one grid cell, so the stage is always as tall as the longest quote and the
controls beside it never move when the quote changes (mockup fix, ported 2026-10-03). */
.siimt-hp-voice__stage { display: grid; }
.siimt-hp-voice__item { grid-area: 1 / 1; align-self: start; margin: 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .6s var(--siimt-pp-ease), transform .6s var(--siimt-pp-ease); }
.siimt-hp-voice__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.siimt-hp-voice__item.is-active.is-out { opacity: 0; transform: translateY(-6px); transition-duration: .45s; }
.siimt-hp-voice__item blockquote { margin: 1.5rem 0 0; padding: 0; border: 0; }
.siimt-hp-voice__item blockquote p { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.9rem, 3.6vw, 3.2rem); font-weight: 600; line-height: 1.12; letter-spacing: -.03em; color: var(--wp--preset--color--navy); text-wrap: balance; }
/* Quotes over 60 characters (tagged in hp-voice.php) set smaller, so the stage — sized by the
tallest quote — stays close to the short ones and leaves no empty band above them (2026-10-04). */
.siimt-hp-voice__item--long blockquote p { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.18; }
.siimt-hp-voice__item blockquote::before { content: "\201C"; display: block; height: .55em; margin-bottom: .1em; font-family: var(--wp--preset--font-family--display); font-size: clamp(3.6rem, 6.8vw, 6rem); line-height: 1; color: var(--wp--preset--color--teal); }
.siimt-hp-voice__item figcaption { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; max-width: 38rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--body); }
.siimt-hp-voice__item figcaption b { font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-hp-voice__side { display: grid; gap: 1rem; align-content: end; }
.siimt-hp-voice__side > p { margin: 0; color: var(--siimt-pp-muted); }
.siimt-hp-voice__ctl { display: flex; align-items: center; gap: .6rem; }
.siimt-hp-voice__ctl button { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--siimt-pp-rule); background: #fff; color: var(--wp--preset--color--navy); cursor: pointer; transition: border-color .3s var(--siimt-pp-ease); }
.siimt-hp-voice__ctl button:hover { border-color: var(--wp--preset--color--navy); }
.siimt-hp-voice__ctl svg { width: 16px; height: 16px; }
.siimt-hp-voice__prev { transform: rotate(180deg); }
.siimt-hp-voice__all { justify-self: start; padding: 0 0 2px; border: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; font: inherit; font-weight: 600; cursor: pointer; }
/* --- 8. News: three quiet cards on hairlines ---------------------------------- */
.siimt-hp-news__q { margin-block-start: 0; }
.siimt-hp-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line); }
.siimt-hp-news__grid > li { margin: 0; }
.siimt-hp-news__card { position: relative; height: 100%; margin: 0; padding: 1.4rem 1.5rem 1.6rem; border-right: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); background: var(--siimt-pp-mist); transition: background-color .35s var(--siimt-pp-ease); }
.siimt-hp-news__card:hover { background: #fff; }
.siimt-hp-news__card > * { margin-block: 0; }
.siimt-hp-news__img { aspect-ratio: 16 / 9; overflow: hidden; background: #fff; }
.siimt-hp-news__img img { width: 100%; height: 100%; object-fit: cover; }
/* No featured image: a quiet labelled block instead of an empty slot. */
.siimt-hp-news__card:not(:has(.siimt-hp-news__img img))::before { content: "Photo to follow"; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #fff; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-hp-news__meta { gap: .5rem !important; margin-top: 1.1rem !important; font-family: var(--wp--preset--font-family--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-hp-news__meta a { color: inherit; text-decoration: none; }
.siimt-hp-news__meta > * + *::before { content: "· "; }
.siimt-hp-news__title { margin-top: .6rem !important; font-family: var(--wp--preset--font-family--display); font-size: 1.15rem !important; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.siimt-hp-news__title a { color: var(--wp--preset--color--navy); text-decoration: none; }
/* The title link covers the whole card. */
.siimt-hp-news__title a::after { content: ""; position: absolute; inset: 0; }
/* Two-line summary from the post's own excerpt; "Read" is pushed to the card's foot so all three line up (2026-10-04). */
.siimt-hp-news__excerpt { margin-top: .6rem !important; }
.siimt-hp-news__excerpt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-size: .92rem; line-height: 1.55; color: var(--wp--preset--color--body); }
.siimt-hp-news__read { margin-top: auto !important; padding-top: 1.25rem; align-self: flex-start; }
.siimt-hp-news__card:hover .siimt-hp-news__read .siimt-pp-arr { transform: translateX(4px); }
/* --- 9. Closing: the /programmes split panel, slimmer ------------------------- */
.siimt-pp-cta--home .siimt-pp-cta__text { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
@media (min-width: 901px) { .siimt-pp-cta--home .siimt-pp-cta__photo { min-height: 380px; } } /* phones: aspect-ratio alone; a min-height there forced a 570px-wide image */
.siimt-pp-cta--home .siimt-pp-actions { gap: .85rem 1.5rem; margin-top: 1.75rem; }
.siimt-pp-cta--home .siimt-pp-cta__phones { margin-top: 1.5rem; padding-top: 1rem; }
.siimt-pp-cta__phones a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; }
/* --- Responsive ----------------------------------------------------------------- */
@media (max-width: 1100px) {
.siimt-hp-life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-logos--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.siimt-hp-jny__steps { gap: 1.25rem; }
}
@media (max-width: 900px) {
.siimt-hp-hero__strip-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-hp-hero__dots { grid-column: 1 / -1; }
/* Journey turns vertical: the rail runs down the left, the icons sit on it, the text to the right. */
.siimt-hp-jny__track { padding-bottom: 3rem; }
.siimt-hp-jny__rail { left: 24px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
.siimt-hp-jny__cap { display: none; }
.siimt-hp-jny__line, .siimt-hp-jny__trail { left: 0; top: 0; width: 2px; height: 100%; }
.siimt-hp-jny__trail { height: 0; width: 2px; transition: none; }
.siimt-hp-jny.is-reduced .siimt-hp-jny__trail { height: 100%; }
.siimt-hp-jny__end--start { left: -7px; top: -6px; margin: 0; }
.siimt-hp-jny__end--end { left: -19px; right: auto; top: auto; bottom: 0; margin: 0; }
.siimt-hp-jny__trav { left: 1px; top: 0; margin: -12px 0 0 -12px; transition: top .25s linear, opacity .35s var(--siimt-pp-ease); }
.siimt-hp-jny__page, .siimt-hp-jny__exhaust, .siimt-hp-jny__rocket { display: none; }
.siimt-hp-jny__steps { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 4.6rem; }
.siimt-hp-jny__steps li { padding: 0 0 2.5rem; }
.siimt-hp-jny__steps li:last-child { padding-bottom: 4.5rem; }
.siimt-hp-jny__ico { left: -4.6rem; top: -4px; }
.siimt-hp-voice__grid { grid-template-columns: 1fr; }
.siimt-hp-trust__in { grid-template-columns: 1fr; }
.siimt-hp-news__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.siimt-hp-life { grid-template-columns: 1fr; }
.siimt-pp-logos--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Phones: the text covers the whole photo, so the wash covers it all too — the eyebrow
otherwise sat on the bright, unshaded top of the image (2026-10-04). */
.siimt-hp-hero::before { background: linear-gradient(0deg, rgba(7, 31, 63, .92) 0%, rgba(7, 31, 63, .78) 55%, rgba(7, 31, 63, .7) 100%); }
}
/* ==========================================================================
Premium pages (2026-10-03) — inc/premium.php helpers + patterns/adm-*.php.
Same rules as the /programmes pilot and the premium homepage: hairlines,
mono eyebrows, display headings, one teal accent, real facts. Components
here are the ones the pilot didn't need: a text-only hero, route cards on
hairlines, hairline tables, a native- FAQ, numbered steps, a
checklist, a contact block, column groups and the Gravity Forms stage.
========================================================================== */
.siimt-pp-hero__eyebrow { margin-bottom: 1.25rem; }
.siimt-pp-ledger__sub { font-family: var(--wp--preset--font-family--mono); font-size: .66rem; font-weight: 400; letter-spacing: .06em; color: var(--siimt-pp-muted); }
/* Text-only hero: one column on the rail, the ledger as a wide strip beneath. */
.siimt-pp-hero--text { grid-template-columns: 1fr; min-height: 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-hero--text .siimt-pp-hero__text { width: min(100% - 2 * var(--wp--style--root--padding-left, 1.5rem), 1200px); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem); }
.siimt-pp-hero--text .siimt-pp-hero__title { max-width: 16ch; }
.siimt-pp-hero--text .siimt-pp-hero__lead { max-width: 42rem; }
.siimt-pp-hero--text .siimt-pp-ledger { max-width: 56rem; }
.siimt-pp-h3 { margin: .35rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--wp--preset--color--navy); }
.siimt-pp-h3 + .siimt-pp-note { margin-top: .5rem; }
.siimt-pp-cols { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.siimt-pp-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.siimt-pp-cols--tight { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 2rem; border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-cols > div > p { margin: .75rem 0 0; line-height: 1.6; color: var(--wp--preset--color--body); }
.siimt-pp-cols > div > .siimt-pp-link { margin-top: 1rem; }
/* Hairline bullet list: a short rule instead of a dot. */
.siimt-pp-list { margin: 1rem 0 0; padding: 0; list-style: none; }
.siimt-pp-list li { position: relative; margin: 0; padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--wp--preset--color--line); font-size: .95rem; line-height: 1.55; color: var(--wp--preset--color--body); }
.siimt-pp-list li::before { content: ""; position: absolute; top: 1.35rem; left: 0; width: 12px; height: 1px; background: var(--wp--preset--color--teal); }
/* Checklist: a teal tick drawn with borders. */
.siimt-pp-checklist { margin: 1rem 0 0; padding: 0; list-style: none; }
.siimt-pp-checklist li { position: relative; margin: 0; padding: .7rem 0 .7rem 1.9rem; border-bottom: 1px solid var(--wp--preset--color--line); font-size: .95rem; line-height: 1.55; color: var(--wp--preset--color--body); }
.siimt-pp-checklist li::before { content: ""; position: absolute; top: 1.05rem; left: .2rem; width: 6px; height: 11px; border: solid var(--wp--preset--color--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.siimt-pp-docs { max-width: 36rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 2rem; border-top: 1px solid var(--siimt-pp-rule); }
/* Route cards: links on hairlines, no boxes (the homepage student-life grid without photos). */
.siimt-pp-routes { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--line); border-left: 1px solid var(--wp--preset--color--line); }
.siimt-pp-routes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.siimt-pp-routes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.siimt-pp-routes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-routes li { margin: 0; }
.siimt-pp-routes a { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.4rem 1.6rem; border-right: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--body); text-decoration: none; transition: background-color .35s var(--siimt-pp-ease); }
.siimt-pp-routes a:hover,
.siimt-pp-routes a:focus-visible { background: var(--siimt-pp-mist); }
.siimt-pp-section--mist .siimt-pp-routes a:hover,
.siimt-pp-section--mist .siimt-pp-routes a:focus-visible { background: #fff; }
.siimt-pp-routes__k { font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep); }
.siimt-pp-routes h3 { margin: .6rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--wp--preset--color--navy); }
.siimt-pp-routes p { flex: 1 1 auto; margin: .5rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--siimt-pp-muted); }
.siimt-pp-routes__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-routes a:hover .siimt-pp-arr,
.siimt-pp-routes a:focus-visible .siimt-pp-arr { transform: translateX(4px); }
/* Hairline table. */
.siimt-pp-table { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* a wide table scrolls inside its box on phones instead of pushing the page */
.siimt-pp-table table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--siimt-pp-rule); font-size: .95rem; }
.siimt-pp-table th,
.siimt-pp-table td { padding: .95rem .75rem .95rem 0; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; vertical-align: top; }
.siimt-pp-table thead th { padding-top: .8rem; padding-bottom: .8rem; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-table tbody th { font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-table tbody th a { display: inline-block; padding-block: .3rem; margin-block: -.3rem; color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - .3rem) / 100% 1px no-repeat; } /* 24px target */
.siimt-pp-table tbody th a:hover { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-table td { color: var(--wp--preset--color--body); }
.siimt-pp-table .is-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.siimt-pp-table th.is-num:last-child,
.siimt-pp-table td.is-num:last-child { padding-right: 0; text-align: right; }
.siimt-pp-table figcaption { margin-top: 1rem; }
.siimt-pp-note--foot { margin-top: clamp(2rem, 4vw, 3rem); }
/* FAQ: native details on hairlines. */
.siimt-pp-faq { border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-faq__item { border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0; font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: var(--wp--preset--color--navy); cursor: pointer; list-style: none; }
.siimt-pp-faq summary::-webkit-details-marker { display: none; }
.siimt-pp-faq summary::marker { content: ""; }
.siimt-pp-faq summary:hover { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-faq summary:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 4px; }
.siimt-pp-faq__ico { flex: none; width: 18px; height: 18px; color: var(--siimt-pp-muted); transition: transform .3s var(--siimt-pp-ease); }
.siimt-pp-faq__item[open] .siimt-pp-faq__ico { transform: rotate(45deg); }
.siimt-pp-faq__body { max-width: 46rem; padding: 0 0 1.25rem; color: var(--wp--preset--color--body); line-height: 1.6; }
.siimt-pp-faq__body > :first-child { margin-top: 0; }
.siimt-pp-faq__body > :last-child { margin-bottom: 0; }
/* Numbered steps. */
.siimt-pp-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-steps li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1.4rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-steps__n { font-family: var(--wp--preset--font-family--mono); font-size: .74rem; letter-spacing: .12em; line-height: 2; color: var(--wp--preset--color--teal-deep); }
.siimt-pp-steps h3 { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--wp--preset--color--navy); }
.siimt-pp-steps p { max-width: 42rem; margin: .5rem 0 0; line-height: 1.6; color: var(--wp--preset--color--body); }
/* The how-to-apply detail line inside the pinned timeline. */
.siimt-pp-track__detail { margin-top: .75rem !important; font-size: .95rem !important; }
.siimt-pp-track__list li.is-current .siimt-pp-track__detail { color: var(--wp--preset--color--body); }
/* Contact block: heading left, hairline facts right. */
.siimt-pp-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.siimt-pp-contact .siimt-pp-facts { margin: 0; }
.siimt-pp-contact .siimt-pp-facts > div { grid-template-columns: 12rem minmax(0, 1fr); }
.siimt-pp-contact .siimt-pp-facts dd a { color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none; }
.siimt-pp-contact .siimt-pp-facts dd a:hover { color: var(--wp--preset--color--teal-deep); text-decoration: underline; }
.siimt-pp-facts dd a { color: var(--wp--preset--color--navy); }
/* Generic facts list used outside the teach section: wider term column. */
.siimt-pp-section .siimt-pp-facts { margin: 0; }
.siimt-pp-section .siimt-pp-facts > div { grid-template-columns: 14rem minmax(0, 1fr); padding: 1.1rem 0; }
.siimt-pp-section .siimt-pp-facts dd { line-height: 1.6; }
.siimt-pp-cols .siimt-pp-facts > div { grid-template-columns: 9rem minmax(0, 1fr); }
/* Gravity Forms stage: the heading section above it loses its bottom space, the notes below lose their top. */
.siimt-pp-section--form-head { padding-bottom: 0; }
.siimt-pp-section--form-head .siimt-pp-head { margin-bottom: 0; }
.siimt-pp-form { padding-block: clamp(2rem, 4vw, 3rem) var(--siimt-pp-section); }
.siimt-pp-form .gform_wrapper { max-width: 52rem; }
.siimt-pp-section--form-foot { padding-top: 0; }
.siimt-pp-section--form-foot .siimt-pp-cols--tight { margin-top: 0; }
@media (max-width: 1100px) {
.siimt-pp-routes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.siimt-pp-hero--text .siimt-pp-hero__text { padding: 2.5rem 0 2.5rem; }
.siimt-pp-cols--2,
.siimt-pp-cols--3 { grid-template-columns: 1fr; }
.siimt-pp-routes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-contact { grid-template-columns: 1fr; }
.siimt-pp-contact .siimt-pp-facts > div,
.siimt-pp-section .siimt-pp-facts > div { grid-template-columns: 10rem minmax(0, 1fr); }
.siimt-pp-steps li { grid-template-columns: 3rem minmax(0, 1fr); }
.siimt-pp-head__aside > p { margin: 0; }
}
@media (max-width: 600px) {
.siimt-pp-routes--2,
.siimt-pp-routes--3,
.siimt-pp-routes--4 { grid-template-columns: 1fr; }
.siimt-pp-contact .siimt-pp-facts > div,
.siimt-pp-section .siimt-pp-facts > div,
.siimt-pp-cols .siimt-pp-facts > div { grid-template-columns: 1fr; gap: .2rem; }
.siimt-pp-table table { font-size: .88rem; }
.siimt-pp-table th,
.siimt-pp-table td { padding: .75rem .5rem .75rem 0; }
.siimt-pp-table .is-num { white-space: normal; }
.siimt-pp-faq summary { font-size: 1rem; }
/* Tables with 3+ columns (fees, hostel, international): one block per row, each figure beside its
column label (data-label, set in siimt_pp_table). Replaces sideways scrolling that cut off the
last column. The header row stays for screen readers, hidden from view. */
.siimt-pp-table--stack table,
.siimt-pp-table--stack tbody,
.siimt-pp-table--stack tr,
.siimt-pp-table--stack th,
.siimt-pp-table--stack td { display: block; }
.siimt-pp-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.siimt-pp-table--stack tr { padding: .85rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-table--stack tbody th { padding: 0 0 .4rem; border: 0; }
.siimt-pp-table--stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .2rem 0; border: 0; text-align: right; }
.siimt-pp-table--stack td::before { content: attr(data-label); flex: none; font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--siimt-pp-muted); text-align: left; }
.siimt-pp-table--stack .is-num { white-space: nowrap; } /* a price stays on one line: "GHC 4,000", never "GHC / 4,000" */
}
/* Short phone / email links get a 24px-tall target without moving the text. */
.siimt-pp-section a[href^="tel:"],
.siimt-pp-section a[href^="mailto:"],
.siimt-pp-cta__phones a { display: inline-block; padding-block: .2rem; margin-block: -.2rem; }
/* --- Premium pages, batch 2 (2026-10-03): content pages, gallery, prose, forms, 404 / search --- */
.siimt-pp-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.siimt-pp-placeholder { font-family: var(--wp--preset--font-family--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--siimt-pp-muted); }
/* Gallery: photos in rows that fill the full width, no cropping (v1.61.0).
Each photo grows in proportion to its own shape (--ar = width / height, set on the by
patterns/page-gallery.php), so every row ends flush and every photo is shown whole.
The old fixed 3-column grid with a double-size first tile left empty tiles at the end of each
album, stretched the first tile to 1,500px tall, and cropped wide banners. The ::after
stops the last row from stretching, so a short last row stays at the natural size. */
.siimt-pp-gallery { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.siimt-pp-gallery li { flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 230px); min-width: 0; margin: 0; }
.siimt-pp-gallery img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.5); object-fit: cover; filter: saturate(.94); transition: filter .5s var(--siimt-pp-ease); }
.siimt-pp-gallery li:hover img { filter: none; }
.siimt-pp-gallery::after { content: ""; flex-grow: 100000; }
/* Prose: written content on a readable measure, in the premium type. */
.siimt-pp-prose { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); }
.siimt-pp-prose__figure { max-width: 1200px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.siimt-pp-prose__figure img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.siimt-pp-prose .wp-block-post-content { margin-left: 0; font-size: 1.04rem; line-height: 1.7; color: var(--wp--preset--color--body); }
.siimt-pp-prose .wp-block-post-content > * { margin-block: 0 1.1rem; }
.siimt-pp-prose .wp-block-post-content h2 { margin-top: 2.6rem; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; color: var(--wp--preset--color--navy); }
.siimt-pp-prose .wp-block-post-content h3 { margin-top: 1.9rem; font-family: var(--wp--preset--font-family--display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; color: var(--wp--preset--color--navy); }
.siimt-pp-prose .wp-block-post-content h2:first-child,
.siimt-pp-prose .wp-block-post-content h3:first-child { margin-top: 0; }
.siimt-pp-prose .wp-block-post-content ul,
.siimt-pp-prose .wp-block-post-content ol { padding-left: 1.2rem; }
.siimt-pp-prose .wp-block-post-content li { margin-bottom: .45rem; }
.siimt-pp-prose .wp-block-post-content li::marker { color: var(--wp--preset--color--teal); }
.siimt-pp-prose .wp-block-post-content a { color: var(--wp--preset--color--navy); text-decoration-color: var(--wp--preset--color--teal); text-underline-offset: 3px; }
.siimt-pp-prose .wp-block-post-content a:hover { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-prose .wp-block-post-content strong { color: var(--wp--preset--color--navy); }
.siimt-pp-prose .wp-block-post-content em { color: var(--siimt-pp-muted); }
.siimt-pp-prose .wp-block-table table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--siimt-pp-rule); font-size: .95rem; }
.siimt-pp-prose .wp-block-table th,
.siimt-pp-prose .wp-block-table td { padding: .8rem .75rem .8rem 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; }
.siimt-pp-prose .wp-block-table thead th { font-family: var(--wp--preset--font-family--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--siimt-pp-muted); }
.siimt-pp-prose .wp-block-table figcaption { margin-top: .75rem; font-size: .92rem; color: var(--siimt-pp-muted); text-align: left; }
/* Search field inside the text hero (404 / search). */
.siimt-pp-search { max-width: 34rem; margin-top: 2rem; }
.siimt-pp-search .wp-block-search__inside-wrapper { padding: 4px; border: 1px solid var(--siimt-pp-rule); border-radius: 6px; background: #fff; }
.siimt-pp-search .wp-block-search__input { padding: .7rem .9rem; border: 0; font-size: 1rem; color: var(--wp--preset--color--ink); }
.siimt-pp-search .wp-block-search__input:focus { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 2px; }
.siimt-pp-search .wp-block-search__button { padding: .6rem .9rem; border: 0; border-radius: 4px; background: var(--wp--preset--color--navy); color: #fff; }
.siimt-pp-search .wp-block-search__button:hover { background: var(--wp--preset--color--navy-deep); }
.siimt-pp-404 .siimt-pp-hero__title { max-width: 18ch; }
.siimt-pp-routes h2 { margin: .6rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--wp--preset--color--navy); }
/* Search results on hairlines. */
.siimt-pp-results__list { border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-results__item { padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.siimt-pp-results__item h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; }
.siimt-pp-results__item h2 a { color: var(--wp--preset--color--navy); text-decoration: none; }
.siimt-pp-results__item h2 a:hover { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-results__item .wp-block-post-excerpt { margin-top: .6rem; max-width: 46rem; color: var(--wp--preset--color--body); }
.siimt-pp-results__item .wp-block-post-excerpt__more-link { font-weight: 600; color: var(--wp--preset--color--navy); }
.siimt-pp-results__pager { margin-top: 2rem; font-weight: 600; }
.siimt-pp-results__pager a { color: var(--wp--preset--color--navy); text-decoration: none; }
.siimt-pp-results__pager a:hover { color: var(--wp--preset--color--teal-deep); }
.siimt-pp-results__pager .page-numbers.current { color: var(--siimt-pp-muted); }
/* Lean / form pages: tighter hero, no bottom rule on the form hero. */
.siimt-pp-hero--lean .siimt-pp-hero__text,
.siimt-pp-hero--form .siimt-pp-hero__text { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.siimt-pp-hero--form { border-bottom: 0; }
.siimt-pp-hero--lean .siimt-pp-hero__lead p { margin: 0; }
.siimt-pp-formpage { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.siimt-pp-formpage__aside { padding-top: .25rem; border-top: 1px solid var(--siimt-pp-rule); }
.siimt-pp-formpage__aside .siimt-pp-eyebrow { margin-top: 1.5rem; }
.siimt-pp-formpage__aside .siimt-pp-eyebrow:first-child { margin-top: 1.25rem; }
.siimt-pp-formpage__aside .siimt-pp-note { margin-top: .5rem; }
.siimt-pp-formpage__aside .siimt-pp-checklist { margin-top: .5rem; }
.siimt-pp-formpage__aside .siimt-pp-checklist li { font-size: .9rem; padding-block: .55rem; }
.siimt-pp-formpage__aside a { color: var(--wp--preset--color--navy); }
.siimt-pp-lean { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.siimt-pp-lean .siimt-verify { margin-inline: 0; }
@media (max-width: 900px) {
.siimt-pp-gallery li { flex-basis: calc(var(--ar, 1.5) * 190px); }
.siimt-pp-prose__figure img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
.siimt-pp-gallery { gap: 4px; }
.siimt-pp-gallery li { flex-basis: calc(var(--ar, 1.5) * 150px); }
}
/* Programme pages: links get a 24px-tall box. */
.siimt-pp-link { padding-block: .25rem; margin-block: -.25rem; background-position: 0 calc(100% - .25rem); }
/* Careers pay table (2026-10-11): role, starting and experienced pay in Ghana cedis.
"Reached with experience" sits under manager/architect titles; "from GHC X" rows
(low-confidence roles) span both pay columns in the muted mono face. */
.siimt-pp-pay tbody th { width: 40%; }
/* Course image under the Overview text (2026-10-25): 3:2, square corners, no frame, like the other premium photos. */
.siimt-pp-course-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 2rem 0 0; }
.siimt-pp-pay__note { display: block; margin-top: .25rem; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--siimt-pp-muted); }
/* Starts under "Starting", not right-aligned under "Experienced", so it reads as starting pay. */
.siimt-pp-table.siimt-pp-pay td.siimt-pp-pay__from:last-child { text-align: left; color: var(--wp--preset--color--navy); font-weight: 600; }
.siimt-pp-results__pager a, .siimt-pp-results__pager .page-numbers { display: inline-block; padding: .4rem .5rem; margin: -.4rem 0; }
/* 2026-10-03 QA: long bracketed titles wrap instead of overflowing; footer and article-crumb links get 24px targets. */
.siimt-pp-hero__title { overflow-wrap: break-word; }
.siimt-footer .wp-block-navigation .wp-block-navigation-item__content { display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
.siimt-article-crumb a { display: inline-flex; align-items: center; padding-block: .35rem; margin-block: -.35rem; }
.siimt-pp-crumb, .siimt-pp-hero__lead { overflow-wrap: anywhere; }
/* 2026-10-25: words in the hero ledger and title split mid-word ("Tuitio / n only") because
"anywhere" lets the browser break at any letter. Words now break only if nothing else fits,
and the ledger and title are sized so they do fit. */
.siimt-pp-ledger dd { overflow-wrap: break-word; }
.siimt-pp-ledger__sub { display: inline-block; margin-left: .3em; line-height: 1.45; }
@media (min-width: 901px) {
/* The split hero's text column is about 520px wide: four ledger cells are too narrow, so two rows of two. */
.siimt-pp-hero:not(.siimt-pp-hero--text) .siimt-pp-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-hero:not(.siimt-pp-hero--text) .siimt-pp-ledger > div:nth-child(3) { padding-left: 0; border-left: 0; }
.siimt-pp-hero:not(.siimt-pp-hero--text) .siimt-pp-ledger > div:nth-child(n+3) { margin-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
.siimt-pp-hero:not(.siimt-pp-hero--text) .siimt-pp-hero__title { font-size: clamp(2.75rem, 4.4vw, 4.25rem); }
}
@media (max-width: 420px) {
.siimt-pp-ledger dd { font-size: 1.3rem; }
.siimt-pp-hero__title { font-size: 2.35rem; }
}
/* Hero ledgers that hold phone numbers, opening hours or an email (Contact, E-Library), class
siimt-pp-hero--fit, v1.61.0. In four equal cells "057 644 4457" and "9 – 6" broke across two
lines and the email had been cut to "info@". On wide screens the cells now size to their
content and values never wrap; on tablets the ledger is two columns; on phones the usual
rules apply and the non-breaking spaces in the values (patterns) keep each number whole. */
@media (min-width: 1081px) {
.siimt-pp-hero--fit .siimt-pp-ledger { max-width: 72rem; grid-template-columns: repeat(4, auto); }
.siimt-pp-hero--fit .siimt-pp-ledger dd { white-space: nowrap; }
}
@media (min-width: 601px) and (max-width: 1080px) {
.siimt-pp-hero--fit .siimt-pp-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.siimt-pp-hero--fit .siimt-pp-ledger > div:nth-child(3) { padding-left: 0; border-left: 0; }
.siimt-pp-hero--fit .siimt-pp-ledger > div:nth-child(n+3) { margin-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
}
.siimt-pp-ledger__email { font-size: .62em; letter-spacing: -.01em; }
@media (max-width: 600px) {
/* On phones the email gets a full row, so it never has to break inside the address. */
.siimt-pp-ledger > div:has(.siimt-pp-ledger__email) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.siimt-pp-ledger__email { font-size: .8em; }
}
.siimt-pp-hero__text { min-width: 0; }
.wp-block-post-terms a { display: inline-block; padding-block: .35rem; margin-block: -.35rem; }
/* Finder search field: an explicit ring on keyboard focus (the quiet variant only recoloured the hairline). */
.siimt-pf__search input:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
/* --- Header, option A "refined" (v1.64.0; preview: _work/qa-scripts/previews/header-options.png) --------
The dark top bar's bold links were louder than the main menu. Now: a quieter top bar, a bigger navy
main menu with a teal underline on hover and on the current page, a round search button and a pill
Apply button. CSS only; no markup change. */
.siimt-utility { padding-block: .25rem !important; }
.siimt-utility .wp-block-navigation-item__content { font-size: .78rem; font-weight: 500; letter-spacing: .02em; padding-block: .3rem; } /* 24px tap height */
.siimt-utility a { color: #AFC6DE !important; }
.siimt-utility a:hover { color: #fff !important; }
.siimt-utility .siimt-audience .wp-block-navigation-item + .wp-block-navigation-item::before,
.siimt-utility .siimt-tools .wp-block-navigation-item + .wp-block-navigation-item::before { content: ""; width: 1px; height: .8rem; background: rgba(255,255,255,.22); margin-right: 1.25rem; display: inline-block; vertical-align: middle; }
.siimt-utility .siimt-audience, .siimt-utility .siimt-tools { gap: 1.25rem !important; }
@media (min-width: 1000px) { .siimt-nav { padding-block: 1rem !important; } }
@media (min-width: 1280px) { .siimt-nav .wp-block-site-logo img { width: 216px !important; } }
.siimt-primary .wp-block-navigation__container { gap: .4rem !important; }
.siimt-primary .wp-block-navigation-item__content { text-decoration: none !important; position: relative; padding: .55rem .85rem !important; border-radius: 6px; font-size: 1rem; font-weight: 550; letter-spacing: -.005em; color: var(--wp--preset--color--navy) !important; transition: background .2s, color .2s; }
.siimt-primary .wp-block-navigation-item__content::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px; background: var(--wp--preset--color--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
/* 1000-1279px: a compact menu, so the search and Apply buttons stay on the logo's row (the roomy menu
wrapped them onto a second row at 1024px, a 212px-tall header). */
@media (min-width: 1000px) and (max-width: 1279px) {
.siimt-primary .wp-block-navigation__container { gap: .1rem !important; }
.siimt-primary .wp-block-navigation-item__content { padding: .5rem .6rem !important; font-size: .95rem; }
.siimt-primary .wp-block-navigation-item__content::after { left: .6rem; right: .6rem; }
}
/* 1000-1099px (about 950-1050px of room): tighter still. */
@media (min-width: 1000px) and (max-width: 1099px) {
.siimt-nav .wp-block-site-logo img { width: 176px !important; }
.siimt-primary .wp-block-navigation__container { gap: 0 !important; }
.siimt-primary .wp-block-navigation-item__content { padding: .5rem .42rem !important; font-size: .9rem; }
.siimt-primary .wp-block-navigation-item__content::after { left: .42rem; right: .42rem; }
.siimt-nav .wp-block-button.is-style-siimt-navy > .wp-block-button__link { padding: .7rem 1.1rem !important; }
}
.siimt-primary .wp-block-navigation-item__content:hover { background: #F1F5FA; }
.siimt-primary .wp-block-navigation-item__content:hover::after,
.siimt-primary .siimt-nav-current > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.siimt-primary .siimt-nav-current > .wp-block-navigation-item__content { box-shadow: none !important; }
.siimt-search__toggle { width: 44px; height: 44px; border-radius: 50% !important; }
.siimt-nav .wp-block-button.is-style-siimt-navy > .wp-block-button__link { border-radius: 999px !important; padding: .8rem 1.4rem !important; box-shadow: 0 6px 16px -6px rgba(11,45,91,.45); }
.siimt-header { border-bottom-color: transparent !important; box-shadow: 0 1px 0 #E3EAF2; }