/* Educators theme overrides * GSAP ScrollTrigger may not initialise reliably inside an SPA mount, * which leaves .effectFade elements stuck at opacity 0. Force them visible. */ .educators-theme .effectFade, .educators-theme .fadeUp, .educators-theme .fadeIn, .educators-theme .animate-box, .educators-theme [class*="effect"] { opacity: 1 !important; transform: none !important; } /* Mobile menu hamburger trigger — visible only below the lg breakpoint * (the desktop nav pill and CTA hide there). Styled as a glass pill to * match the existing header chrome. */ .educators-theme .open-mb-menu { align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.5) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08); cursor: pointer; color: #0f172a; font-size: 20px; } .educators-theme .open-mb-menu:hover { background: rgba(255, 255, 255, 0.7) !important; } @media (min-width: 992px) { .educators-theme .open-mb-menu { display: none !important; } } /* Ensure the offcanvas panel sits above everything when opened. */ .offcanvas-menu { z-index: 9999; } /* Solid dark backdrop so menu links (white) are legible. */ .offcanvas-menu .offcanvas-content { background: #0f172a !important; } .offcanvas-menu .mb-menu-link, .offcanvas-menu .mb-menu-link .text, .offcanvas-menu .close-mb-menu, .offcanvas-menu .logo-site { color: #fff !important; } .offcanvas-menu .nav-ul-mb { list-style: none; padding: 0; margin: 0; } .offcanvas-menu .nav-ul-mb li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } /* The template ships a fixed colour-settings panel and a custom cursor canvas * that bleed outside our wrapper if Bootstrap offcanvas JS positions them on * . Hide both. */ .tf-left-bar, .offcanvas-color, .cursor-trail, #goTop { display: none !important; } /* Reset the global counter-scroll body class effect (used by ScrollSmoother). */ body.counter-scroll { overflow: visible !important; height: auto !important; } /* UK Globe card on /students — replaces the default earth image with a * premium full-bleed globe pinned to the bottom of the dark card. */ .educators-theme .uk-globe-card { position: relative; overflow: hidden; } .educators-theme .uk-globe-card .uk-globe-img { display: block; width: 100%; height: auto; margin-top: -8%; object-fit: cover; object-position: center top; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%); } /* Recolor the template's red brand accent to the Cleo teal/green brand color * (HSL 168 65% 32% ≈ #1C8A6F). Override every preset variant so any * data-color-primary attribute still resolves to the Cleo brand. */ .educators-theme, .educators-theme[data-color-primary=color-primary-1], .educators-theme[data-color-primary=color-primary-2], .educators-theme[data-color-primary=color-primary-3], .educators-theme[data-color-primary=color-primary-4], .educators-theme[data-color-primary=color-primary-5], .educators-theme[data-color-primary=color-primary-6], .educators-theme[data-color-primary=color-primary-7], .educators-theme[data-color-primary=color-primary-8], .educators-theme [data-color-primary] { --brand: hsl(168 65% 32%) !important; } /* School marquee pills (replaces partner logos) */ .educators-theme .school-marquee-wrap { display: flex; flex: 1; min-width: 0; overflow: hidden; position: relative; } .educators-theme .school-marquee-wrap::after { position: absolute; content: ""; inset: 0; pointer-events: none; background: linear-gradient(90deg, #EDECEC 0%, rgba(237, 236, 236, 0) 14%, rgba(237, 236, 236, 0) 86%, #EDECEC 100%); } .educators-theme .school-marquee-track { align-items: center; animation: schoolMarquee 55s linear infinite; display: flex; flex: 0 0 auto; min-width: max-content; } .educators-theme .school-marquee-wrap:hover .school-marquee-track { animation-play-state: paused; } .educators-theme .school-pill { display: inline-flex; align-items: center; padding: 10px 20px; margin: 0 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06); font-size: 14px; font-weight: 600; color: #1f2937; white-space: nowrap; } @keyframes schoolMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .educators-theme .school-marquee-track { animation: none; } } /* Remove orange tile behind the centre Cleo logo in features section */ .educators-theme .features-center { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } .educators-theme .features-center::before, .educators-theme .features-center::after { display: none !important; } .educators-theme .features-center img { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; max-width: 180px; height: auto; } /* Section-about-us: pin Arcade demo flush with the bottom of the dark card */ .educators-theme .section-about-us .col-left { padding-bottom: 0 !important; } .educators-theme .section-about-us .arcade-demo-wrap { margin-bottom: 0 !important; border-radius: 0 0 36px 36px !important; overflow: hidden; padding-bottom: 56.25% !important; } /* Tighten gap between Partner With Cleo button and the demo iframe so the * dark card doesn't show an empty black band underneath. */ .educators-theme .section-about-us .col-left { padding-top: 18px !important; } .educators-theme .section-about-us .col-left .position-relative.z-5 .title { margin-bottom: 14px !important; } .educators-theme .section-about-us .col-left .arcade-demo-wrap { margin-top: 0 !important; } .educators-theme .section-about-us .arcade-demo-wrap iframe { top: 0 !important; height: 100% !important; } .educators-theme .section-about-us { padding-bottom: 40px !important; } /* Force the "How It Works" accordion panel visibility to follow the action's * collapsed state. Bootstrap's collapse plugin sometimes leaves the title in * its active (:not(.collapsed)) state while stripping `.show` from the panel, * which renders the description text and tag pills as `display: none` inside * an empty black card. Tying both states together via CSS keeps them in sync. */ .educators-theme .accordion-faq_item .accordion-action:not(.collapsed) + .collapse { display: block !important; height: auto !important; visibility: visible !important; overflow: visible !important; } .educators-theme .accordion-faq_item .accordion-action.collapsed + .collapse { display: none !important; height: 0 !important; } /* Schools FAQ (.accordion-asked): same desync fix as .accordion-faq_item. * Tie panel visibility to the Bootstrap button's .collapsed class so the * answer text can't vanish while the button still reads as expanded. */ .educators-theme .accordion-asked-item .accordion-asked-title:has(> .accordion-button:not(.collapsed)) + .accordion-collapse { display: block !important; height: auto !important; visibility: visible !important; overflow: visible !important; } .educators-theme .accordion-asked-item .accordion-asked-title:has(> .accordion-button.collapsed) + .accordion-collapse { display: none !important; height: 0 !important; } /* Hero: shift green aurora to warm cream tones */ .educators-theme .section-hero { background-color: #ffffff !important; } /* ---- Glass nav bar ---- */ .educators-theme .tf-header.header2 { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-top: 14px !important; } .educators-theme .tf-header.header2 .header-inner { background: transparent !important; box-shadow: none !important; border: 0 !important; gap: 16px; } .educators-theme .tf-header.header2 .box-navigation { background: rgba(255, 255, 255, 0.28) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 999px !important; padding: 8px 22px !important; box-shadow: 0 10px 35px rgba(15, 23, 42, 0.08) !important; } .educators-theme .tf-header.header2 .logo-site { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .educators-theme .tf-header.header2 .box-navigation .nav-menu-main { margin: 0 !important; } .educators-theme .tf-header.header2 .box-navigation .nav-menu-main .menu-item .item-link { white-space: nowrap !important; } .educators-theme .section-hero .hero-image { background-color: transparent !important; background-image: none !important; position: absolute !important; inset: 0 !important; overflow: hidden; z-index: 0; } .educators-theme .section-hero .hero-image .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; border-radius: 0; } .educators-theme .section-hero .container, .educators-theme .section-hero .scroll-more { position: relative; z-index: 1; } /* Replace orange pill with a waving hand */ .educators-theme .section-hero .content-wrap .title-icon { height: auto !important; display: inline-flex !important; align-items: center; justify-content: center; } .educators-theme .section-hero .content-wrap .title-icon .box, .educators-theme .section-hero .content-wrap .title-icon .title-icon-wrap { display: none !important; } .educators-theme .section-hero .content-wrap .title-icon .wave-hand { display: inline-block; font-size: 100px; line-height: 1; transform-origin: 70% 70%; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12)); } @keyframes wave-hand-anim { 0% { transform: rotate(0deg); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(18deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(12deg); } 100% { transform: rotate(0deg); } } .educators-theme .section-hero .content-wrap .title-icon .wave-hand.is-waving { animation: wave-hand-anim 1.4s ease-in-out; } @media (max-width: 768px) { .educators-theme .section-hero .content-wrap .title-icon .wave-hand { font-size: 64px; } } /* Process card icons: teal brand instead of orange */ .educators-theme .process-card .icon { background: linear-gradient(180deg, #167259 0%, #1C8770 100%) !important; box-shadow: 0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.086), 0px 22.91px 37.08px 0px rgba(28, 135, 112, 0.16), 0px 76px 123px 0px rgba(28, 135, 112, 0.05), 0px 5.05px 8.18px 0px rgba(28, 135, 112, 0.10), 0px 16.98px 27.47px 0px rgba(28, 135, 112, 0.05), 0px 56px 83px 0px rgba(28, 135, 112, 0.25), 0px 14px 34px 0px rgba(28, 135, 112, 0.25), 0px 1px 2px 0px rgba(28, 135, 112, 0.4), 0px -3px 0px 0px rgba(0, 0, 0, 0.06) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6) inset !important; } /* Benefits step: number badges + labels under each step */ .educators-theme .benefits-step .benefits-step-inner { padding-bottom: 36px; } .educators-theme .benefits-step-inner .step-item .icon { color: #1C8770; } .educators-theme .benefits-step-inner .step-item::before { content: attr(data-num); position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #167259 0%, #1C8770 100%); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(28,135,112,0.35), 0 1px 0 rgba(255,255,255,0.5) inset; z-index: 2; } .educators-theme .benefits-step-inner .step-item::after { content: attr(data-label); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: #151515; white-space: nowrap; } @media (max-width: 767px) { .educators-theme .benefits-step .benefits-step-inner { height: auto !important; padding-bottom: 30px; } .educators-theme .benefits-step-inner .step-item::after { font-size: 11px; } .educators-theme .benefits-step-inner .step-item::before { width: 20px; height: 20px; font-size: 11px; top: -8px; right: -8px; } } /* Testimonial video embed — replaces static image in quote card */ .educators-theme .testimonial-video-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #000; } .educators-theme .testimonial-video-wrap .testimonial-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } /* Team section */ .section-team .team-card { padding: 16px 8px; } .section-team .team-avatar { width: 180px; height: 180px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; background: #f4f4f4; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.18); } .section-team .team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .section-team .team-name { margin: 0 0 4px; font-weight: 600; } .section-team .team-role { margin: 0; color: #666; font-size: 14px; } @media (max-width: 575px) { .section-team .team-avatar { width: 130px; height: 130px; } } /* Prevent FOUC: hide injected theme content until animation scripts (GSAP) are ready */ .educators-theme:not(.theme-ready) #wrapper { opacity: 0; } .educators-theme.theme-ready #wrapper { opacity: 1; transition: opacity .25s ease; } /* Hero demo: silent autoplay preview + Watch button overlay */ .educators-theme .arcade-demo-wrap { background: #000; } .educators-theme .hero-preview-video { cursor: pointer; } .educators-theme .hero-preview-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%); border: 0; cursor: pointer; z-index: 2; transition: background .25s ease; } .educators-theme .hero-preview-play:hover { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); } .educators-theme .hero-preview-play-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 999px; background: rgba(255,255,255,0.95); color: hsl(168 65% 32%); box-shadow: 0 18px 50px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2); transition: transform .2s ease; } .educators-theme .hero-preview-play:hover .hero-preview-play-btn { transform: scale(1.06); } .educators-theme .hero-preview-play-btn svg { margin-left: 4px; } .educators-theme .hero-preview-play-ring { position: absolute; width: 84px; height: 84px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.55); animation: heroPreviewPulse 2.2s ease-out infinite; pointer-events: none; } @keyframes heroPreviewPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } } .educators-theme .hero-preview-play-label { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } @media (prefers-reduced-motion: reduce) { .educators-theme .hero-preview-play-ring { animation: none; } } /* Modal for full-sound demo */ .cleo-demo-modal[hidden] { display: none; } .cleo-demo-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; } .cleo-demo-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 14, 22, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cleo-demo-modal__dialog { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.5); } .cleo-demo-modal__frame { position: absolute; inset: 0; } .cleo-demo-modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; } .cleo-demo-modal__close:hover { background: rgba(255,255,255,0.22); }