/* ===================================================================== LEAD BY HTI — page motion & interaction layer --------------------------------------------------------------------- Pairs with assets/lead.js. Everything here is decoration on top of markup that is already complete and readable without it: each element below is fully visible by default, and only becomes animatable once lead.js adds .lead-mo to . That ordering is deliberate — if the script fails or is blocked, nothing is left stuck at opacity:0. Honours prefers-reduced-motion by simply never arming the animations. ===================================================================== */ /* ---------- scroll reveal (armed by lead.js) ---------- */ .lead-mo .lead-rv { opacity: 0; transform: translateY(22px); transition: opacity .62s cubic-bezier(.22, .61, .36, 1), transform .62s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--lead-d, 0ms); will-change: opacity, transform; } .lead-mo .lead-rv.in { opacity: 1; transform: none; } /* ---------- programme cards ---------- */ .prog-card { position: relative; overflow: hidden; } /* a soft sheen that sweeps across on hover */ .prog-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(227, 33, 41, .07), transparent); transform: skewX(-16deg); transition: left .55s ease; pointer-events: none; } .prog-card:hover::after { left: 115%; } .prog-card .go .arr, .prog-card .go::after { display: inline-block; transition: transform .2s ease; } .prog-card:hover .go::after { transform: translateX(5px); } /* ---------- curriculum list ---------- */ .cover-list li { transition: transform .22s ease, background .22s ease; border-radius: 12px; } .cover-list li:hover { transform: translateX(6px); } .cover-list li:hover .cv-num { color: var(--hti-red, #e32129); transform: scale(1.08); } .cover-list .cv-num { transition: color .22s ease, transform .22s ease; } /* ---------- animated stat counters ---------- */ .stat h3[data-count], .cv-count { font-variant-numeric: tabular-nums; } /* ---------- photo gallery band ---------- */ .lead-gallery { padding: 74px 0 80px; background: #0d0d0d; color: #fff; overflow: hidden; } .lead-gallery .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .lead-gallery-head { text-align: center; max-width: 720px; margin: 0 auto 40px; } .lead-gallery-head h2 { font-size: clamp(27px, 4vw, 40px); margin-bottom: 13px; } .lead-gallery-head p { font-size: 16.5px; line-height: 1.65; color: #b6b6b6; } .lead-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .lead-grid figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #1a1a1a; } /* the first tile spans two columns and two rows so the grid is not a flat row of identical thumbnails */ .lead-grid figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .lead-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .lead-grid figure:hover img { transform: scale(1.06); } .lead-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent); transform: translateY(6px); opacity: .9; transition: transform .3s ease, opacity .3s ease; } .lead-grid figure:hover figcaption { transform: none; opacity: 1; } .lead-gallery-cta { text-align: center; margin-top: 38px; } /* ---------- section CTA (used site-wide) ---------- */ .sec-cta { text-align: center; margin-top: 38px; } .sec-cta .btn-red, .sec-cta .cta-btn { display: inline-flex; } @media(max-width:900px) { .lead-grid { grid-template-columns: repeat(2, 1fr); } .lead-grid figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; } } @media(max-width:560px) { .lead-gallery { padding: 54px 0 58px; } .lead-grid { grid-template-columns: 1fr; gap: 11px; } .lead-grid figure:first-child { grid-column: auto; } .lead-grid figcaption { font-size: 12.5px; } } /* Someone who asks for less motion gets the finished page, immediately. */ @media (prefers-reduced-motion: reduce) { .lead-mo .lead-rv, .prog-card::after, .lead-grid img, .lead-grid figcaption { transition: none !important; opacity: 1; transform: none; } }