/* =========================================================== Sky Mentors Academy - homepage styles Layered on top of Bootstrap 5.3. Brand tokens taken from the official logo: navy #003399, orange #f67801. =========================================================== */ :root { --navy: #003399; --navy-deep: #002471; --navy-ink: #0a1633; /* Brand orange from the logo. The bright tone only reaches 2.76:1 against white, so text and text-bearing buttons use --orange-ink (4.95:1, AA). */ --orange: #f67801; --orange-ink: #b85200; --orange-soft: #ff9426; --ink: #111a2e; --body: #4a5468; --line: #e3e7ef; --surface: #ffffff; --surface-2: #f4f6fb; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 2px 10px rgba(0, 51, 153, .06); --shadow-md: 0 14px 40px rgba(0, 51, 153, .10); --shadow-lg: 0 28px 70px rgba(0, 51, 153, .16); --nav-h: 76px; /* Bootstrap token overrides so BS components inherit the brand */ --bs-primary: #003399; --bs-body-color: #4a5468; --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bs-link-color-rgb: 0, 51, 153; --bs-border-radius: var(--radius); } /* ---------- base ---------- */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); /* `clip` contains the off-screen offcanvas without creating a scroll container, so position:sticky keeps working. `hidden` would break it. */ overflow-x: clip; } body { font-family: var(--bs-body-font-family); color: var(--body); background: var(--surface); /* No overflow-x here. Setting it makes a scroll container, which breaks position:sticky for descendants. Horizontal overflow is clipped on instead. */ -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .display-brand { color: var(--ink); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; } section { position: relative; overflow: hidden; } .section-pad { padding: 50px 0; } .lede { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.7; max-width: 62ch; } /* ---------- service page: collapsible section intro ---------------------- Client request: the paragraph under each H2 should show one line by default, both on mobile and desktop, with a "Read more" toggle to reveal the rest. Scoped to this page only (.lede is used site-wide and should keep showing in full everywhere else). */ .lede-collapsible { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .lede-collapsible.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .lede-toggle { display: inline-block; margin-top: .35rem; background: none; border: 0; padding: 0; font-size: .85rem; font-weight: 700; color: var(--orange-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .lede-toggle:hover, .lede-toggle:focus-visible { color: var(--orange); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange-ink); border-radius: 2px; } .text-navy { color: var(--navy) !important; } .text-orange { color: var(--orange-ink) !important; } .bg-tint { background: var(--surface-2); } /* one accent, used everywhere a word needs lifting */ .hl { color: var(--orange-ink); } /* ---------- buttons ---------- */ .btn { --bs-btn-font-weight: 700; border-radius: 999px; padding: .82rem 1.6rem; font-size: .95rem; white-space: nowrap; transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s, background-color .18s, color .18s; } .btn:active { transform: scale(.98); } .btn-brand { background: var(--orange-ink); border: 1px solid var(--orange-ink); color: #ffffff; box-shadow: 0 10px 26px rgba(184, 82, 0, .26); } .btn-brand:hover, .btn-brand:focus-visible { background: #9c4500; border-color: #9c4500; color: #ffffff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(184, 82, 0, .32); } .btn-navy { background: var(--navy); border: 1px solid var(--navy); color: #ffffff; } .btn-navy:hover, .btn-navy:focus-visible { background: var(--navy-deep); border-color: var(--navy-deep); color: #ffffff; transform: translateY(-2px); } /* ghost sits on photography, so it carries its own scrim */ .btn-ghost { background: rgba(10, 22, 51, .42); border: 1px solid rgba(255, 255, 255, .72); color: #ffffff; backdrop-filter: blur(8px); } .btn-ghost:hover, .btn-ghost:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--navy); transform: translateY(-2px); } .btn-outline-navy { background: transparent; border: 1px solid rgba(0, 51, 153, .28); color: var(--navy); } .btn-outline-navy:hover, .btn-outline-navy:focus-visible { background: var(--navy); border-color: var(--navy); color: #ffffff; } :where(a, button, summary, input, .accordion-button):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; } /* ---------- top bar + nav ---------- */ .utility-bar { background: var(--navy-ink); color: rgba(255, 255, 255, .82); font-size: .8rem; } .utility-bar a { color: rgba(255, 255, 255, .82); text-decoration: none; } .utility-bar a:hover { color: #ffffff; } .site-nav { /* min-height, not height: the offcanvas is a child of this element, so a hard height would clip the mobile menu to the navbar's own 76px */ min-height: var(--nav-h); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .25s, background-color .25s; } .site-nav.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, .98); } .site-nav .navbar-brand img { height: 46px; width: auto; } .site-nav .nav-link { color: var(--ink); font-weight: 600; font-size: .93rem; padding: .5rem .8rem; position: relative; } .site-nav .nav-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .28rem; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.16, 1, .3, 1); } .site-nav .nav-link:hover::after, .site-nav .nav-link:focus-visible::after { transform: scaleX(1); } /* Login points at the external learning portal, so it carries an outbound mark */ .ext-icon { opacity: .55; margin-left: .18rem; vertical-align: baseline; } .site-nav .nav-link:hover .ext-icon { opacity: 1; } /* the nav is dense at 8 items, so tighten spacing before it can wrap */ @media (min-width: 992px) and (max-width: 1399.98px) { .site-nav .nav-link { padding-left: .55rem; padding-right: .55rem; font-size: .88rem; } .site-nav .nav-link::after { left: .55rem; right: .55rem; } } .dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .5rem; min-width: 260px; } /* Open the Courses menu on hover at desktop. Bootstrap is click-only by default; the click handler still works and keyboard focus is unaffected. */ @media (min-width: 992px) { .site-nav .dropdown-menu { display: block; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s; margin-top: 0; pointer-events: none; } .site-nav .nav-item.dropdown:hover > .dropdown-menu, .site-nav .nav-item.dropdown:focus-within > .dropdown-menu, .site-nav .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* bridges the gap between the trigger and the panel so hover does not drop */ .site-nav .nav-item.dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* the caret turns as the panel opens */ .site-nav .dropdown-toggle::after { transition: transform .22s ease; } .site-nav .nav-item.dropdown:hover > .dropdown-toggle::after { transform: rotate(180deg); } /* keep the trigger underline lit while the panel is open */ .site-nav .nav-item.dropdown:hover > .nav-link::after { transform: scaleX(1); } } /* Nav links sit centred between the logo and the action buttons at desktop. The offcanvas body must be a flex row for mx-auto to have room to work. */ @media (min-width: 992px) { .site-nav .offcanvas-body { display: flex; flex-direction: row; align-items: center; width: 100%; } } /* The closed offcanvas is translated off-screen but still measurable, so the nav must clip it or the page reports horizontal overflow on mobile. */ @media (max-width: 991.98px) { .site-nav { overflow-x: clip; } } /* ---------- mobile offcanvas menu ---------- */ /* Bootstrap's navbar offcanvas needs an explicit column layout below lg or the body collapses to zero height and the links render invisibly. */ @media (max-width: 991.98px) { /* The offcanvas is fixed-position but nested inside the sticky navbar, whose box is only ~76px tall. Pinning it to the viewport with explicit inset values detaches it from that box so it can fill the screen. */ .site-nav .offcanvas { flex-direction: column; position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0; left: auto; height: 100dvh !important; max-height: 100dvh; width: min(86vw, 340px); z-index: 1045; } /* only the open panel becomes a flex column; closed stays display:none */ .site-nav .offcanvas.show, .site-nav .offcanvas.showing { display: flex !important; } .site-nav .offcanvas-body { display: flex; flex-direction: column; flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; } .site-nav .offcanvas-body .navbar-nav { width: 100%; } .site-nav .nav-link { padding: .8rem .25rem; font-size: 1rem; border-bottom: 1px solid var(--line); } .site-nav .nav-link::after { display: none; } /* submenus render inline on mobile rather than as floating panels */ .site-nav .dropdown-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 .5rem .75rem; margin: 0; background: transparent; } .site-nav .dropdown-item { padding: .6rem .25rem; font-size: .93rem; border-bottom: 1px solid var(--line); border-radius: 0; } .site-nav .dropdown-item:last-child { border-bottom: 0; } .site-nav .dropdown-toggle::after { float: right; margin-top: .55rem; } .site-nav .offcanvas-body .btn { width: 100%; } } .dropdown-item { border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; padding: .6rem .8rem; color: var(--ink); transition: background-color .18s, color .18s, padding-left .18s; } .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--navy); padding-left: 1.1rem; } /* ---------- hero: full-bleed brand film ---------- */ .hero { position: relative; min-height: min(calc(100dvh - var(--nav-h)), 760px); display: flex; align-items: center; padding: clamp(3rem, 6vw, 5rem) 0; background: #cfe6f5; /* sky tone, shows while the video decodes */ overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; } /* Left-weighted scrim. The illustrated sky is very light, so the navy headline needs this to clear WCAG AA over the video. */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(238, 244, 252, .96) 0%, rgba(238, 244, 252, .90) 28%, rgba(238, 244, 252, .55) 50%, rgba(238, 244, 252, .06) 72%, rgba(238, 244, 252, 0) 100%); } .hero-inner { position: relative; z-index: 1; } /* The hero eyebrow sits over video, so it takes the darkest brand tone to stay above 4.5:1 regardless of the frame behind it. */ .hero .eyebrow { color: #8f4000; } .hero .eyebrow::before { background: #8f4000; } /* reusable contained image frame */ .media-frame { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: #dfe5f2; } .media-frame.ratio-4x3 { aspect-ratio: 4 / 3; } .media-frame.ratio-3x4 { aspect-ratio: 3 / 4; } .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero-title { font-size: clamp(2.5rem, 5.4vw, 4.2rem); line-height: 1.06; letter-spacing: -.035em; color: var(--navy); } .hero-sub { font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.65; max-width: 46ch; color: #2c3550; font-weight: 500; } /* ---------- floating brand elements (3D plane + soft shapes) ---------- */ .bg-el { position: absolute; pointer-events: none; user-select: none; z-index: 0; opacity: .5; } .bg-el img { width: 100%; height: auto; display: block; } .bg-plane-a { width: clamp(160px, 20vw, 300px); top: 8%; right: -3%; transform: rotate(-8deg); animation: drift 14s ease-in-out infinite; } .bg-plane-b { width: clamp(130px, 15vw, 220px); bottom: 6%; left: -4%; transform: scaleX(-1) rotate(6deg); animation: drift 18s ease-in-out infinite reverse; opacity: .35; } .bg-shape { width: clamp(220px, 30vw, 460px); opacity: .5; } @keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: -18px -22px; } } @media (prefers-reduced-motion: reduce) { .bg-plane-a, .bg-plane-b { animation: none; } } /* ---------- inner page header ---------- */ .page-head { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem); background: linear-gradient(120deg, var(--navy-ink) 0%, var(--navy) 62%, var(--navy-deep) 100%); color: #ffffff; isolation: isolate; } .page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../img/page-header.jpg"); background-size: cover; background-position: center; opacity: .17; } .page-head h1 { color: #ffffff; font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .75rem; } .page-head p { color: rgba(255, 255, 255, .85); max-width: 62ch; margin: 0; font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.7; } .page-head .breadcrumb { margin: 0 0 1rem; --bs-breadcrumb-divider-color: rgba(255,255,255,.5); } .page-head .breadcrumb a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .88rem; } .page-head .breadcrumb a:hover { color: #ffffff; } .page-head .breadcrumb-item.active { color: var(--orange-soft); font-size: .88rem; font-weight: 600; } .page-head .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); } /* ---------- prose blocks for content pages ---------- */ .prose p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.05rem; max-width: 68ch; } .prose p:last-child { margin-bottom: 0; } /* numbered value list used on About and SMA Edge */ .value-row { display: flex; gap: 1.1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); } .value-row:last-child { border-bottom: 0; } .value-num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 51, 153, .07); color: var(--navy); font-weight: 800; font-size: .95rem; display: grid; place-items: center; } .value-row h3 { font-size: 1.04rem; margin-bottom: .3rem; } .value-row p { font-size: .93rem; line-height: 1.65; margin: 0; } /* gap / problem callout (SMA Edge) */ .gap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; } .gap-list li { display: flex; gap: .7rem; align-items: flex-start; background: #ffffff; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .94rem; color: var(--ink); font-weight: 500; } /* ---------- blog ---------- */ .post-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .post-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #dfe5f2; } .post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .post-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; } .post-cat { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: .5rem; } .post-card h3 { font-size: 1.08rem; line-height: 1.35; margin-bottom: .5rem; } .post-card h3 a { color: inherit; text-decoration: none; } .post-card h3 a:hover { color: var(--navy); } .post-card p { font-size: .9rem; line-height: 1.6; margin-bottom: 1rem; } .post-meta { margin-top: auto; font-size: .8rem; color: #5b6478; display: flex; gap: .5rem; align-items: center; padding-top: .9rem; border-top: 1px solid var(--line); } /* featured post */ .post-feature { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; padding: 2rem; color: #ffffff; isolation: isolate; } .post-feature img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .post-feature::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(4,12,32,.95) 0%, rgba(4,12,32,.86) 30%, rgba(4,12,32,.34) 62%, rgba(4,12,32,0) 88%); } .post-feature > div { position: relative; z-index: 2; max-width: 62ch; } .post-feature h2 { color: #ffffff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .6rem; } .post-feature h2 a { color: inherit; text-decoration: none; } .post-feature p { color: rgba(255,255,255,.88); font-size: .95rem; margin-bottom: .8rem; } .post-feature .post-meta { color: rgba(255,255,255,.75); border-top-color: rgba(255,255,255,.2); } /* ---------- article (blog detail) ---------- */ .article-body { font-size: 1.04rem; line-height: 1.8; color: #3b4457; } .article-body > p { margin-bottom: 1.3rem; max-width: 72ch; } .article-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 2.4rem 0 .9rem; scroll-margin-top: calc(var(--nav-h) + 20px); } .article-body h3 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; } .article-body ul, .article-body ol { margin: 0 0 1.3rem; padding-left: 1.2rem; max-width: 72ch; } .article-body li { margin-bottom: .5rem; } .article-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } .article-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.5rem 0; } .article-body blockquote { margin: 1.6rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--orange); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1rem; } .article-body blockquote p:last-child { margin-bottom: 0; } .article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; } .article-body th, .article-body td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); } .article-body thead th { background: var(--surface-2); font-weight: 700; color: var(--ink); } .article-lead { font-size: 1.14rem; line-height: 1.75; color: var(--ink); font-weight: 500; margin-bottom: 1.6rem; max-width: 72ch; } /* table of contents: strong SEO + usability signal on long posts */ .toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 2rem; } .toc h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .8rem; color: var(--ink); } .toc ol { margin: 0; padding-left: 1.1rem; } .toc li { margin-bottom: .45rem; font-size: .94rem; } .toc a { color: var(--navy); text-decoration: none; } .toc a:hover { text-decoration: underline; } .article-aside { position: sticky; top: calc(var(--nav-h) + 20px); } .aside-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1.25rem; } .aside-card h3 { font-size: 1rem; margin-bottom: .7rem; } .aside-card p { font-size: .9rem; line-height: 1.6; margin-bottom: 1rem; } .aside-list { list-style: none; padding: 0; margin: 0; } .aside-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.45; } .aside-list li:last-child { border-bottom: 0; } .aside-list a { color: var(--ink); text-decoration: none; font-weight: 600; } .aside-list a:hover { color: var(--navy); } .share-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .share-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--navy); border: 1px solid var(--line); transition: background .2s, color .2s, transform .2s; } .share-btn:hover { background: var(--navy); color: #ffffff; transform: translateY(-2px); } .author-box { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--surface-2); border-radius: var(--radius); padding: 1.4rem; margin-top: 2.5rem; } .author-box img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: center top; flex: 0 0 auto; background: #dfe5f2; } .author-box h3 { font-size: 1rem; margin-bottom: .15rem; } .author-box img { transition: opacity .2s; } .author-box a:hover img { opacity: .85; } /* author byline and name link to the author page */ .author-link { color: inherit; text-decoration: none; } .author-link:hover, .author-link:focus-visible { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } .post-meta .author-link { color: inherit; } .author-box .author-role { font-size: .82rem; color: var(--orange-ink); font-weight: 700; margin-bottom: .5rem; } .author-box p { font-size: .9rem; line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .article-aside { position: static; } .post-feature { min-height: 340px; padding: 1.5rem; } } /* ---------- horizontal accordion ---------- */ .hacc { display: flex; gap: .6rem; height: 460px; border-radius: 20px; overflow: hidden; } .hacc-panel { position: relative; flex: 0 0 96px; border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--navy); color: #ffffff; text-align: left; cursor: pointer; transition: flex-grow .6s cubic-bezier(.16,1,.3,1), flex-basis .6s cubic-bezier(.16,1,.3,1); } .hacc-panel.is-open { flex: 1 1 auto; cursor: default; } /* alternate the closed panel tones so the strip reads as separate cards */ .hacc-panel:nth-child(even) { background: var(--navy-deep); } .hacc-panel:nth-child(3n) { background: var(--orange-ink); } .hacc-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; } .hacc-panel.is-open img { opacity: .32; } .hacc-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(4,12,32,.86) 0%, rgba(4,12,32,.5) 60%, rgba(4,12,32,.24) 100%); opacity: 0; transition: opacity .6s ease; } .hacc-panel.is-open::after { opacity: 1; } /* the vertical label on a collapsed panel */ .hacc-label { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; z-index: 2; transition: opacity .35s ease; } .hacc-panel.is-open .hacc-label { opacity: 0; pointer-events: none; } .hacc-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 3vw, 2.6rem); opacity: 0; transform: translateY(12px); transition: opacity .45s ease .15s, transform .45s cubic-bezier(.16,1,.3,1) .15s; pointer-events: none; } .hacc-panel.is-open .hacc-content { opacity: 1; transform: none; pointer-events: auto; } .hacc-h { display: block; color: #ffffff; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: .8rem; max-width: 22ch; } .hacc-p { display: block; color: rgba(255,255,255,.9); font-size: .98rem; line-height: 1.7; max-width: 52ch; } .hacc-n { display: block; } .hacc-n { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-soft); margin-bottom: .5rem; } @media (max-width: 991.98px) { /* stack vertically: collapsed rows stay compact, the open one grows to fit */ .hacc { flex-direction: column; height: auto; gap: .55rem; border-radius: 0; } .hacc-panel { flex: 0 0 auto; height: 62px; min-height: 0; border-radius: 12px; transition: height .45s cubic-bezier(.16,1,.3,1); } .hacc-panel.is-open { height: auto; min-height: 0; } .hacc-panel.is-open img { opacity: .22; } .hacc-label { writing-mode: horizontal-tb; transform: none; left: 1.2rem; right: 3rem; bottom: auto; top: 50%; margin-top: -.65rem; font-size: .95rem; white-space: normal; line-height: 1.3; } /* a chevron shows these rows are tappable */ .hacc-panel::before { content: ""; position: absolute; right: 1.2rem; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid rgba(255,255,255,.75); border-bottom: 2px solid rgba(255,255,255,.75); transform: rotate(45deg); transition: transform .35s ease, opacity .3s ease; z-index: 3; } .hacc-panel.is-open::before { transform: rotate(-135deg); margin-top: -2px; } .hacc-content { padding: 1.15rem 1.2rem 1.35rem; justify-content: flex-start; height: auto; } .hacc-panel.is-open .hacc-content { padding-top: .4rem; } .hacc-h { font-size: 1.08rem; margin-bottom: .5rem; } .hacc-p { font-size: .92rem; line-height: 1.6; } } @media (prefers-reduced-motion: reduce) { .hacc-panel, .hacc-content, .hacc-panel img, .hacc-panel::after { transition: none; } } /* ---------- achievement stats ---------- */ .stats-band { background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 62%, var(--navy-deep) 100%); padding: clamp(2.5rem, 5vw, 3.5rem) 0; position: relative; overflow: hidden; } .stats-band::after { content: ""; position: absolute; right: -4%; bottom: -40%; width: min(46vw, 460px); aspect-ratio: 1; background: radial-gradient(circle, rgba(255,255,255,.07), transparent 62%); pointer-events: none; } .stats-grid { position: relative; display: grid; /* All six stats sit on a single row. The 0 floor in minmax lets a column shrink narrower than its longest word instead of wrapping to a new row. */ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; justify-items: center; } .stat { text-align: center; padding: .5rem .75rem; } .stat + .stat { border-left: 1px solid rgba(255,255,255,.14); } .stat-n { display: block; /* sized for a seventh of the container: "9,000+" and "15-20" are the widest values and must not overflow their column */ font-size: clamp(1.35rem, 2.3vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: #ffffff; font-variant-numeric: tabular-nums; } .stat-l { display: block; margin-top: .5rem; font-size: .78rem; /* long labels break mid-word rather than widening the column */ overflow-wrap: break-word; font-weight: 600; line-height: 1.4; color: var(--orange-soft); } /* between tablet and full desktop the row gets tight, so scale it down rather than letting a column wrap */ @media (min-width: 992px) and (max-width: 1399.98px) { .stats-grid { gap: .5rem; } .stat { padding: .5rem .35rem; } } @media (max-width: 991.98px) { /* Six across is unreadable on a tablet. Three columns splits 6 into two even rows of three. */ .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem .5rem; } .stat:nth-child(3n+1) { border-left: 0; } } @media (max-width: 575.98px) { /* Two columns divides 6 into three even rows. */ .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat { border-left: 0 !important; } .stat-l { font-size: .78rem; } } /* ---------- training duration and schedule ---------- */ .sched-card { height: 100%; background: #ffffff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--radius); padding: 1.5rem; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; } .sched-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .sched-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: .7rem; } .sched-dur { font-size: 1.6rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 1rem; } .sched-dur small { font-size: .92rem; font-weight: 700; color: var(--body); } .sched-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .sched-list li { position: relative; padding-left: 1.25rem; font-size: .9rem; line-height: 1.55; color: var(--body); } .sched-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); } .sched-note { font-size: .95rem; color: var(--body); padding: 1rem 1.25rem; background: var(--surface-2); border-radius: var(--radius-sm); } /* ---------- enquiry modal ---------- */ .enquiry-modal { border: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); } .enquiry-close { position: absolute; top: 1rem; right: 1rem; z-index: 5; background-color: rgba(255,255,255,.9); border-radius: 50%; padding: .6rem; opacity: 1; } .enquiry-close:hover { background-color: #ffffff; } .enquiry-aside { position: relative; min-height: 100%; background: var(--navy-ink); isolation: isolate; } .enquiry-aside img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; } .enquiry-aside::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(0,51,153,.86) 0%, rgba(4,12,32,.92) 100%); } .enquiry-aside-body { position: relative; z-index: 2; padding: 2rem 1.75rem; color: #ffffff; height: 100%; display: flex; flex-direction: column; justify-content: center; } .enquiry-aside-body h3 { color: #ffffff; font-size: 1.3rem; margin-bottom: .7rem; } .enquiry-aside-body p { color: rgba(255,255,255,.86); font-size: .93rem; line-height: 1.65; margin-bottom: 1.1rem; } .enquiry-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .enquiry-points li { position: relative; padding-left: 1.4rem; font-size: .89rem; color: rgba(255,255,255,.92); } .enquiry-points li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-soft); } .enquiry-form-wrap { padding: clamp(1.5rem, 3vw, 2.25rem); } .enquiry-form-wrap .modal-title { font-size: 1.4rem; margin-bottom: .35rem; } .enquiry-sub { font-size: .93rem; color: var(--body); margin-bottom: 1.25rem; } /* --- eligibility CTA at the end of the roadmap ----------------------------- */ .eligibility-cta { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius, 14px); background: #ffffff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .eligibility-cta h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 .35rem; } .eligibility-cta p { margin: 0; max-width: 62ch; font-size: .94rem; } .eligibility-cta .btn { flex: 0 0 auto; } @media (max-width: 575.98px) { .eligibility-cta { flex-direction: column; align-items: flex-start; } .eligibility-cta .btn { width: 100%; } } /* --- callback popup: extra fields ----------------------------------------- */ /* the modal has a lot of fields now, so let the form area scroll rather than pushing the dialog past the bottom of the viewport */ .enquiry-form-wrap { max-height: 88vh; overflow-y: auto; /* thin, branded scrollbar instead of the browser's bulky default grey one */ scrollbar-width: thin; scrollbar-color: var(--navy) var(--surface-2, #f4f6fb); } .enquiry-form-wrap::-webkit-scrollbar { width: 7px; } .enquiry-form-wrap::-webkit-scrollbar-track { background: var(--surface-2, #f4f6fb); } .enquiry-form-wrap::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 99px; } .enquiry-form-wrap::-webkit-scrollbar-thumb:hover { background: var(--navy-deep); } .enquiry-form-wrap .form-label { font-size: .84rem; font-weight: 600; margin-bottom: .25rem; } .enquiry-form-wrap .req { color: #c0392b; } /* fixed-width dial code so the number field keeps the remaining space */ .dial-code { max-width: 88px; flex: 0 0 88px; } /* captcha image and its refresh button sit on one line */ .captcha-row { display: flex; align-items: center; gap: .5rem; } .captcha-row img { border: 1px solid var(--line, #dfe4ee); border-radius: 8px; background: #fff; max-width: 100%; height: auto; } .captcha-refresh { border: 1px solid var(--line, #dfe4ee); background: #fff; border-radius: 8px; width: 38px; height: 38px; font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--navy, #003399); flex: 0 0 auto; } .captcha-refresh:hover { background: #f2f5fc; } .consent-check .form-check-label { font-size: .86rem; line-height: 1.45; } /* Bootstrap only reveals .invalid-feedback next to an .is-invalid sibling, and a checkbox needs it forced to block inside the form-check wrapper */ .consent-check .form-check-input.is-invalid ~ .invalid-feedback { display: block; } @media (max-width: 575.98px) { .enquiry-form-wrap { max-height: none; } .captcha-row img { width: 130px; } } @media (max-width: 767.98px) { /* the photo panel would push the form below the fold on a phone */ .enquiry-aside { display: none; } } /* ---------- sticky timeline ---------- */ .tl { position: relative; padding-left: 4.5rem; } /* the spine, with a fill that tracks reading progress */ .tl-progress { position: absolute; left: 21px; top: 12px; bottom: 12px; width: 3px; background: var(--line); border-radius: 99px; } .tl-progress-fill { display: block; width: 100%; height: 0; background: linear-gradient(to bottom, var(--navy), var(--orange)); border-radius: 99px; transition: height .5s cubic-bezier(.16,1,.3,1); } .tl-item { position: relative; padding-bottom: 2rem; } .tl-item:last-child { padding-bottom: 0; } .tl-marker { position: absolute; left: -4.5rem; top: 6px; width: 46px; height: 46px; border-radius: 50%; background: #ffffff; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: var(--body); z-index: 2; transition: all .45s cubic-bezier(.16,1,.3,1); } .tl-item.is-done .tl-marker { border-color: var(--navy); color: var(--navy); } .tl-item.is-active .tl-marker { background: var(--navy); border-color: var(--navy); color: #ffffff; transform: scale(1.12); box-shadow: 0 8px 22px rgba(0,51,153,.3); } .tl-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; opacity: .6; transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease, box-shadow .45s ease; } .tl-item.is-active .tl-card { opacity: 1; transform: translateX(6px); border-color: rgba(0,51,153,.3); box-shadow: var(--shadow-md); } .tl-item.is-done .tl-card { opacity: .85; } .tl-tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: .4rem; } .tl-card h3 { font-size: 1.1rem; margin-bottom: .45rem; } .tl-card p { font-size: .93rem; line-height: 1.65; margin: 0; } @media (max-width: 575.98px) { .tl { padding-left: 3.4rem; } .tl-progress { left: 16px; } .tl-marker { left: -3.4rem; width: 36px; height: 36px; font-size: .75rem; } .tl-item.is-active .tl-card { transform: none; } } @media (prefers-reduced-motion: reduce) { .tl-card, .tl-marker, .tl-progress-fill { transition: none; } .tl-card { opacity: 1; } } /* ---------- career teaser (dark, cinematic) ---------- */ .career-teaser { position: relative; padding: clamp(4.5rem, 8vw, 7rem) 0; isolation: isolate; overflow: hidden; background: var(--navy-ink); } .ct-media { position: absolute; inset: 0; z-index: 0; } .ct-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; /* slow drift gives the still image a sense of motion */ animation: ctDrift 24s ease-in-out infinite alternate; } @keyframes ctDrift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.12) translateY(-14px); } } .ct-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(4,12,32,.95) 0%, rgba(4,12,32,.86) 42%, rgba(4,12,32,.55) 70%, rgba(4,12,32,.3) 100%), linear-gradient(to top, rgba(4,12,32,.9) 0%, rgba(4,12,32,0) 42%); } .ct-inner { position: relative; z-index: 2; } .ct-eyebrow { color: var(--orange-soft); } .ct-eyebrow::before { background: var(--orange-soft); } .ct-title { color: #ffffff; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.03em; } .ct-lede { color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.7; max-width: 54ch; } /* the pill stack: each one slides in on its own delay */ .ct-pills { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; } .ct-pill { justify-self: start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(10px); color: #ffffff; border-radius: 999px; padding: .7rem 1.5rem; font-weight: 700; font-size: .96rem; opacity: 0; transform: translateX(-26px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } /* stagger: each pill steps further right, mirroring the reference layout */ .ct-pill:nth-child(1) { margin-left: 0; transition-delay: .05s; } .ct-pill:nth-child(2) { margin-left: 2.2rem; transition-delay: .15s; } .ct-pill:nth-child(3) { margin-left: 1.1rem; transition-delay: .25s; } .ct-pill:nth-child(4) { margin-left: 3.3rem; transition-delay: .35s; } .ct-pill:nth-child(5) { margin-left: 1.7rem; transition-delay: .45s; } .career-teaser.is-in .ct-pill { opacity: 1; transform: none; } @media (max-width: 991.98px) { .ct-scrim { background: linear-gradient(to top, rgba(4,12,32,.96) 12%, rgba(4,12,32,.8) 55%, rgba(4,12,32,.6) 100%); } .ct-pill { margin-left: 0 !important; font-size: .9rem; padding: .6rem 1.2rem; } .ct-pills { gap: .6rem; } } @media (prefers-reduced-motion: reduce) { .ct-media img { animation: none; } .ct-pill { opacity: 1; transform: none; transition: none; } } /* ---------- alumni ---------- */ .alum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .alum-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; } .alum-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .alum-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-ink); } .alum-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .35s; } .alum-card:hover .alum-photo img { transform: scale(1.06); opacity: .45; } /* initials stand in until real portraits are supplied */ .alum-initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; letter-spacing: .04em; color: #ffffff; text-shadow: 0 2px 18px rgba(0,0,0,.4); } .alum-body { padding: 1.25rem 1.35rem 1.4rem; } .alum-body h3 { font-size: 1.05rem; margin-bottom: .25rem; } .alum-role { font-size: .92rem; color: var(--navy); font-weight: 700; margin-bottom: .35rem; } .alum-meta { font-size: .84rem; color: var(--body); margin: 0; } .fleet-chips { display: flex; flex-wrap: wrap; gap: .55rem; } .fleet-chip { border: 1px solid var(--line); background: #ffffff; border-radius: 999px; padding: .5rem 1rem; font-size: .88rem; font-weight: 700; color: var(--ink); } /* homepage alumni slider */ .alum-slider { position: relative; } .alum-track { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .25rem 1rem; /* the native bar is replaced by the arrow controls below */ scrollbar-width: none; } .alum-track::-webkit-scrollbar { display: none; } .alum-slide { flex: 0 0 clamp(230px, 24vw, 268px); scroll-snap-align: start; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; } .alum-slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0,51,153,.28); } .alum-slide-top { position: relative; aspect-ratio: 16 / 10; background: var(--navy-ink); overflow: hidden; } .alum-slide-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; transition: transform .6s cubic-bezier(.16,1,.3,1); } .alum-slide:hover .alum-slide-top img { transform: scale(1.07); } .alum-slide-ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; font-weight: 800; letter-spacing: .04em; color: #ffffff; text-shadow: 0 2px 16px rgba(0,0,0,.45); } .alum-slide-body { padding: 1.1rem 1.2rem 1.25rem; } .alum-slide-body h3 { font-size: 1rem; margin-bottom: .25rem; } .alum-slide-role { font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: .25rem; } .alum-slide-prog { font-size: .82rem; color: var(--body); margin: 0; } .alum-ctrls { display: flex; gap: .5rem; margin-top: .5rem; } .alum-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #ffffff; color: var(--navy); display: grid; place-items: center; transition: all .2s cubic-bezier(.16,1,.3,1); } .alum-btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #ffffff; transform: translateY(-2px); } .alum-btn:disabled { opacity: .35; cursor: not-allowed; } @media (max-width: 991.98px) { .alum-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .alum-grid { grid-template-columns: 1fr; } } /* ---------- gallery ---------- */ .gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .gal-filter { border: 1px solid var(--line); background: #ffffff; border-radius: 999px; padding: .55rem 1.1rem; font-size: .88rem; font-weight: 700; color: var(--ink); transition: all .2s cubic-bezier(.16,1,.3,1); } .gal-filter:hover { border-color: var(--navy); color: var(--navy); } .gal-filter.is-on { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 8px 20px rgba(0,51,153,.22); } .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .gal-item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #dfe5f2; cursor: zoom-in; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, opacity .3s; } .gal-item.gal-wide { grid-column: span 2; aspect-ratio: 16 / 9; } .gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); } .gal-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,12,32,.9) 0%, rgba(4,12,32,.5) 34%, rgba(4,12,32,0) 68%); opacity: 0; transition: opacity .35s ease; } .gal-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .gal-item:hover img { transform: scale(1.07); } .gal-item:hover::after { opacity: 1; } .gal-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.2rem; color: #ffffff; font-size: .95rem; font-weight: 600; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); } .gal-item:hover figcaption { opacity: 1; transform: translateY(0); } .gal-cat { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-soft); margin-bottom: .25rem; } .gal-item.is-hidden { display: none; } /* lightbox */ .gal-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(4, 12, 32, .93); display: none; align-items: center; justify-content: center; padding: 4vw; } .gal-lightbox.is-open { display: flex; } .gal-lightbox img, .gal-lightbox video { max-width: 100%; max-height: 84vh; border-radius: var(--radius); display: block; } .gal-lightbox .is-hidden { display: none; } /* video tiles: same frame as photos, with a play badge so the tile reads as a clip */ .gal-item video { width: 100%; height: 100%; object-fit: cover; display: block; } .gal-item .gal-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); display: grid; place-items: center; pointer-events: none; z-index: 3; transition: transform .25s ease, background .25s ease; } .gal-item:hover .gal-play { transform: scale(1.08); background: #ffffff; } .gal-lightbox figcaption { color: #ffffff; text-align: center; margin-top: 1rem; font-size: .95rem; } .gal-close { position: absolute; top: 1.2rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #ffffff; display: grid; place-items: center; } .gal-close:hover { background: rgba(255,255,255,.22); } @media (max-width: 991.98px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } .gal-item figcaption { opacity: 1; transform: none; } .gal-item::after { opacity: 1; } } @media (max-width: 575.98px) { .gal-grid { grid-template-columns: 1fr; } .gal-item.gal-wide { grid-column: span 1; aspect-ratio: 4 / 3; } } /* ---------- testimonials ---------- */ .tst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; } .tst-card { background: #ffffff; border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; } .tst-quote { font-size: .92rem; line-height: 1.65; color: var(--navy-ink); font-style: italic; margin: 0; } .tst-quote::before, .tst-quote::after { content: '"'; } .tst-who { display: flex; align-items: center; gap: .8rem; } .tst-who strong { display: block; font-size: .92rem; color: var(--ink); } .tst-who span { font-size: .78rem; color: var(--body); text-transform: uppercase; letter-spacing: .03em; } .tst-badge { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #ffffff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: 0 0 auto; } .tst-card-google { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: var(--surface-2); } .tst-google-stars { color: var(--orange); font-size: 1.3rem; letter-spacing: .1em; } .tst-google-label { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); } .tst-google-note { font-size: .82rem; line-height: 1.6; color: var(--body); } @media (max-width: 991.98px) { .tst-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .tst-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .gal-item, .gal-item img, .gal-item figcaption, .gal-item::after { transition: none; } } /* feature tile used on the SEO landing pages */ .feature-tile { display: flex; align-items: flex-start; gap: .7rem; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.05rem 1.15rem; height: 100%; font-weight: 600; font-size: .95rem; line-height: 1.5; color: var(--ink); transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s; } .feature-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(0, 51, 153, .28); } .feature-tile svg { flex: 0 0 auto; margin-top: 3px; } .bg-tint .feature-tile { background: #ffffff; } /* pillar card (SMA Edge) */ .pillar-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; } .pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .pillar-img { position: relative; aspect-ratio: 555 / 410; overflow: hidden; background: #dfe5f2; } .pillar-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pillar-body { padding: 1.5rem; } .pillar-body h3 { font-size: 1.1rem; margin-bottom: .6rem; } .pillar-body p { font-size: .92rem; line-height: 1.65; margin-bottom: .55rem; } .pillar-body p:last-child { margin-bottom: 0; } /* career comparison table */ .compare-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; } .compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .94rem; } .compare th, .compare td { padding: 1rem 1.15rem; text-align: left; } .compare thead th { background: var(--navy); color: #ffffff; font-weight: 700; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .compare tbody tr + tr { border-top: 1px solid var(--line); } .compare tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; } .compare tbody td { color: var(--body); } .compare tr.is-highlight { background: rgba(0, 51, 153, .05); } .compare tr.is-highlight th { color: var(--navy); } .compare tr.is-highlight td { color: var(--ink); font-weight: 600; } /* demo session detail list */ .session-facts { list-style: none; padding: 0; margin: 0; } .session-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; } .session-facts li:last-child { border-bottom: 0; } .session-facts span:first-child { color: var(--body); } .session-facts span:last-child { font-weight: 700; color: var(--ink); text-align: right; } .price-tag { display: inline-flex; align-items: baseline; gap: .5rem; background: var(--navy); color: #ffffff; border-radius: 999px; padding: .6rem 1.4rem; font-weight: 800; font-size: 1.35rem; } .price-tag small { font-size: .8rem; font-weight: 600; opacity: .8; } .qr-box { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; text-align: center; max-width: 300px; } .qr-box img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; } /* mentor bio card */ .bio-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; } /* Portraits are transparent cutouts, so they sit on a brand backdrop and are contained rather than cropped. */ .bio-card .bio-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, #eaf0fb 0%, #dbe5f6 100%); } .bio-card .bio-img::before { content: ""; position: absolute; inset: 10% 12% auto 12%; height: 42%; background: url("../img/why-choose-2-plane.png") center/contain no-repeat; opacity: .12; } .bio-card .bio-img img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 96%; width: auto; max-width: 90%; object-fit: contain; display: block; } .bio-card .bio-body { padding: 1.5rem; } .bio-card h3 { font-size: 1.18rem; margin-bottom: .2rem; } .bio-role { color: var(--orange-ink); font-weight: 700; font-size: .85rem; margin-bottom: .85rem; } .bio-card p { font-size: .93rem; line-height: 1.7; margin-bottom: .8rem; } .bio-card p:last-child { margin-bottom: 0; } /* course detail block */ .course-block { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } /* The image column must clip its own photo. Using position:absolute inside a relative wrapper keeps it from spilling over the adjacent text column. */ .course-block .course-img { position: relative; overflow: hidden; background: #dfe5f2; min-height: 260px; height: 100%; } .course-block .course-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 991.98px) { .course-block .course-img { min-height: 0; aspect-ratio: 16 / 9; } } .course-block .course-body { padding: 1.75rem; } /* contact tiles */ .contact-tile { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; height: 100%; } .contact-tile .ct-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 51, 153, .07); display: grid; place-items: center; margin-bottom: 1rem; } .contact-tile h3 { font-size: 1.02rem; margin-bottom: .4rem; } .contact-tile a, .contact-tile p { font-size: .93rem; line-height: 1.65; color: var(--body); text-decoration: none; } .contact-tile a:hover { color: var(--navy); } .map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; } .map-frame iframe { width: 100%; height: 380px; border: 0; display: block; } /* faq category heading */ .faq-cat { font-size: 1.15rem; color: var(--navy); margin: 2.25rem 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--line); } .faq-cat:first-of-type { margin-top: 0; } /* ---------- credential strip (under hero, not inside it) ---------- */ .credential-strip { background: var(--navy); color: #ffffff; } .credential-strip .cred { padding: 1.6rem 1rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, .14); } .credential-strip .col-6:last-child .cred, .credential-strip .col-lg-3:last-child .cred { border-right: 0; } .credential-strip .cred-num { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #ffffff; line-height: 1; letter-spacing: -.02em; } .credential-strip .cred-num span { color: var(--orange-soft); } .credential-strip .cred-lbl { font-size: .8rem; color: rgba(255, 255, 255, .78); margin-top: .45rem; font-weight: 600; } /* ---------- programme tabs ---------- */ .prog-tabs { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; } .prog-tabs .nav-link { border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .9rem; padding: .6rem 1.15rem; background: #ffffff; transition: all .2s cubic-bezier(.16, 1, .3, 1); } .prog-tabs .nav-link:hover { border-color: var(--navy); color: var(--navy); } .prog-tabs .nav-link.active { background: var(--navy); border-color: var(--navy); color: #ffffff; box-shadow: 0 8px 20px rgba(0, 51, 153, .22); } .prog-panel-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); } .prog-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .prog-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; } .prog-points li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 600; color: var(--ink); font-size: .95rem; } .prog-points svg { flex: 0 0 auto; margin-top: 2px; } /* ---------- edge grid (bento, 7 real cells) ---------- */ /* Photo rows are taller than text rows on purpose. Fixing the row heights keeps that rhythm deliberate instead of letting content decide it. */ .edge-grid { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); /* minmax keeps the rhythm without clipping if copy wraps at odd widths */ grid-auto-rows: minmax(206px, auto); } .edge-cell { border-radius: var(--radius); padding: 1.6rem; border: 1px solid var(--line); background: #ffffff; display: flex; flex-direction: column; /* Content sits together from the top. Pushing it to the bottom left a dead gap under the icon in the text-only cells. */ justify-content: flex-start; gap: .85rem; min-height: 186px; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s; } /* photo cells still anchor their caption to the bottom, over the gradient */ .edge-cell.is-photo { justify-content: flex-end; gap: 0; } .edge-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .edge-cell h3 { font-size: 1.06rem; margin: 0; } .edge-cell p { font-size: .9rem; margin: 0; line-height: 1.6; } /* the heading and its paragraph read as one unit, tighter than the icon gap */ .edge-cell h3 + p { margin-top: -.35rem; } .edge-cell.is-photo h3 { margin-bottom: .4rem; } .edge-cell.span-3 { grid-column: span 3; } .edge-cell.span-2 { grid-column: span 2; } /* photo cell */ .edge-cell.is-photo { position: relative; overflow: hidden; border: 0; min-height: 240px; color: #ffffff; } /* z-index 0 keeps the photo UNDER the ::after scrim. At z-index 1 it painted over the gradient, washing the caption out and looking hazy. */ .edge-cell.is-photo img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .edge-cell.is-photo::after { z-index: 1; } .edge-cell.is-photo h3, .edge-cell.is-photo p { z-index: 2; } .edge-cell.is-photo::after { content: ""; position: absolute; inset: 0; /* Heavy under the caption, clearing above it so the photo still reads. */ background: linear-gradient(to top, rgba(4, 12, 32, .94) 0%, rgba(4, 12, 32, .86) 30%, rgba(4, 12, 32, .32) 60%, rgba(4, 12, 32, 0) 84%); } .edge-cell.is-photo > * { position: relative; z-index: 1; } .edge-cell.is-photo h3 { color: #ffffff; } .edge-cell.is-photo p { color: rgba(255, 255, 255, .86); } /* navy cell */ .edge-cell.is-navy { background: var(--navy); border-color: var(--navy); } .edge-cell.is-navy h3 { color: #ffffff; } .edge-cell.is-navy p { color: rgba(255, 255, 255, .84); } /* orange cell */ .edge-cell.is-orange { background: linear-gradient(150deg, var(--orange) 0%, #e06400 100%); border-color: transparent; } .edge-cell.is-orange h3 { color: #ffffff; } .edge-cell.is-orange p { color: rgba(255, 255, 255, .92); } .edge-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 51, 153, .07); display: grid; place-items: center; flex: 0 0 auto; } .is-navy .edge-icon, .is-orange .edge-icon { background: rgba(255, 255, 255, .16); } /* ---------- mentor ---------- */ /* Cutout portrait on a brand backdrop, with the aircraft silhouette behind. */ .mentor-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; max-height: 580px; background: linear-gradient(165deg, #e9effa 0%, #d7e2f5 100%); display: flex; align-items: flex-end; justify-content: center; } .mentor-photo::before { content: ""; position: absolute; inset: 8% 8% auto 8%; height: 46%; background: url("../img/why-choose-2-plane.png") center/contain no-repeat; opacity: .14; } .mentor-photo img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 94%; width: auto; max-width: 96%; object-fit: contain; display: block; } .mentor-stat { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .mentor-stat:last-child { border-bottom: 0; } .mentor-stat img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; } .mentor-stat h4 { font-size: 1rem; margin-bottom: .25rem; } .mentor-stat p { font-size: .92rem; margin: 0; line-height: 1.6; } /* ---------- roadmap: sticky split journey ---------- */ /* overflow must be visible (not just unset) or the sticky column is clipped by the global section rule and detaches as soon as it scrolls */ .journey { padding: clamp(4.5rem, 8vw, 7.5rem) 0; overflow: visible !important; background: var(--surface-2); } .journey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); /* stretch, not start: the sticky column needs a full-height track or it unpins as soon as its own 560px box scrolls past */ align-items: stretch; } /* The column spans the full grid height; the stage inside it is what sticks, so it stays pinned for the whole length of the step list. */ .journey-visual { height: 100%; } .journey-visual .jstage { position: sticky; top: calc(var(--nav-h) + 40px); } .jstage { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; background: var(--navy-ink); box-shadow: var(--shadow-lg); } /* every frame stacks; only the active one is visible */ .jframe { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); } .jframe.is-active { opacity: 1; transform: scale(1); } .jframe img { width: 100%; height: 100%; object-fit: cover; display: block; } .jframe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,12,32,.92) 0%, rgba(4,12,32,.72) 26%, rgba(4,12,32,.18) 60%, rgba(4,12,32,.05) 100%); } .jframe figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.5rem 1.6rem 2.6rem; color: #ffffff; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .jframe-n { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-soft); margin-bottom: .35rem; } /* progress bar along the base of the stage */ .jprogress { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.3rem; height: 3px; background: rgba(255,255,255,.24); border-radius: 99px; z-index: 3; } .jprogress-fill { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 99px; transition: width .5s cubic-bezier(.16,1,.3,1); } /* the aircraft rides the progress bar */ .jplane { position: absolute; bottom: .55rem; left: 1.6rem; z-index: 4; width: 46px; transition: transform .5s cubic-bezier(.16,1,.3,1); pointer-events: none; } .jplane img { width: 100%; height: auto; display: block; transform: rotate(-4deg); } /* right column: the step list */ .journey-steps { display: grid; gap: 1rem; } .jstep { position: relative; display: flex; gap: 1.1rem; padding: 1.4rem 1.5rem; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); opacity: .55; transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease, box-shadow .45s ease; } .jstep.is-active { opacity: 1; transform: translateX(6px); border-color: rgba(0,51,153,.32); box-shadow: var(--shadow-md); } .jstep-mark { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; transition: background .45s ease; } .jstep.is-active .jstep-mark { background: rgba(0,51,153,.09); } .jstep-mark img { width: 34px; height: 34px; object-fit: contain; } .jstep-n { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: .2rem; } .jstep h3 { font-size: 1.05rem; margin-bottom: .35rem; } .jstep p { font-size: .92rem; line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .journey-grid { grid-template-columns: 1fr; gap: 2rem; } /* the visual becomes a slimmer banner that still tracks the steps */ .journey-visual { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 2; } .jstage { aspect-ratio: 16 / 9; max-height: 260px; } .jframe figcaption { padding: 1rem 1.1rem 2.2rem; font-size: .95rem; } .jstep { opacity: 1; } .jstep.is-active { transform: none; } } @media (prefers-reduced-motion: reduce) { .jframe { transition: none; } .jstep { opacity: 1; transition: none; } .jplane, .jprogress-fill { transition: none; } } /* ---------- roadmap rail ---------- */ .rail-wrap { position: relative; } .rail { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: .5rem .25rem 1.5rem; scrollbar-width: thin; scrollbar-color: var(--navy) var(--line); } .rail::-webkit-scrollbar { height: 6px; } .rail::-webkit-scrollbar-track { background: var(--line); border-radius: 99px; } .rail::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 99px; } .step { flex: 0 0 clamp(230px, 25vw, 268px); scroll-snap-align: start; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, border-color .25s; } .step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(0, 51, 153, .3); } .step img { width: 46px; height: 46px; object-fit: contain; margin-bottom: .9rem; } .step .step-n { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--orange-ink); text-transform: uppercase; } .step h3 { font-size: 1rem; margin: .3rem 0 .45rem; } .step p { font-size: .87rem; margin: 0; line-height: 1.6; } .rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #ffffff; color: var(--navy); display: grid; place-items: center; transition: all .2s; } .rail-btn:hover:not(:disabled) { background: var(--navy); color: #ffffff; border-color: var(--navy); } .rail-btn:disabled { opacity: .35; cursor: not-allowed; } /* ---------- career cards ---------- */ .career-card { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; padding: 1.5rem; color: #ffffff; isolation: isolate; } .career-card img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); } /* The 1920x800 crew photo has its subjects centred low; 60% frames them without cutting off heads. */ .career-card img.wide-crop { object-position: center 60%; } /* Scrim is heavy only where the caption sits, so the photo still reads in the upper two-thirds of the card. */ .career-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(4, 12, 32, .94) 0%, rgba(4, 12, 32, .88) 26%, rgba(4, 12, 32, .30) 58%, rgba(4, 12, 32, 0) 82%); } .career-card > div { position: relative; z-index: 2; } .career-card:hover img { transform: scale(1.06); } .career-card h3 { color: #ffffff; font-size: 1.12rem; margin-bottom: .4rem; } .career-card p { color: rgba(255, 255, 255, .88); font-size: .89rem; margin: 0; line-height: 1.6; } /* ---------- faq ---------- */ .accordion-item { border: 1px solid var(--line); border-radius: var(--radius) !important; margin-bottom: .75rem; overflow: hidden; background: #ffffff; } .accordion-button { font-weight: 700; color: var(--ink); font-size: 1rem; padding: 1.1rem 1.25rem; background: #ffffff; } .accordion-button:not(.collapsed) { background: var(--surface-2); color: var(--navy); box-shadow: none; } .accordion-button:focus { box-shadow: none; } .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23003399' stroke-width='2.5' stroke-linecap='round' viewBox='0 0 24 24'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); } .accordion-body { padding: 0 1.25rem 1.25rem; font-size: .95rem; line-height: 1.7; } /* ---------- cta ---------- */ .cta-band { background: linear-gradient(135deg, var(--navy-ink) 0%, var(--navy) 58%, var(--navy-deep) 100%); color: #ffffff; overflow: hidden; } .cta-band h2 { color: #ffffff; } .cta-band p { color: rgba(255, 255, 255, .84); } /* the enrolment card is a white island inside the navy band, so its own typography must not inherit the band's light-on-dark colours */ .cta-band .bg-white h3 { color: var(--ink); } .cta-band .bg-white p, .cta-band .bg-white .form-text { color: #5b6478; } .cta-band .bg-white label { color: var(--ink); } .cta-video { border-radius: var(--radius); overflow: hidden; background: #ffffff; box-shadow: var(--shadow-lg); } .cta-video video { width: 100%; height: auto; display: block; } /* ---------- form ---------- */ .form-label { font-weight: 700; color: var(--ink); font-size: .85rem; margin-bottom: .35rem; } .form-control, .form-select { border: 1px solid #cdd5e4; border-radius: var(--radius-sm); padding: .72rem .9rem; font-size: .95rem; color: var(--ink); background: #ffffff; } .form-control::placeholder { color: #6b7488; } .form-control:focus, .form-select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 51, 153, .14); } .form-text { font-size: .8rem; color: #5b6478; } .invalid-feedback { font-size: .82rem; font-weight: 600; } /* ---------- footer ---------- */ .site-footer { background: var(--navy-ink); color: rgba(255, 255, 255, .72); } .site-footer h4 { color: #ffffff; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; } .site-footer a { color: rgba(255, 255, 255, .72); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 3px; font-size: .92rem; overflow-wrap: anywhere; /* the admissions address is long */ } .site-footer a:hover { color: var(--orange-soft); text-decoration-color: currentColor; } .site-footer .footer-logo { height: 54px; width: auto; background: #ffffff; border-radius: 10px; padding: 6px 10px; } /* footer map + directions link */ .footer-map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); line-height: 0; /* the embed renders a light map, so knock it back to sit in the dark footer */ filter: grayscale(.25) brightness(.92); } .footer-map iframe { width: 100%; height: 300px; border: 0; display: block; } @media (max-width: 767.98px) { .footer-map iframe { height: 220px; } } .footer-directions { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem !important; font-weight: 700; color: var(--orange-soft) !important; text-decoration: none; } .footer-directions:hover { color: #ffffff !important; text-decoration: underline; } .footer-social { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; transition: background .2s, transform .2s; } .footer-social:hover { background: var(--orange); transform: translateY(-2px); } /* floating call helper. Fixed to the viewport corner so it never sits over body copy in the middle of a section. */ /* ---------- floating quick actions ---------- */ .quick-actions { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; } /* shared pill shape for both buttons */ .quick-call, .quick-enquire { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: .75rem 1.15rem; font-weight: 700; font-size: .9rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s; } /* the enquiry button leads, so it carries the brand navy */ .quick-enquire { background: var(--navy); color: #ffffff; box-shadow: 0 12px 30px rgba(0, 51, 153, .34); } .quick-enquire:hover, .quick-enquire:focus-visible { transform: translateY(-3px); color: #ffffff; } .quick-call { background: var(--orange-ink); color: #ffffff; box-shadow: 0 12px 30px rgba(246, 120, 1, .38); } .quick-call:hover, .quick-call:focus-visible { transform: translateY(-3px); color: #ffffff; } /* a visible focus ring matters most on a control that floats over content */ .quick-call:focus-visible, .quick-enquire:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } /* back-to-top: same pill family, icon-only, hidden until the page scrolls */ .quick-top { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; padding: 0; background: #ffffff; color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow-md); cursor: pointer; transition: transform .2s, box-shadow .2s, opacity .2s; } .quick-top:hover, .quick-top:focus-visible { transform: translateY(-3px); background: var(--navy); color: #ffffff; } .quick-top:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } .quick-top[hidden] { display: none; } /* ---------- service page: data tables ---------------------------------- Used for cost breakdowns and comparison grids. On narrow screens the table scrolls inside its own frame rather than forcing the page sideways. */ .data-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff; box-shadow: var(--shadow-sm); overflow: hidden; } .data-table-scroll { /* overflow-x: auto on its own forces the browser to also treat the y-axis as a scroll container (per spec, "visible" is not allowed to pair with a scrolling value on the other axis) -- so without an explicit overflow-y, any sub-pixel height mismatch was enough to pop a real vertical scrollbar onto this box. Locking it to hidden keeps only the intended horizontal scroll behaviour. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--navy) var(--surface-2, #f4f6fb); } .data-table-scroll::-webkit-scrollbar { height: 7px; } .data-table-scroll::-webkit-scrollbar-track { background: var(--surface-2, #f4f6fb); } .data-table-scroll::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 99px; } .data-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--navy-deep); } .data-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .93rem; } .data-table thead th { background: var(--navy); color: #ffffff; text-align: left; font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; padding: .85rem 1rem; white-space: nowrap; } .data-table tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:nth-child(even) { background: #f8fafd; } .data-table .dt-head { font-weight: 700; color: var(--navy-ink); white-space: nowrap; } .data-table .dt-note { display: block; font-size: .84rem; color: var(--body); margin-top: .15rem; } .data-table .dt-cost { font-weight: 700; color: var(--navy); white-space: nowrap; } /* the summary line at the foot of the cost table */ .data-table tfoot td { background: #eef3ff; font-weight: 800; color: var(--navy); padding: .95rem 1rem; border-top: 2px solid var(--navy); font-size: 1rem; } .table-caption { border-left: 4px solid var(--orange); background: #fff8f1; border-radius: var(--radius-sm); font-size: .85rem; color: var(--body); margin-top: .9rem; padding: .85rem 1.1rem; line-height: 1.6; } .table-caption::before { content: "Note: "; font-weight: 800; color: var(--orange-ink); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; } /* a hint that the table pans sideways, shown only where it actually does */ @media (max-width: 767.98px) { .data-table-wrap::after { content: "Swipe to see the full table"; display: block; padding: .5rem 1rem; font-size: .78rem; color: var(--body); background: #f8fafd; border-top: 1px solid var(--line); } } /* ---------- service page: requirement cards ------------------------------- A floating circular badge sits half outside the card's top-left corner, like an aircraft rivet or a boarding-pass punch mark, echoing the boarding-pass / aviation motifs used elsewhere on this page. */ .req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; margin-top: .5rem; } @media (max-width: 767.98px) { .req-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479.98px) { .req-grid { grid-template-columns: 1fr; } } .req-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.25rem 1.25rem; position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .req-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(246, 120, 1, .35); } .req-badge { position: absolute; top: -18px; left: 20px; width: 40px; height: 40px; border-radius: 50%; background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--navy); } .req-card:hover .req-badge { color: var(--orange-ink); border-color: rgba(246, 120, 1, .35); } .req-num { display: block; font-family: "Courier New", ui-monospace, monospace; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); margin: .7rem 0 .35rem; } .req-card h3 { font-size: 1.02rem; margin: 0 0 .4rem; } .req-card p { margin: 0; font-size: .92rem; line-height: 1.6; } /* ---------- service page: stage cards ---------- */ .stage-grid { display: grid; gap: 1rem; } .stage-card { background: #ffffff; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 1.15rem 1.35rem; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: start; } .stage-card h3 { font-size: 1.05rem; margin: 0 0 .15rem; } .stage-tag { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); display: block; margin-bottom: .3rem; } .stage-meta { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--body); text-align: right; white-space: nowrap; } .stage-meta b { color: var(--navy); font-weight: 700; } .stage-topics { grid-column: 1 / -1; margin: .35rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; } .stage-topics li { font-size: .82rem; background: #eef3ff; color: var(--navy); border-radius: 999px; padding: .28rem .7rem; font-weight: 600; } @media (max-width: 575.98px) { .stage-card { grid-template-columns: 1fr; } .stage-meta { text-align: left; flex-direction: row; gap: 1rem; } } /* ---------- service page: journey legs ---------- */ .leg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; counter-reset: leg; } .leg-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.2rem 1.2rem; box-shadow: var(--shadow-sm); position: relative; padding-top: 2.4rem; } .leg-card::before { counter-increment: leg; content: "Leg " counter(leg, decimal-leading-zero); position: absolute; top: .9rem; left: 1.2rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); } .leg-card h3 { font-size: 1rem; margin: 0 0 .35rem; } .leg-card p { margin: 0; font-size: .9rem; line-height: 1.6; } /* ---------- service page: mentor cards ---------- */ .mentor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; } .mentor-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); } .mentor-role { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); display: block; margin-bottom: .45rem; } .mentor-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; } .mentor-card p { font-size: .93rem; line-height: 1.65; margin: 0 0 .9rem; } .mentor-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; } .mentor-stats li { font-size: .78rem; font-weight: 700; background: var(--navy); color: #ffffff; border-radius: 999px; padding: .3rem .75rem; } /* ---------- dark mentor card: photo + copy side by side ------------------- Sits on a .section-navy background, so the card itself is a lighter navy panel and text switches to the light palette. */ .mentor-card-dark { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); padding: 1.4rem; display: flex; gap: 1.25rem; align-items: flex-start; box-shadow: none; /* now a link to the mentor's author page: strip default link styling and give it its own hover feedback instead of relying on plain underline */ text-decoration: none; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .mentor-card-dark:hover, .mentor-card-dark:focus-visible { transform: translateY(-3px); border-color: rgba(246, 120, 1, .55); background: rgba(255, 255, 255, .09); } .mentor-card-dark:hover h3, .mentor-card-dark:focus-visible h3 { color: var(--orange-soft); } .mentor-photo-frame { flex: 0 0 auto; width: 110px; height: 144px; border-radius: 50%/28%; overflow: hidden; border: 4px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .08); } .mentor-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .mentor-card-dark .mentor-copy { flex: 1 1 auto; min-width: 0; } .mentor-card-dark .mentor-role { color: var(--orange-soft); } .mentor-card-dark h3 { color: #ffffff; } .mentor-card-dark p { color: rgba(255, 255, 255, .78); } .mentor-card-dark .mentor-stats li { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: var(--orange-soft); } @media (max-width: 575.98px) { .mentor-card-dark { flex-direction: column; align-items: center; text-align: center; } .mentor-card-dark .mentor-stats { justify-content: center; } } /* ---------- home page: two-mentor cards, large round photo ---------------- */ .mentor-card-round { align-items: flex-start; padding: 1.8rem; height: 100%; } .mentor-photo-round { width: 130px; height: 170px; border-radius: 50%/28%; overflow: hidden; border: 5px solid rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .08); flex: 0 0 auto; } .mentor-photo-round img { width: 100%; height: 100%; object-fit: cover; display: block; } .mentor-card-round .mentor-copy { width: 100%; } .mentor-card-round p { font-size: .92rem; } .mentor-view-link { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-soft); text-decoration: underline; text-underline-offset: 3px; } .mentor-card-round:hover .mentor-view-link, .mentor-card-round:focus-visible .mentor-view-link { color: #ffffff; } @media (max-width: 575.98px) { .mentor-photo-round { margin-bottom: 1.1rem; } } /* ---------- service page: hero stat row ---------------------------------- Sits inside .page-head, which is a dark navy gradient, so these use the light-on-dark palette rather than the body text colours. */ .svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .18); } .svc-stat { text-align: center; } .svc-stat + .svc-stat { border-left: 1px solid rgba(255, 255, 255, .14); } .svc-stat b { display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #ffffff; } .svc-stat span { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--orange-soft); line-height: 1.4; } /* six-stat variant: CPL page hero mirrors the home page's six-stat row */ .svc-stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 991.98px) { .svc-stats-6 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem .75rem; } .svc-stats-6 .svc-stat:nth-child(3n+1) { border-left: 0; } } @media (max-width: 575.98px) { .svc-stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem .75rem; } /* the left border only makes sense between items on the same row */ .svc-stat:nth-child(odd) { border-left: 0; } .svc-stats-6.svc-stats { grid-template-columns: repeat(2, 1fr); } .svc-stats-6 .svc-stat:nth-child(3n+1) { border-left: 1px solid rgba(255, 255, 255, .14); } } /* ---------- service page: callout ---------- */ .section-navy { background: linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 60%, var(--navy-deep) 100%); position: relative; } /* An inline text link inside a .section-navy block: orange-soft reads best against the dark gradient, with a visible underline so it does not just look like emphasised body copy. */ .link-light { color: var(--orange-soft); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; } .link-light:hover, .link-light:focus-visible { color: #ffffff; } /* Blanket branded-scrollbar rule for this page's own containers, so any scroll box here (existing or added later) never shows the browser's bulky default grey scrollbar. */ .pass-face, .map-stage, .region-modal-card, .cabin-desc { scrollbar-width: thin; scrollbar-color: var(--navy) var(--surface-2, #f4f6fb); } .pass-face::-webkit-scrollbar, .map-stage::-webkit-scrollbar, .region-modal-card::-webkit-scrollbar, .cabin-desc::-webkit-scrollbar { width: 7px; height: 7px; } .pass-face::-webkit-scrollbar-track, .map-stage::-webkit-scrollbar-track, .region-modal-card::-webkit-scrollbar-track, .cabin-desc::-webkit-scrollbar-track { background: var(--surface-2, #f4f6fb); } .pass-face::-webkit-scrollbar-thumb, .map-stage::-webkit-scrollbar-thumb, .region-modal-card::-webkit-scrollbar-thumb, .cabin-desc::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 99px; } .svc-callout { border-left: 4px solid var(--orange); background: #fff8f1; border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; font-size: .93rem; line-height: 1.65; } /* ---------- service page: boarding pass hero card ----------------------- A flip card that shows the headline offer on the front and a cost/consent breakdown on the back. Built in the site's navy/orange palette rather than the reference mockup's cream/brass, so it still reads as this site. */ .pass-scene { perspective: 1400px; } .pass-flip { position: relative; width: 100%; max-width: 360px; margin-left: auto; /* Tall enough for the taller face (the back, with its fare breakdown) so neither face needs its own scrollbar. Both faces are absolutely positioned to fill this box exactly. */ height: 480px; transition: transform .7s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; } .pass-flip.is-flipped { transform: rotateY(180deg); } .pass-face { position: absolute; inset: 0; backface-visibility: hidden; background: #ffffff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.5rem 1.6rem; color: var(--navy-ink); /* no overflow/scrollbar: the box is sized to fit both faces in full */ overflow: hidden; display: flex; flex-direction: column; } .pass-face.back { transform: rotateY(180deg); } .pass-notch { position: absolute; top: -10px; width: 20px; height: 20px; background: var(--navy-ink); border-radius: 50%; } .pass-notch.left { left: -10px; } .pass-notch.right { right: -10px; } .pass-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px dashed var(--line); } .pass-sub { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--body); font-weight: 700; display: block; } .pass-title { font-size: 1.15rem; font-weight: 800; margin-top: .25rem; color: var(--navy-ink); } .pass-plane { width: 24px; height: 24px; color: var(--orange); flex: 0 0 auto; } .pass-invest { border: 1px dashed var(--orange); border-radius: 10px; padding: .7rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; } .pass-invest .lbl { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--body); font-weight: 700; } .pass-invest .val { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin-left: .4rem; } .pass-flipbtn { border: 0; background: var(--navy-ink); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: .35rem .8rem; cursor: pointer; white-space: nowrap; } .pass-flipbtn:hover { background: var(--navy); } .pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; } .pass-grid div { font-size: .78rem; } .pass-grid .k { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--body); margin-bottom: .15rem; } .pass-grid .v { font-weight: 700; color: var(--navy-ink); } .pass-qr { margin-top: 1.1rem; display: flex; align-items: center; gap: .75rem; } .pass-qr img { width: 84px; height: 84px; border-radius: 8px; border: 1px solid var(--line); flex: 0 0 auto; } .pass-qr-label { display: inline-block; background: var(--orange); color: #ffffff; font-weight: 800; font-size: .78rem; letter-spacing: .02em; padding: .45rem .9rem; border-radius: 999px; } .pass-back-list { list-style: none; margin: 0 0 1rem; padding: 0; } .pass-back-list li { font-size: .84rem; padding: .3rem 0; display: flex; gap: .5rem; } .pass-back-list.covered li::before { content: "\2713"; color: #14663a; font-weight: 800; flex: 0 0 auto; } .pass-back-list.extra li::before { content: "+"; color: var(--orange-ink); font-weight: 800; flex: 0 0 auto; } .pass-back-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--body); margin: 0 0 .5rem; } /* the boarding pass card is taller than a typical hero, so this page's .page-head needs extra bottom room; scoped so other pages using .page-head are unaffected */ .page-head:has(.pass-scene), .page-head-pass { padding-bottom: clamp(4.5rem, 7vw, 6.5rem); } @media (max-width: 991.98px) { .pass-scene { margin-top: 2rem; } .pass-flip { margin-inline: auto; } } /* ---------- service page: stage staircase -------------------------------- Five cards, each a touch taller than the last so the row reads as a climb, ending in a solid navy footer bar carrying the stage's short name. Clicking a step marks every step up to it complete. */ .stair-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; align-items: end; } .stair { border: 0; text-align: left; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0; box-shadow: var(--shadow-sm); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } /* True left-to-right ascent: each whole card is taller than the last, not just its footer bar -- align-items:end on the track means a taller card simply extends upward from the same shared bottom edge, so the row reads as an actual climbing staircase rather than five equal-height cards with different-sized footers. justify-content:flex-end keeps each card's own content pinned to its bottom, so the extra height added per stage shows up as breathing room above the heading, not stretched paragraph spacing. */ .stair:nth-child(1) { min-height: 320px; } .stair:nth-child(2) { min-height: 380px; } .stair:nth-child(3) { min-height: 440px; } .stair:nth-child(4) { min-height: 500px; } .stair:nth-child(5) { min-height: 560px; } .stair:nth-child(1) .stair-foot { min-height: 46px; } .stair:nth-child(2) .stair-foot { min-height: 62px; } .stair:nth-child(3) .stair-foot { min-height: 78px; } .stair:nth-child(4) .stair-foot { min-height: 94px; } .stair:nth-child(5) .stair-foot { min-height: 110px; } .stair-head { padding: 1.3rem 1.3rem 1.1rem; flex: 1 1 auto; } .stair .stage-tag { display: block; color: var(--orange-ink); } .stair h3 { font-size: .98rem; margin: .15rem 0 .7rem; line-height: 1.3; } .stair-meta { display: flex; justify-content: space-between; gap: .5rem; padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px dashed var(--line); font-size: .72rem; color: var(--body); } .stair-meta b { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; color: var(--body); font-weight: 700; } .stair-meta span { display: flex; flex-direction: column; gap: .15rem; color: var(--navy-ink); font-weight: 700; } .stair-topics { list-style: none; margin: 0; padding: 0; } .stair-topics li { font-size: .78rem; color: var(--navy-ink); padding: .18rem 0 .18rem .95rem; position: relative; } .stair-topics li::before { content: "\2013"; position: absolute; left: 0; color: var(--orange-ink); } /* Footer swaps text via JS per state (plain label / "In Progress" / "Cleared"); the colour swap below is what actually sells the state change -- navy by default, orange while current, green once cleared. */ .stair-foot { background: var(--navy-ink); color: #ffffff; margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .01em; text-align: center; padding: .9rem .6rem; min-height: 62px; display: flex; align-items: center; justify-content: center; transition: background .3s ease, color .3s ease; } .stair.is-current { border-color: var(--orange); box-shadow: 0 10px 26px rgba(246,120,1,.2); } .stair.is-current .stair-foot { background: var(--orange-ink); } .stair.is-done { border-color: #2f8f5b; } .stair.is-done .stair-foot { background: #1f6e45; } /* Corner badge: a plain green circle+check once a stage clears, an orange "CURRENT" pill while it is the active one, empty otherwise. */ .stair { position: relative; } .stair-badge { position: absolute; top: .7rem; right: .7rem; z-index: 2; } .stair.is-done .stair-badge { width: 26px; height: 26px; border-radius: 50%; background: #1f6e45; display: flex; align-items: center; justify-content: center; } .stair.is-current .stair-badge { background: var(--orange-ink); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; } #stairHint { font-size: .82rem; color: var(--orange-ink); font-weight: 600; margin-top: 1.1rem; text-align: center; } /* ---------- service page: stage-5 completion modal ------------------------ */ .stage-modal { position: fixed; inset: 0; z-index: 1050; background: rgba(10, 22, 51, .72); display: none; align-items: center; justify-content: center; padding: 1.25rem; } .stage-modal.open { display: flex; } .stage-modal-card { position: relative; width: min(480px, 100%); background: linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 60%, var(--navy-deep) 100%); border-radius: var(--radius); padding: 2.2rem 2rem 1.8rem; text-align: center; color: #fff; box-shadow: var(--shadow-lg); } .stage-modal-close { position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; } .stage-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #fff; margin-bottom: 1.1rem; } .stage-modal-card h3 { font-size: 1.4rem; margin: 0 0 .6rem; line-height: 1.3; color: #ffffff; } .stage-modal-card p { font-size: .93rem; color: rgba(255, 255, 255, .78); margin: 0 0 1.4rem; } .stage-modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .16); } .stage-modal-stats div { padding: 1rem .5rem; border-right: 1px solid rgba(255, 255, 255, .16); } .stage-modal-stats div:last-child { border-right: 0; } .stage-modal-stats .v { display: block; font-weight: 800; color: var(--orange-soft); font-size: 1rem; } .stage-modal-stats .l { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .6); margin-top: .3rem; } @media (max-width: 480px) { .stage-modal-stats { grid-template-columns: 1fr; } .stage-modal-stats div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); } .stage-modal-stats div:last-child { border-bottom: 0; } } @media (max-width: 991.98px) { .stair-track { grid-template-columns: repeat(3, 1fr); } .stair:nth-child(n) { min-height: 0; } .stair:nth-child(n) .stair-foot { min-height: 62px; } } @media (max-width: 575.98px) { .stair-track { grid-template-columns: 1fr 1fr; } } /* ---------- service page: journey as an aircraft fuselage ----------------- A dark navy strip standing in for the cabin wall, dashed "rivet lines" along the top and bottom, and every leg as a round cabin window. All eight sit in the same strip and the same style -- nothing is split off into a separate slider. Clicking a window opens its detail in the panel below. */ .fuselage { background: linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 60%, var(--navy-deep) 100%); border-radius: 999px; padding: 1.6rem 1.75rem; position: relative; overflow: hidden; } /* the dashed lines running the length of the fuselage, echoing a rivet seam */ .fuselage::before, .fuselage::after { content: ""; position: absolute; left: 5%; right: 5%; height: 0; border-top: 2px dashed rgba(255, 255, 255, .22); } .fuselage::before { top: 10px; } .fuselage::after { bottom: 10px; } .window-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem .6rem; position: relative; z-index: 1; } @media (max-width: 991.98px) { .window-row { justify-content: center; } } .window-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 108px; height: 132px; border-radius: 50%/28%; border: 3px solid rgba(255, 255, 255, .28); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03) 70%); cursor: pointer; padding: 0; transition: border-color .25s ease, transform .25s ease, background .25s ease; } .window-btn:hover { transform: translateY(-3px); } .window-btn .no { font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: rgba(255, 255, 255, .55); } .window-btn .ic { font-size: 1.3rem; line-height: 1; } .window-btn .lbl { font-size: .74rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.15; padding: 0 .3rem; margin: 0; letter-spacing: normal; } .window-btn.active { border-color: var(--orange); background: radial-gradient(circle at 35% 30%, rgba(246,120,1,.28), rgba(246,120,1,.05) 70%); box-shadow: 0 0 0 4px rgba(246, 120, 1, .18); } .window-btn.active .no { color: var(--orange-soft); } .cabin-desc { margin-top: 1rem; min-height: 110px; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .cabin-desc.empty { display: flex; align-items: center; justify-content: center; color: var(--body); font-size: .85rem; text-align: center; } .cabin-desc .lg { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-ink); font-weight: 800; margin-bottom: .3rem; } .cabin-desc h3 { font-size: 1.05rem; margin: 0 0 .5rem; } .cabin-desc p { margin: 0; font-size: .9rem; line-height: 1.6; } @media (max-width: 767.98px) { .fuselage { border-radius: var(--radius); padding: 1.4rem 1rem; } .window-btn { width: 92px; height: 114px; } .window-btn .lbl { font-size: .68rem; } } @media (max-width: 480px) { .window-btn { width: 80px; height: 100px; } .window-btn .no { display: none; } } /* ---------- service page: recognition regions ---------------------------- The reference mockup's "world map" SVG is not actually drawn in the file supplied (its render target is left empty), so this reaches the same goal — pick a region, see what is required, capture interest — as a clickable region grid instead of an undrawn map. */ .region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; } .region-card { border: 1px solid var(--line); background: #ffffff; border-radius: var(--radius-sm); padding: .9rem 1rem; text-align: left; cursor: pointer; display: flex; align-items: center; gap: .6rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .region-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--orange); } .region-card .flag { font-size: 1.3rem; } .region-card .cc { font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--body); flex: 0 0 auto; } /* ---------- service page: recognition map --------------------------------- None of this had a stylesheet before, so the SVG fell back to default black strokes and 20px text -- this is what was actually broken. */ .map-shell { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.4rem; margin-bottom: 1.25rem; } .map-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .3rem .75rem; margin-bottom: 1rem; } .map-head strong { font-size: 1rem; color: var(--navy-ink); } .map-head span { font-size: .78rem; color: var(--body); } .map-stage { background: linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 70%, var(--navy-deep) 100%); border-radius: var(--radius-sm); padding: .5rem; overflow: hidden; } .map-stage svg { display: block; width: 100%; height: auto; } /* real country outlines, drawn by D3 from world-atlas topojson */ .wm-country { fill: var(--navy); stroke: rgba(255, 255, 255, .28); stroke-width: .5; opacity: .85; } /* flight-path arcs: a thin dashed stroke plus a soft glow twin underneath, not a filled arrow */ .wm-route, .wm-route-glow { fill: none; pointer-events: none; } .wm-route { stroke: var(--orange-soft); stroke-width: 1.6; stroke-dasharray: 6 6; } .wm-route-glow { stroke: rgba(255, 148, 38, .18); stroke-width: 6; } .wm-plane { fill: #ffffff; font-size: 14px; text-anchor: middle; dominant-baseline: middle; } /* markers */ .wm-marker { cursor: pointer; } .wm-marker .wm-halo { fill: rgba(246, 120, 1, .18); stroke: var(--orange-soft); } .wm-marker .wm-dot { fill: var(--orange); stroke: #fff; stroke-width: 2.5; } .wm-marker text { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 13px; font-weight: 700; fill: #ffffff; text-anchor: middle; paint-order: stroke; stroke: var(--navy-ink); stroke-width: 3px; stroke-linejoin: round; } .wm-marker:hover .wm-dot, .wm-marker:focus-visible .wm-dot { fill: var(--orange-soft); } .wm-marker:focus-visible { outline: none; } .wm-marker:focus-visible .wm-halo { fill: rgba(255, 148, 38, .3); } .map-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-top: 1.1rem; } .map-legend .region-card { padding: .6rem .8rem; } @media (max-width: 575.98px) { .map-shell { padding: 1rem; } .wm-marker text { font-size: 15px; } } .region-card .name { font-weight: 700; font-size: .88rem; color: var(--navy-ink); } /* ---------- service page: region enquiry modal --------------------------- Reuses the site's real enquiry pipeline (postEnquiry -> enquiry-submit.php) rather than the mockup's placeholder "connect this to your CRM" form, so a region click actually reaches Admin > Enquiries. */ .region-modal { position: fixed; inset: 0; background: rgba(10,22,51,.6); display: none; align-items: center; justify-content: center; padding: 1.25rem; z-index: 1080; } .region-modal.open { display: flex; } .region-modal-card { background: #ffffff; width: min(100%, 440px); border-radius: var(--radius); padding: 1.6rem; position: relative; box-shadow: var(--shadow-lg); } .region-modal-card h3 { font-size: 1.1rem; margin: 0 0 .3rem; color: var(--navy-ink); } .region-modal-card p { font-size: .86rem; color: var(--body); margin: 0 0 .9rem; } .region-modal-close { position: absolute; right: .8rem; top: .7rem; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--body); width: 32px; height: 32px; border-radius: 50%; } .region-modal-close:hover { background: #f2f5fc; } /* ---------- service page: an accent display font, hero H1 only ---------- */ .svc-display { font-family: "Fraunces", "Plus Jakarta Sans", serif; font-weight: 600; } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- responsive ---------- */ @media (max-width: 1199.98px) { .edge-cell.span-3 { grid-column: span 3; } .edge-cell.span-2 { grid-column: span 3; } } @media (max-width: 991.98px) { .hero { min-height: 66vh; padding-top: 3rem; } /* narrow viewports crop the video, so the scrim becomes a full veil */ .hero-scrim { background: linear-gradient(180deg, rgba(238, 244, 252, .95) 0%, rgba(238, 244, 252, .88) 55%, rgba(238, 244, 252, .72) 100%); } .credential-strip .cred { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); } .mentor-photo { max-height: 460px; margin-inline: auto; } .bg-plane-a, .bg-plane-b { opacity: .28; } } @media (max-width: 767.98px) { .edge-grid { grid-template-columns: 1fr; } .edge-cell.span-3, .edge-cell.span-2 { grid-column: span 1; } .career-card { min-height: 260px; } /* Two stacked pills eat a lot of a phone screen, so collapse both to circular icons. The labels stay in the DOM for screen readers via aria-label on each control. */ .quick-actions { right: 14px; bottom: 14px; gap: .5rem; } .quick-call span, .quick-enquire span { display: none; } .quick-call, .quick-enquire { padding: .85rem; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .career-card:hover img { transform: none; } }