/* ============================================================ BESPA-FOOD landing page (theme_spacechild) Loaded only by layout/tmpl-frontpage.php, markup in templates/theme_spacechild/tmpl-frontpage.mustache. Per-module accents arrive as --mod-color / --mod-dark / --mod-light inline custom properties (the LMS Module Color Schemes chart, via theme_spacechild_get_course_color()). [data-reveal] elements start hidden and get .sc-fp-in from js/landing-reveal.js (auto-staggered per viewport batch; the attribute value picks the direction: ""/left/right/zoom); the body class sc-fp-js gates that so everything stays visible when JS never runs. landing-reveal.js also drives the .sc-fp-scrollbar progress bar, stat count-ups and a light hero parallax. Hero copy/collage entrances are pure CSS keyframes, so they run even without JS. ============================================================ */ .sc-landing { --fp-navy: #0b1220; --fp-navy-2: #101a30; --fp-ink: #0f172a; --fp-muted: #5b6b84; --fp-line: #e5eaf3; --fp-surface: #f6f8fc; --fp-brand: #1e5bbe; --fp-brand-dark: #0b1f4d; --fp-radius: 22px; background: #fff; } /* Edge-to-edge: strip every gutter/radius the Space theme puts on its page wrappers so landing sections span the full viewport width. */ .sc-landing #page-wrapper, .sc-landing #page, .sc-landing .main-inner { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: transparent; } /* The theme offsets #page below its fixed navbar (position:relative; top:59px; height:calc(100vh - 59px)) — no navbar here, so undo both. */ .sc-landing #page { top: 0 !important; height: auto !important; min-height: 100vh; } /* The Space theme reserves top space on /#topofscroll for its fixed navbar; the landing page has no navbar, so remove the reservation too. */ body.sc-landing { margin: 0 !important; padding-top: 0 !important; } .sc-landing #topofscroll { margin-top: 0 !important; padding-top: 0 !important; } /* theme_space extends every with its own `.underline--anim` hover effect (scss/bootstrap/_type.scss) — a ::before bar that grows in on hover. This page's links (nav, buttons, path cards, ...) all have their own bespoke hover treatments, so that vendor bar just shows up as a second underline stacked with ours. Kill it once, for every link on this page, rather than fighting it per component. */ .sc-landing a::before { content: none !important; } /* ── Scroll progress bar (six module primaries as one gradient) ── */ .sc-fp-scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1060; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #1e5bbe, #00796b, #2e7d32, #f59e0b, #6d5bd0, #475569); border-radius: 0 3px 3px 0; } /* ── Scroll reveal ── */ .sc-fp-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .sc-fp-js [data-reveal="left"] { transform: translateX(-40px); } .sc-fp-js [data-reveal="right"] { transform: translateX(40px); } .sc-fp-js [data-reveal="zoom"] { transform: scale(0.93) translateY(18px); } .sc-fp-js [data-reveal].sc-fp-in { opacity: 1; transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .sc-fp-js [data-reveal] { opacity: 1; transform: none; transition: none; } .sc-fp-scrollbar { display: none; } } /* Anchor targets sit clear of the sticky nav below. */ .sc-landing [id] { scroll-margin-top: 88px; } /* ============================================================ TOP NAV Bespoke sticky bar for this page only (no theme_space navbar/drawer here — see layout/tmpl-frontpage.php). Links are in-page anchors to each section; js/landing-reveal.js's initNav() drives the mobile toggle, smooth scroll, and active-link tracking as sections pass. ============================================================ */ /* position: fixed (not sticky) — sticky keeps the nav in normal document flow, so it would sit in its own solid-white row *above* the hero instead of overlapping it. Fixed takes it out of flow so the hero's own gradient shows straight through the transparent bar underneath; the hero's existing top padding already leaves enough clearance for the bar's height, so no compensating body/page padding is needed. */ .sc-fp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1070; background: transparent; border-bottom: 1px solid transparent; /* Side padding lives here (not on .sc-fp-nav-inner) to match how .sc-fp-hero / .sc-fp-section apply their own 24px padding on the outer element and center an unpadded max-width box inside — the two have to use the same structure or their content ends up at different left insets once the viewport exceeds ~1248px. */ padding: 0 24px; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* Once scrolled past the hero (js/landing-reveal.js toggles this), pick up a solid bar so the links stay readable over the sections below — while still starting fully transparent against the hero background itself. */ .sc-fp-nav.is-scrolled { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--fp-line); box-shadow: 0 8px 24px -20px rgba(11, 18, 32, 0.4); } /* While the mobile drawer is open (js/landing-reveal.js's openMenu()), drop the blur specifically — backdrop-filter on this ancestor creates a new containing block for the drawer's position:fixed, breaking its top:0/bottom:0 full-height sizing (see the comment on .sc-fp-nav--menu-open in initNav()). An opaque background reads the same at a glance and the drawer + its own backdrop scrim cover the bar anyway. */ .sc-fp-nav.sc-fp-nav--menu-open { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } @media (prefers-reduced-motion: reduce) { .sc-fp-nav { transition: none; } } .sc-fp-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; } .sc-fp-nav-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.92rem; color: var(--fp-ink); text-decoration: none; flex: 0 0 auto; } .sc-fp-nav-brand:hover { text-decoration: none; color: var(--fp-ink); } .sc-fp-nav-brand img { height: 60px; width: auto; display: block; } @media (max-width: 600px) { .sc-fp-nav-brand img { height: 46px; } } .sc-fp-nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--fp-line); background: #fff; color: var(--fp-ink); font-size: 1.05rem; cursor: pointer; } .sc-fp-nav-menu { display: flex; align-items: center; gap: 28px; flex: 1 1 auto; justify-content: flex-end; } .sc-fp-nav-links { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; } .sc-fp-nav-link { position: relative; font-size: 0.88rem; font-weight: 600; /* Dark ink (not the lighter --fp-muted) so links stay readable over the hero background image's brighter teal/green band on the right, not just the near-white gradient area on the left — a mid-gray reads fine against a plain light background but disappears against a mid-toned photo behind the transparent (pre-scroll) nav. The shadow adds a soft light halo for the same reason; harmless once .is-scrolled gives the bar a solid background. */ color: var(--fp-ink); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.5); text-decoration: none; padding: 6px 0; transition: color 0.18s ease; } /* The icons exist for the mobile drawer list (see @media max-width:900px below) — hidden here so the horizontal desktop bar stays plain text. */ .sc-fp-nav-link i { display: none; } .sc-fp-nav-link:hover, .sc-fp-nav-link:focus { color: var(--fp-brand); text-decoration: none; } .sc-fp-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--fp-brand); transform: scaleX(0); transition: transform 0.2s ease; } .sc-fp-nav-link:hover::after, .sc-fp-nav-link.is-active::after { transform: scaleX(1); } .sc-fp-nav-link.is-active { color: var(--fp-brand); } .sc-fp-nav-actions { display: flex; align-items: center; flex: 0 0 auto; } .sc-fp-btn--sm { padding: 5px 12px; font-size: 0.72rem; border-radius: 9px; gap: 5px; } .sc-fp-nav-backdrop, .sc-fp-nav-menu-head, .sc-fp-nav-close { display: none; } @media (max-width: 900px) { .sc-fp-nav-toggle { display: inline-flex; } /* Dimmed scrim behind the drawer, click-to-close (see initNav() in js/landing-reveal.js). Sits below the drawer but above everything else — both are descendants of .sc-fp-nav (z-index: 1070), so they only need to out-rank each other, not the whole page. */ .sc-fp-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(11, 18, 32, 0.5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sc-fp-nav-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Off-canvas drawer sliding in from the right, full viewport height — a proper "drawer" rather than a dropdown panel under the bar. */ .sc-fp-nav-menu { position: fixed; top: 0; right: 0; left: auto; bottom: 0; z-index: 2; width: min(320px, 84vw); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 18px 22px 28px; background: #fff; border-left: 1px solid var(--fp-line); box-shadow: -32px 0 60px -28px rgba(11, 18, 32, 0.45); transform: translateX(100%); opacity: 1; pointer-events: none; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); overflow-y: auto; } .sc-fp-nav-menu.is-open { transform: translateX(0); pointer-events: auto; } .sc-fp-nav-menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--fp-line); } .sc-fp-nav-menu-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fp-muted); } .sc-fp-nav-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--fp-line); background: var(--fp-surface); color: var(--fp-ink); font-size: 0.95rem; cursor: pointer; } .sc-fp-nav-close:hover { background: #eef4fc; } .sc-fp-nav-links { flex-direction: column; align-items: stretch; gap: 3px; } /* Icon + label rows with a hover/active pill background, rather than the desktop underline — reads as a proper app-style menu list. */ .sc-fp-nav-link { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 12px; color: var(--fp-ink); text-shadow: none; } .sc-fp-nav-link i { display: inline-block; flex: 0 0 auto; width: 18px; font-size: 0.85rem; color: var(--fp-brand); text-align: center; } .sc-fp-nav-link::after { display: none; } .sc-fp-nav-link:hover, .sc-fp-nav-link:focus { background: var(--fp-surface); color: var(--fp-ink); } .sc-fp-nav-link.is-active { background: #eaf3ff; color: var(--fp-brand); } .sc-fp-nav-link.is-active i { color: var(--fp-brand); } .sc-fp-nav-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--fp-line); } .sc-fp-nav-actions .sc-fp-btn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .sc-fp-nav-menu, .sc-fp-nav-backdrop { transition: none; } } /* ============================================================ HERO ============================================================ */ .sc-fp-hero { position: relative; overflow: hidden; /* Fallback gradient shows if herobgimage is ever empty; the mustache inline style="background-image" (pix/hero/hero_back.png) overrides just that layer when present, so these size/position/repeat longhands need to stay separate from a `background:` shorthand (which would reset them to initial on every render). */ background-color: #eef4fc; background-image: radial-gradient(1000px 600px at 85% -10%, rgba(30, 91, 190, 0.14), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(0, 121, 107, 0.12), transparent 60%), linear-gradient(160deg, #f8fbff 0%, #eef4fc 55%, #e9f3f6 100%); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--fp-ink); /* min-height + flex centering (rather than balancing top/bottom padding by hand) so the heading/visual/partner-logo block stays vertically centered in the viewport regardless of content height or screen size. Top padding still has to clear the fixed .sc-fp-nav even when there's no extra slack to center into. */ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(110px, 12vw, 140px) 24px; } .sc-fp-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; } /* Hero entrance — pure CSS keyframes (run with or without JS). */ @keyframes sc-fp-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .sc-fp-hero-copy { /* transform (not margin-top) — margin would grow this column's own height past the visual column's, which grows the grid row and drags the trust/partner-logos band (a later sibling in normal flow) down with it. A transform shifts the text purely visually, leaving the visual column and everything after it untouched. */ transform: translateY(56px); } .sc-fp-hero-copy > * { animation: sc-fp-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .sc-fp-hero-copy > :nth-child(1) { animation-delay: 0.05s; } .sc-fp-hero-copy > :nth-child(2) { animation-delay: 0.15s; } .sc-fp-hero-copy > :nth-child(3) { animation-delay: 0.25s; } .sc-fp-hero-copy > :nth-child(4) { animation-delay: 0.35s; } .sc-fp-hero-copy > :nth-child(5) { animation-delay: 0.45s; } .sc-fp-hero-visual { animation: sc-fp-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both; } @media (prefers-reduced-motion: reduce) { .sc-fp-hero-copy > *, .sc-fp-hero-visual { animation: none; } } .sc-fp-title { margin: 4px 0 18px; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: var(--fp-ink); /* theme_space's global reboot sets word-break: break-word on every element; combined with initTitleWave() splitting the accent phrase into individual per-letter s (so each letter can ripple independently), that break-word finds a "safe" opportunity between any two letters and wraps mid-word (e.g. "Expertis" / "e") on narrow screens instead of only at real word boundaries. */ word-break: keep-all; overflow-wrap: normal; } .sc-fp-title-grad { display: inline-block; /* No-JS fallback: a static module-palette gradient clipped to the text (Blue → Teal → Emerald). landing-reveal.js's initTitleWave() splits this phrase into per-letter spans (each pre-coloured along the same ramp) and adds .sc-fp-title-split, which turns the gradient off in favour of those per-letter colours so the wave animation below can run on individual glyphs. */ background: linear-gradient(92deg, #1e5bbe 0%, #00796b 50%, #2e7d32 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .sc-fp-title-split { background: none; -webkit-text-fill-color: unset; color: unset; } /* Each letter bobs upward in turn, staggered by its index (--i, set inline), so a wave travels left-to-right through the phrase and loops. */ .sc-fp-ltr { display: inline-block; animation: sc-fp-letter-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.045s); } @keyframes sc-fp-letter-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.16em); } } @media (prefers-reduced-motion: reduce) { .sc-fp-ltr { animation: none; } } .sc-fp-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 600; line-height: 1.6; color: var(--fp-ink); max-width: 56ch; margin: 0 0 14px; } .sc-fp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } @media (max-width: 600px) { .sc-fp-actions .sc-fp-btn { width: 100%; justify-content: center; } } .sc-fp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 14px; font-size: 0.98rem; font-weight: 700; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .sc-fp-btn:focus-visible { outline: 3px solid #6fb4ff; outline-offset: 2px; } .sc-fp-btn--primary { position: relative; overflow: hidden; background: linear-gradient(135deg, #2c72e0 0%, #1e5bbe 100%); color: #fff; box-shadow: 0 10px 26px -8px rgba(30, 91, 190, 0.65); } /* Shine sweep across the primary CTA on hover. */ .sc-fp-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; } .sc-fp-btn--primary:hover::after { left: 130%; } .sc-fp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(30, 91, 190, 0.8); color: #fff; text-decoration: none; } .sc-fp-btn--ghost { background: #fff; border: 1px solid var(--fp-line); color: var(--fp-ink); box-shadow: 0 6px 18px -10px rgba(11, 18, 32, 0.2); } .sc-fp-btn--ghost:hover { background: #f2f6fd; border-color: color-mix(in srgb, #1e5bbe 30%, var(--fp-line)); transform: translateY(-2px); color: var(--fp-brand-dark); text-decoration: none; } .sc-fp-btn--ghost i { color: #1e5bbe; } .sc-fp-btn--xl { padding: 17px 34px; font-size: 1.05rem; border-radius: 16px; } /* Feature pills — icon badge (module-palette colours) + label, each in its own white card. Replaces the old plain checkmark-icon + text row for a look that matches the icon-badge language used elsewhere on the page (.sc-fp-about-icon, .sc-fp-how-num, ...). */ .sc-fp-hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 46px; } .sc-fp-proof-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--fp-line); box-shadow: 0 10px 22px -16px rgba(11, 18, 32, 0.3); font-size: 0.85rem; font-weight: 700; color: var(--fp-ink); transition: transform 0.2s ease, box-shadow 0.2s ease; } .sc-fp-proof-item:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(11, 18, 32, 0.4); } .sc-fp-proof-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 0.8rem; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--proof-color, #1e5bbe) 65%, transparent); } .sc-fp-proof-icon--blue { --proof-color: #1e5bbe; background: linear-gradient(135deg, #2c72e0, #1e5bbe); } .sc-fp-proof-icon--amber { --proof-color: #f59e0b; background: linear-gradient(135deg, #fbbf24, #f59e0b); } .sc-fp-proof-icon--teal { --proof-color: #00796b; background: linear-gradient(135deg, #14b8a6, #00796b); } @media (max-width: 600px) { /* Full-width rows, matching the buttons above them, rather than shrink-wrapped pills — reads more consistently as one stacked list on narrow screens. */ .sc-fp-proof-item { width: 100%; padding: 10px 16px 10px 8px; font-size: 0.85rem; } .sc-fp-proof-icon { width: 30px; height: 30px; font-size: 0.8rem; } } /* ── Trust band: "Trusted by..." label + partner/funder logos ── Its own full-width block spanning the entire hero content width (not the narrower copy column), sitting at the bottom of the hero — same max-width/centering as .sc-fp-hero-inner so its edges line up with the heading and collage above. The flanking lines on .sc-fp-trust-label itself are the only divider — no separate rule above the label. */ .sc-fp-trust { max-width: 1200px; margin: clamp(36px, 5vw, 56px) auto 0; } .sc-fp-trust-label { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 22px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fp-muted); } .sc-fp-trust-label::before, .sc-fp-trust-label::after { content: ""; flex: 1 1 auto; max-width: 90px; height: 1px; background: var(--fp-line); } /* Logos wrap and stay evenly spaced rather than scrolling. */ .sc-fp-partners-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; } .sc-fp-partner-card { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--fp-line); box-shadow: 0 12px 28px -16px rgba(11, 18, 32, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .sc-fp-partner-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -16px rgba(11, 18, 32, 0.32); } .sc-fp-partner-logo { display: block; height: 60px; width: auto; max-width: 240px; object-fit: contain; } @media (max-width: 600px) { .sc-fp-trust-label { gap: 12px; margin-bottom: 16px; font-size: 0.68rem; } .sc-fp-trust-label::before, .sc-fp-trust-label::after { max-width: 36px; } .sc-fp-partners-band { flex-direction: column; align-items: stretch; gap: 12px; } .sc-fp-partner-card { width: 100%; padding: 14px 16px; border-radius: 13px; } .sc-fp-partner-logo { height: 42px; max-width: 160px; } } /* ── Hero image collage ── One dominant photo filling the frame, a small accent photo overlapping its bottom-right corner, and four floating glass chips ringed around the edges. Everything drifts gently; landing-reveal.js adds a light parallax on the whole collage. */ .sc-fp-hero-visual { display: flex; flex-direction: column; align-items: center; } .sc-fp-collage { position: relative; width: min(440px, 100%); aspect-ratio: 4 / 5; } .sc-fp-collage-glow { position: absolute; inset: 10% 4%; border-radius: 50%; background: conic-gradient(from 210deg, rgba(30, 91, 190, 0.45), rgba(0, 121, 107, 0.35), rgba(46, 125, 50, 0.3), rgba(109, 91, 208, 0.4), rgba(30, 91, 190, 0.45)); filter: blur(64px); opacity: 0.35; } @keyframes sc-fp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .sc-fp-collage-main { position: absolute; inset: 0; z-index: 1; margin: 0; overflow: hidden; border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--mod-color, #1e5bbe) 80%, white), var(--mod-dark, #0b1f4d)); border: 3px solid #fff; box-shadow: 0 28px 55px -20px rgba(11, 18, 32, 0.35); transition: transform 0.25s ease; } .sc-fp-collage-main:hover { transform: translateY(-6px) scale(1.02); } .sc-fp-collage-main img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Secondary accent photo — a proper white "photo card" using the same glass background/blur/shadow language as the floating chips (see .sc-fp-collage-chip below), rather than a bare bordered image, so it reads as one of the cards instead of a mismatched leftover tile. */ .sc-fp-collage-secondary { position: absolute; width: 44%; bottom: -10%; right: -12%; z-index: 2; margin: 0; padding: 8px 8px 11px; border-radius: 20px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 45px -16px rgba(11, 18, 32, 0.35); animation: sc-fp-float 8s ease-in-out infinite; transition: transform 0.25s ease; } .sc-fp-collage-secondary:hover { transform: translateY(-6px) scale(1.02); } .sc-fp-collage-secondary-media { overflow: hidden; border-radius: 13px; aspect-ratio: 4 / 3; background: linear-gradient(150deg, color-mix(in srgb, var(--mod-color, #1e5bbe) 80%, white), var(--mod-dark, #0b1f4d)); } .sc-fp-collage-secondary-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sc-fp-collage-secondary-caption { display: block; margin-top: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; color: var(--fp-ink); text-align: center; } .sc-fp-collage-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: 15px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 45px -16px rgba(11, 18, 32, 0.35); animation: sc-fp-float 6.5s ease-in-out infinite; } .sc-fp-collage-chip--badge { top: -4%; right: -8%; animation-delay: -1.2s; } .sc-fp-collage-chip--cert { top: 42%; right: -20%; animation-delay: -3.8s; } /* Wider card (progress header + bar + footer, not an icon row) — its own flex-direction and width, everything else (background/shadow/float animation) still comes from the shared .sc-fp-collage-chip base. */ .sc-fp-collage-chip--progress { bottom: 14%; left: -18%; width: 60%; flex-direction: column; align-items: stretch; gap: 7px; padding: 13px 16px; animation-delay: -5s; } .sc-fp-collage-chip--trust { bottom: -8%; left: 24%; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 16px; animation-delay: -1.8s; } .sc-fp-collage-chip-icon { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #2c72e0, #1e5bbe); font-size: 1.05rem; box-shadow: 0 8px 18px -6px rgba(30, 91, 190, 0.6); } /* .sc-fp-collage-chip .sc-fp-collage-chip-icon (two classes) rather than .sc-fp-collage-chip-icon alone — the icon wrapper is itself a , so a single-class selector here loses the specificity fight against .sc-fp-collage-chip span (class + type) below, which was winning and turning the icon glyph the muted label-text grey instead of white. */ .sc-fp-collage-chip .sc-fp-collage-chip-icon { color: #fff; } /* Gold/ribbon for the earned badge — was sharing the base blue, which read as "certificate" (blue = official/document) rather than "medal earned"; amber is the module-palette colour used for badges/medals everywhere else on this page (see .sc-fp-proof-icon--amber, .sc-fp-badge-shield). */ .sc-fp-collage-chip-icon--badge { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.6); } /* Green for the certificate — reads as "official document/approved" rather than the badge's gold. */ .sc-fp-collage-chip-icon--cert { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 8px 18px -6px rgba(22, 163, 74, 0.6); } /* Small "earned" checkmark badge overlapping the medal icon's corner. */ .sc-fp-collage-chip-check { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; color: #fff; font-size: 0.5rem; box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.35); } .sc-fp-collage-chip strong { display: block; font-size: 0.8rem; color: var(--fp-ink); line-height: 1.25; } .sc-fp-collage-chip span { font-size: 0.7rem; color: var(--fp-muted); } /* Progress card internals (header row, bar, footer row). */ .sc-fp-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .sc-fp-progress-label { font-size: 0.68rem; font-weight: 700; color: var(--fp-muted); } .sc-fp-progress-value { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fp-ink); } .sc-fp-progress-value--sm { font-size: 0.78rem; } .sc-fp-progress-track { height: 7px; border-radius: 4px; background: var(--fp-line); overflow: hidden; } .sc-fp-progress-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2c72e0, #1e5bbe); } /* Trust card internals (star row + label). */ .sc-fp-trust-stars { display: flex; gap: 3px; font-size: 0.78rem; color: #f59e0b; } .sc-fp-collage-chip--trust span { font-size: 0.72rem; font-weight: 700; color: var(--fp-ink); line-height: 1.3; } @media (prefers-reduced-motion: reduce) { .sc-fp-collage-secondary, .sc-fp-collage-chip { animation: none; } } /* ── Stats band ── Lives inside .sc-fp-about (a normal section — no straddling/translateY treatment), so this is just the card grid itself. */ .sc-fp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Each stat is its own module-scheme gradient card (--m1/2/4/5 below). */ .sc-fp-stat { --st-color: #1e5bbe; --st-dark: #0b1f4d; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 19px 20px 18px; border-radius: 18px; background: linear-gradient(140deg, var(--st-color) 0%, var(--st-dark) 95%); color: #fff; box-shadow: 0 26px 52px -20px color-mix(in srgb, var(--st-color) 60%, rgba(11, 18, 32, 0.5)); transition: transform 0.22s ease, box-shadow 0.22s ease; } .sc-fp-stat--m1 { --st-color: #1e5bbe; --st-dark: #0b1f4d; } /* Module 1 Blue */ .sc-fp-stat--m2 { --st-color: #00796b; --st-dark: #083344; } /* Module 2 Teal */ .sc-fp-stat--m4 { --st-color: #f59e0b; --st-dark: #92400e; } /* Module 4 Amber */ .sc-fp-stat--m5 { --st-color: #6d5bd0; --st-dark: #312e81; } /* Module 5 Purple */ /* Soft light bloom in the top-left corner of each card. */ .sc-fp-stat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(140px 100px at 12% 0%, rgba(255, 255, 255, 0.22), transparent 70%); pointer-events: none; } .sc-fp-stat:hover { transform: translateY(-6px); box-shadow: 0 34px 64px -22px color-mix(in srgb, var(--st-color) 75%, rgba(11, 18, 32, 0.5)); } /* Oversized ghost icon anchored to the corner. */ .sc-fp-stat-watermark { position: absolute; right: -10px; bottom: -14px; font-size: 3.9rem; line-height: 1; color: rgba(255, 255, 255, 0.13); transform: rotate(-12deg); pointer-events: none; } .sc-fp-stat-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.92rem; color: #fff; margin-bottom: 11px; backdrop-filter: blur(4px); } .sc-fp-stat-value { display: block; font-size: clamp(1.65rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .sc-fp-stat-label { display: block; margin-top: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: rgba(255, 255, 255, 0.88); } /* ============================================================ SHARED SECTION CHROME ============================================================ */ .sc-fp-section { padding: clamp(64px, 9vw, 120px) 24px; } .sc-fp-section-inner { max-width: 1200px; margin: 0 auto; } .sc-fp-section-head { max-width: 640px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; } .sc-fp-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #eaf3ff; color: #1e5bbe; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .sc-fp-tag--light { background: rgba(255, 255, 255, 0.1); color: #9fc3ff; } .sc-fp-h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--fp-ink); margin: 0 0 14px; } .sc-fp-h2--light { color: #fff; } .sc-fp-section-lead { font-size: 1.02rem; line-height: 1.7; color: var(--fp-muted); margin: 0; } .sc-fp-section-lead--light { color: #aebbd4; } /* ── About the programme ── Same copy as always (two descriptive paragraphs) — this is a purely visual pass, no wording changes. Cards get a spotlight treatment (soft blurred colour blob + sliding accent bar), a pulsing icon badge, a growing underline on the heading and a drop-cap on the paragraph, plus a gentle lift + tilt on hover, so the pair reads as a designed, alive part of the page instead of two plain text blocks. Two columns keep line length readable at this length; collapses to one above .sc-fp-stats's own mobile breakpoint. The stat cards directly below are untouched. */ /* Bundled backdrop (pix/hero/section_2_back.png — already a very pale health/science motif) behind the heading + cards; the mustache inline style sets background-image when present, this just handles sizing so it covers the section and doesn't repeat/tile. */ .sc-fp-about { background-color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; } .sc-fp-about-copy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: clamp(36px, 5vw, 56px); perspective: 1400px; } .sc-fp-about-card { --about-color: #1e5bbe; --about-dark: #0b1f4d; position: relative; overflow: hidden; background: linear-gradient(165deg, #fff 0%, var(--fp-surface) 100%); border: 1px solid var(--fp-line); border-radius: calc(var(--fp-radius) + 4px); padding: 34px 32px 32px; box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.25); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease; } .sc-fp-about-card--alt { --about-color: #00796b; --about-dark: #083344; } /* Sliding accent bar — always faintly visible, snaps to full strength and width on hover instead of a flat opacity swap. */ .sc-fp-about-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--about-color), var(--about-dark)); opacity: 0.35; transform: scaleX(0.3); transform-origin: left center; transition: transform 0.35s ease, opacity 0.35s ease; } /* Big soft colour blob anchored in the corner — same "glow" language as the stat cards' watermark icons, ties the two rows together. */ .sc-fp-about-card::after { content: ""; position: absolute; width: 240px; height: 240px; right: -80px; bottom: -100px; border-radius: 50%; background: radial-gradient(circle, var(--about-color) 0%, transparent 72%); opacity: 0.1; pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; } .sc-fp-about-card:hover { transform: translateY(-8px) rotateX(2deg); border-color: color-mix(in srgb, var(--about-color) 32%, var(--fp-line)); box-shadow: 0 32px 60px -26px color-mix(in srgb, var(--about-color) 45%, transparent); } .sc-fp-about-card:hover::before { opacity: 1; transform: scaleX(1); } .sc-fp-about-card:hover::after { opacity: 0.18; transform: scale(1.15); } .sc-fp-about-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--about-color), var(--about-dark)); color: #fff; font-size: 1.25rem; margin-bottom: 20px; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--about-color) 55%, transparent); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Slow outward-fading ring, a quiet "this is alive" cue on an otherwise static card. */ .sc-fp-about-icon::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--about-color); opacity: 0.45; animation: sc-fp-about-ring 2.8s ease-out infinite; } @keyframes sc-fp-about-ring { 0% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } } .sc-fp-about-card:hover .sc-fp-about-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--about-color) 65%, transparent); } .sc-fp-about-card h3 { position: relative; z-index: 1; font-size: 1.14rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fp-ink); margin: 0 0 14px; } /* Underline grows on hover instead of the heading just sitting there. */ .sc-fp-about-card h3::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--about-color), var(--about-dark)); transition: width 0.3s ease; } .sc-fp-about-card:hover h3::after { width: 60px; } .sc-fp-about-card p { position: relative; z-index: 1; font-size: 0.96rem; line-height: 1.8; color: var(--fp-muted); margin: 0; } /* Drop cap — same text, a touch more editorial polish. */ .sc-fp-about-card p::first-letter { float: left; line-height: 0.72; padding: 4px 8px 0 0; font-size: 2.7rem; font-weight: 800; color: var(--about-color); } @media (max-width: 800px) { .sc-fp-about-copy { grid-template-columns: 1fr; gap: 18px; perspective: none; } .sc-fp-about-card { padding: 26px 24px; } .sc-fp-about-card:hover { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .sc-fp-about-icon::after { animation: none; opacity: 0.3; } .sc-fp-about-card { transition: box-shadow 0.2s ease, border-color 0.2s ease; } .sc-fp-about-card:hover { transform: none; } } /* ============================================================ WHAT YOU'LL ACHIEVE ============================================================ */ .sc-fp-achieve { background: var(--fp-surface); padding-top: clamp(48px, 6vw, 76px); /* stats band sits just above in its own wrap */ } .sc-fp-achieve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .sc-fp-achieve-card { --ac-color: #1e5bbe; --ac-light: #eaf3ff; position: relative; background: #fff; border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: 28px 26px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; overflow: hidden; } .sc-fp-achieve-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ac-color); opacity: 0.85; } .sc-fp-achieve-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--ac-color) 35%, transparent); border-color: color-mix(in srgb, var(--ac-color) 30%, var(--fp-line)); } .sc-fp-achieve-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--ac-light); color: var(--ac-color); font-size: 1.25rem; margin-bottom: 18px; } .sc-fp-achieve-card h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fp-ink); margin: 0 0 8px; } .sc-fp-achieve-card p { font-size: 0.9rem; line-height: 1.65; color: var(--fp-muted); margin: 0; } /* Module scheme accents (LMS Module Color Schemes chart, modules 1-6). */ .sc-fp-ac-1 { --ac-color: #1e5bbe; --ac-light: #eaf3ff; } .sc-fp-ac-2 { --ac-color: #00796b; --ac-light: #e6f7f5; } .sc-fp-ac-3 { --ac-color: #2e7d32; --ac-light: #eef8ee; } .sc-fp-ac-4 { --ac-color: #f59e0b; --ac-light: #fff7e6; } .sc-fp-ac-5 { --ac-color: #6d5bd0; --ac-light: #f2f0ff; } .sc-fp-ac-6 { --ac-color: #475569; --ac-light: #f1f5f9; } /* ============================================================ LEARNING JOURNEY (module path) ============================================================ */ /* The stats band's wrapper already leaves half a band of empty space above this section, so trim the default section padding. */ .sc-fp-journey { padding-top: clamp(20px, 3.5vw, 48px); } /* Alternating timeline: a center spine colored with all six module primaries; cards zigzag left/right of it (odd left, even right), each tied to the spine by a numbered marker and a short connector arm in its module color. Collapses to a left-hand spine under 860px. */ .sc-fp-path { list-style: none; position: relative; margin: 0 auto; padding: 10px 0 4px; max-width: 1000px; } .sc-fp-path::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: linear-gradient(180deg, #1e5bbe, #00796b, #2e7d32, #f59e0b, #6d5bd0, #475569); opacity: 0.3; } .sc-fp-path-item { position: relative; width: calc(50% - 52px); margin: 0 0 44px; } .sc-fp-path-item:last-child { margin-bottom: 0; } .sc-fp-path-item:nth-child(odd) { margin-right: auto; } .sc-fp-path-item:nth-child(even) { margin-left: auto; } /* Reveal slides each card in from its own side of the spine. */ .sc-fp-js .sc-fp-path-item[data-reveal]:nth-child(odd) { transform: translateX(-44px); } .sc-fp-js .sc-fp-path-item[data-reveal]:nth-child(even) { transform: translateX(44px); } .sc-fp-js .sc-fp-path-item[data-reveal].sc-fp-in { transform: none; } /* Connector arm from the card edge to the spine. */ .sc-fp-path-item::before { content: ""; position: absolute; top: 46px; width: 52px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--mod-color, #1e5bbe) 45%, transparent); } .sc-fp-path-item:nth-child(odd)::before { right: -52px; } .sc-fp-path-item:nth-child(even)::before { left: -52px; } /* Numbered marker sitting on the spine. */ .sc-fp-path-marker { position: absolute; top: 24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, var(--mod-color, #1e5bbe), var(--mod-dark, #0b1f4d)); box-shadow: 0 0 0 5px #fff, 0 0 0 9px color-mix(in srgb, var(--mod-color, #1e5bbe) 28%, transparent), 0 12px 24px -8px color-mix(in srgb, var(--mod-color, #1e5bbe) 60%, transparent); z-index: 1; transition: transform 0.22s ease; } .sc-fp-path-item:nth-child(odd) .sc-fp-path-marker { right: -76px; } .sc-fp-path-item:nth-child(even) .sc-fp-path-marker { left: -76px; } .sc-fp-path-item:hover .sc-fp-path-marker { transform: scale(1.12); } /* Card: course image header + body. */ .sc-fp-path-card { display: block; overflow: hidden; background: #fff; border: 1px solid var(--fp-line); border-radius: 22px; text-decoration: none; box-shadow: 0 16px 38px -24px rgba(11, 18, 32, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sc-fp-path-card:hover { text-decoration: none; transform: translateY(-6px); border-color: color-mix(in srgb, var(--mod-color, #1e5bbe) 35%, var(--fp-line)); box-shadow: 0 28px 56px -22px color-mix(in srgb, var(--mod-color, #1e5bbe) 45%, transparent); } .sc-fp-path-media { position: relative; height: 150px; overflow: hidden; background: linear-gradient(140deg, color-mix(in srgb, var(--mod-color, #1e5bbe) 82%, white), var(--mod-dark, #0b1f4d)); } .sc-fp-path-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .sc-fp-path-card:hover .sc-fp-path-media img { transform: scale(1.06); } /* Color wash so the pill/medal stay readable over any image. */ .sc-fp-path-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--mod-dark, #0b1f4d) 8%, transparent) 40%, color-mix(in srgb, var(--mod-dark, #0b1f4d) 52%, transparent) 100%); pointer-events: none; } .sc-fp-path-media-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: rgba(255, 255, 255, 0.85); } .sc-fp-path-pill { position: absolute; left: 14px; bottom: 12px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--mod-dark, #0b1f4d) 80%, transparent); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .sc-fp-path-medal { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--mod-color, #1e5bbe); font-size: 0.9rem; box-shadow: 0 6px 16px -6px rgba(11, 18, 32, 0.4); } .sc-fp-path-body { padding: 18px 22px 20px; } .sc-fp-path-title { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; color: var(--fp-ink); margin: 0 0 6px; } .sc-fp-path-card:hover .sc-fp-path-title { color: var(--mod-dark, #0b1f4d); } .sc-fp-path-summary { font-size: 0.86rem; line-height: 1.6; color: var(--fp-muted); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sc-fp-path-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.78rem; font-weight: 600; color: var(--fp-muted); } .sc-fp-path-meta i { margin-right: 5px; color: var(--mod-color, #1e5bbe); } .sc-fp-path-earn { color: var(--mod-color, #1e5bbe); } .sc-fp-path-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.85rem; font-weight: 700; color: var(--mod-color, #1e5bbe); white-space: nowrap; transition: gap 0.18s ease; } .sc-fp-path-card:hover .sc-fp-path-go { gap: 13px; } /* Single-side timeline below 860px: spine on the left, all cards right. */ @media (max-width: 860px) { .sc-fp-path::before { left: 22px; margin-left: 0; } .sc-fp-path-item, .sc-fp-path-item:nth-child(odd), .sc-fp-path-item:nth-child(even) { width: auto; margin-left: 64px; margin-right: 0; } .sc-fp-path-item:last-child { margin-bottom: 0; } .sc-fp-path-item:nth-child(odd)::before, .sc-fp-path-item:nth-child(even)::before { left: -42px; right: auto; width: 42px; } .sc-fp-path-marker, .sc-fp-path-item:nth-child(odd) .sc-fp-path-marker, .sc-fp-path-item:nth-child(even) .sc-fp-path-marker { left: -62px; right: auto; width: 40px; height: 40px; font-size: 0.9rem; box-shadow: 0 0 0 4px #fff, 0 0 0 7px color-mix(in srgb, var(--mod-color, #1e5bbe) 28%, transparent), 0 10px 20px -8px color-mix(in srgb, var(--mod-color, #1e5bbe) 60%, transparent); } /* One consistent upward reveal once everything is on the same side. */ .sc-fp-js .sc-fp-path-item[data-reveal]:nth-child(odd), .sc-fp-js .sc-fp-path-item[data-reveal]:nth-child(even) { transform: translateY(28px); } .sc-fp-js .sc-fp-path-item[data-reveal].sc-fp-in { transform: none; } } /* ============================================================ RECOGNITION (dark band): badges, leaderboard, certification ============================================================ */ .sc-fp-cert { position: relative; overflow: hidden; background: radial-gradient(700px 420px at 90% 10%, rgba(30, 91, 190, 0.3), transparent 60%), radial-gradient(600px 400px at 5% 95%, rgba(0, 121, 107, 0.25), transparent 60%), linear-gradient(150deg, var(--fp-navy) 0%, var(--fp-navy-2) 100%); } /* Course imagery layer, dimmed + blurred into the navy band; the extra gradient underneath fades it out toward the edges so text stays sharp. */ .sc-fp-cert-photo { position: absolute; inset: -20px; background-size: cover; background-position: center; opacity: 0.14; filter: blur(3px) saturate(0.85); mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 30%, transparent 100%); pointer-events: none; } .sc-fp-cert-content { position: relative; z-index: 1; } .sc-fp-reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Glass reward card; each takes an accent (--rw-color) for its icon, hover glow and border tint. */ .sc-fp-reward { --rw-color: #6fb4ff; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 22px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sc-fp-reward--badges { --rw-color: #6fb4ff; } .sc-fp-reward--board { --rw-color: #4fe3c1; } .sc-fp-reward--cert { --rw-color: #fbbf24; } .sc-fp-reward:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--rw-color) 45%, transparent); box-shadow: 0 28px 56px -22px color-mix(in srgb, var(--rw-color) 35%, transparent); } .sc-fp-reward-visual { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 150px; margin-bottom: 20px; } .sc-fp-reward-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; } .sc-fp-reward-title i { color: var(--rw-color); } .sc-fp-reward-text { font-size: 0.88rem; line-height: 1.65; color: #b6c4dc; margin: 0; } /* Badge shields (one per module, in its scheme colors). Each bobs gently and takes a brief "just earned" glow flash, staggered so the flashes travel across the set like a live award ticker. */ .sc-fp-badge-shield { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 58px; height: 66px; border-radius: 15px; background: linear-gradient(160deg, color-mix(in srgb, var(--mod-color, #1e5bbe) 85%, white), var(--mod-dark, #0b1f4d)); color: #fff; box-shadow: 0 12px 24px -9px color-mix(in srgb, var(--mod-color, #1e5bbe) 65%, transparent); transition: filter 0.2s ease; animation: sc-fp-shield-bob 4.6s ease-in-out infinite, sc-fp-shield-flash 6s ease-in-out infinite; } .sc-fp-badge-shield:hover { filter: brightness(1.18); } .sc-fp-reward-visual .sc-fp-badge-shield:nth-child(1) { animation-delay: -0.4s, 0s; } .sc-fp-reward-visual .sc-fp-badge-shield:nth-child(2) { animation-delay: -1.2s, 1s; } .sc-fp-reward-visual .sc-fp-badge-shield:nth-child(3) { animation-delay: -2s, 2s; } .sc-fp-reward-visual .sc-fp-badge-shield:nth-child(4) { animation-delay: -2.8s, 3s; } .sc-fp-reward-visual .sc-fp-badge-shield:nth-child(5) { animation-delay: -3.6s, 4s; } .sc-fp-reward-visual .sc-fp-badge-shield:nth-child(6) { animation-delay: -4.4s, 5s; } @keyframes sc-fp-shield-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes sc-fp-shield-flash { 0%, 14%, 100% { box-shadow: 0 12px 24px -9px color-mix(in srgb, var(--mod-color, #1e5bbe) 65%, transparent); } 7% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mod-color, #1e5bbe) 40%, transparent), 0 12px 30px -6px color-mix(in srgb, var(--mod-color, #1e5bbe) 80%, transparent); } } .sc-fp-badge-shield i { font-size: 1.05rem; } .sc-fp-badge-shield em { font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; opacity: 0.9; } /* Mini leaderboard mock (landing-reveal.js turns it into a "live feed": bars fill on first view, then values drift every few seconds). */ .sc-fp-mini-board { width: 100%; display: flex; flex-direction: column; gap: 9px; } .sc-fp-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa3c4; } .sc-fp-mini-live { display: inline-flex; align-items: center; gap: 6px; color: #4fe3c1; } .sc-fp-mini-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4fe3c1; animation: sc-fp-live-pulse 1.8s ease-out infinite; } @keyframes sc-fp-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 227, 193, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(79, 227, 193, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 227, 193, 0); } } .sc-fp-mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); } .sc-fp-mini-rank { flex: 0 0 auto; width: 20px; text-align: center; font-size: 0.85rem; } .sc-fp-mini-row--gold .sc-fp-mini-rank { color: #fbbf24; } .sc-fp-mini-row--silver .sc-fp-mini-rank { color: #cbd5e1; } .sc-fp-mini-row--you .sc-fp-mini-rank { color: #4fe3c1; } .sc-fp-mini-avatar { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2c72e0, #1e5bbe); } .sc-fp-mini-row--you .sc-fp-mini-avatar { background: linear-gradient(135deg, #14b8a6, #00796b); } .sc-fp-mini-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .sc-fp-mini-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6fb4ff, #4fe3c1); transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .sc-fp-mini-row--you .sc-fp-mini-bar span { background: linear-gradient(90deg, #4fe3c1, #a3e635); } .sc-fp-mini-pct { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; color: #cbd7ee; } /* "You" row pops: teal ring + slight scale, inviting the visitor in. */ .sc-fp-mini-row--you { background: rgba(79, 227, 193, 0.1); border-color: rgba(79, 227, 193, 0.4); box-shadow: 0 0 0 4px rgba(79, 227, 193, 0.08); } .sc-fp-mini-row--you .sc-fp-mini-rank i { animation: sc-fp-trend-hop 1.7s ease-in-out infinite; } @keyframes sc-fp-trend-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } } /* Mini certificate mock: periodic shine sweep + softly pulsing seal. */ .sc-fp-mini-cert { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; width: min(280px, 100%); padding: 20px 18px 16px; border-radius: 16px; background: linear-gradient(180deg, #fff, #f3f6fc); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 0 0 5px rgba(245, 158, 11, 0.1), 0 22px 44px -16px rgba(0, 0, 0, 0.5); } .sc-fp-mini-cert::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-18deg); pointer-events: none; animation: sc-fp-cert-shine 5s ease-in-out infinite; } @keyframes sc-fp-cert-shine { 0%, 55% { left: -70%; } 85%, 100% { left: 135%; } } .sc-fp-mini-cert-seal { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; font-size: 1.25rem; box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.6); margin-bottom: 4px; animation: sc-fp-seal-pulse 2.6s ease-out infinite; } @keyframes sc-fp-seal-pulse { 0% { box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.6), 0 0 0 0 rgba(245, 158, 11, 0.4); } 70% { box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.6), 0 0 0 12px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 8px 18px -6px rgba(245, 158, 11, 0.6), 0 0 0 0 rgba(245, 158, 11, 0); } } .sc-fp-mini-cert strong { font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fp-ink); line-height: 1.3; } .sc-fp-mini-cert-org { font-size: 0.74rem; font-weight: 600; color: var(--fp-muted); } .sc-fp-mini-cert-verify { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: #e6f7f5; color: #00796b; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .sc-fp-badge-shield, .sc-fp-mini-live-dot, .sc-fp-mini-row--you .sc-fp-mini-rank i, .sc-fp-mini-cert::after, .sc-fp-mini-cert-seal { animation: none; } .sc-fp-mini-bar span { transition: none; } } /* ============================================================ HOW IT WORKS ============================================================ */ .sc-fp-how { background: #fff; } .sc-fp-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .sc-fp-how-step { /* Each step takes a module scheme (1 Blue, 2 Teal, 3 Emerald, 4 Amber). */ --how-color: #1e5bbe; --how-dark: #0b1f4d; position: relative; overflow: hidden; background: var(--fp-surface); border: 1px solid var(--fp-line); border-radius: var(--fp-radius); padding: 26px 24px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .sc-fp-how-grid .sc-fp-how-step:nth-child(2) { --how-color: #00796b; --how-dark: #083344; } .sc-fp-how-grid .sc-fp-how-step:nth-child(3) { --how-color: #2e7d32; --how-dark: #064e3b; } .sc-fp-how-grid .sc-fp-how-step:nth-child(4) { --how-color: #f59e0b; --how-dark: #78350f; } .sc-fp-how-step::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--how-color); opacity: 0; transition: opacity 0.2s ease; } .sc-fp-how-step:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--how-color) 30%, var(--fp-line)); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--how-color) 40%, transparent); } .sc-fp-how-step:hover::before { opacity: 1; } .sc-fp-how-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--how-color), var(--how-dark)); color: #fff; font-weight: 800; margin-bottom: 16px; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--how-color) 55%, transparent); transition: transform 0.2s ease; } .sc-fp-how-step:hover .sc-fp-how-num { transform: scale(1.08) rotate(-4deg); } .sc-fp-how-step h3 { font-size: 1rem; font-weight: 800; color: var(--fp-ink); margin: 0 0 8px; } .sc-fp-how-step p { font-size: 0.87rem; line-height: 1.6; color: var(--fp-muted); margin: 0; } /* ============================================================ FINAL CTA ============================================================ */ .sc-fp-cta { padding: 0 24px clamp(64px, 8vw, 110px); background: #fff; } .sc-fp-cta-inner { position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; text-align: center; padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: 28px; background: radial-gradient(600px 300px at 80% 0%, rgba(111, 180, 255, 0.25), transparent 60%), linear-gradient(135deg, #14244a 0%, #0b1220 100%); box-shadow: 0 30px 70px -24px rgba(11, 18, 32, 0.6); } /* Palette strip along the top of the CTA card — all six module colors. */ .sc-fp-cta-inner::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #1e5bbe, #00796b, #2e7d32, #f59e0b, #6d5bd0, #475569); } .sc-fp-cta-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; } .sc-fp-cta-lead { font-size: 1rem; color: #aebbd4; margin: 0 0 28px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .sc-fp-hero-inner { grid-template-columns: 1fr; } /* The desktop-only nudge (see .sc-fp-hero-copy above) rebalances the text against a taller side-by-side collage; once the two columns stack, the copy is simply the first block in the flow and doesn't need — or want — an extra downward shift. */ .sc-fp-hero-copy { transform: none; } /* Once the hero stacks to one column the collage is centered with plenty of clear space either side (it stays capped at 420px), so the chips' floating outside-the-edge offsets don't need flattening here — only on genuinely narrow phones, see the 600px block below. */ .sc-fp-collage { width: min(420px, 92%); margin-bottom: 28px; } .sc-fp-achieve-grid { grid-template-columns: repeat(2, 1fr); } .sc-fp-how-grid { grid-template-columns: repeat(2, 1fr); } .sc-fp-reward-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .sc-fp-reward-visual { min-height: 0; } .sc-fp-stats { gap: 14px; } .sc-fp-stat { padding: 16px 15px; } } @media (max-width: 680px) { /* The 2x2 stats band is ~twice as tall, so its top half reaches further up into the hero — reserve more room for it. */ .sc-fp-hero { padding-bottom: 150px; } .sc-fp-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sc-fp-stat { padding: 14px 13px; border-radius: 14px; } .sc-fp-stat-icon { width: 32px; height: 32px; font-size: 0.8rem; margin-bottom: 8px; } .sc-fp-stat-value { font-size: 1.45rem; } .sc-fp-stat-label { font-size: 0.62rem; } .sc-fp-stat-watermark { font-size: 2.8rem; } .sc-fp-achieve-grid { grid-template-columns: 1fr; } .sc-fp-how-grid { grid-template-columns: 1fr; } .sc-fp-path-media { height: 130px; } .sc-fp-path-body { padding: 16px 18px 18px; } /* Below ~680px, four absolutely-positioned floating chips plus the accent photo have too little clear margin around a ~350px-wide collage to avoid colliding with each other (verified: they overlapped both one another and the "Trusted by..." heading right below). Rather than keep chasing per-chip percentage offsets, drop the floating layout entirely here and stack everything as a plain, non-overlapping column instead — main photo, then accent photo, then each card full-width in DOM order. */ .sc-fp-collage { position: static; width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; } .sc-fp-collage-glow { display: none; } .sc-fp-collage-main { position: static; width: 100%; aspect-ratio: 4 / 3; } .sc-fp-collage-secondary { position: static; width: 100%; aspect-ratio: 16 / 9; } .sc-fp-collage-secondary-media { aspect-ratio: auto; height: 100%; } .sc-fp-collage-main:hover, .sc-fp-collage-secondary:hover { transform: none; } .sc-fp-collage-chip { position: static; width: 100%; max-width: none; animation: none; padding: 12px 14px; gap: 12px; } .sc-fp-collage-chip--progress { width: 100%; } }