/* 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; } /* Prevent marquee from blowing out page width on mobile */ .educators-theme .section-partner { overflow: hidden; } .educators-theme .section-partner .container, .educators-theme .section-partner .partner-wrap { max-width: 100%; min-width: 0; overflow: hidden; } .educators-theme .section-partner .partner-wrap { flex-wrap: wrap; } @media (max-width: 768px) { .educators-theme .school-marquee-wrap { width: 100%; flex: 1 1 100%; } } .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: transparent !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; } /* Scrim over hero video so the heading and copy stay legible. * Stronger on mobile where the video fills behind the text block. */ .educators-theme .section-hero .hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.7) 100%); pointer-events: none; z-index: 1; } @media (max-width: 768px) { .educators-theme .section-hero .hero-image::after { background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.78) 100%); } } .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; } } /* Keep the injected theme visible immediately on phones and slow devices. * The animation elements are forced visible above, so waiting for GSAP here can * make the hero look like it never loaded on mobile browsers. */ .educators-theme #wrapper { opacity: 1 !important; } /* Prevent any section from causing horizontal scroll on mobile */ @media (max-width: 768px) { html, body { overflow-x: hidden; } .educators-theme, .educators-theme #wrapper { overflow-x: hidden; max-width: 100vw; } } /* 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(420px, 100%); max-height: 90vh; aspect-ratio: 9 / 16; 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); } /* ===== Subjects section ===== */ .educators-theme .section-subjects { background: transparent; } .educators-theme .section-subjects .subjects-card { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 20px; box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.18); overflow: hidden; max-width: 880px; margin: 0 auto; } .educators-theme .section-subjects .subjects-table-wrap { width: 100%; overflow-x: auto; } .educators-theme .section-subjects .subjects-table { width: 100%; border-collapse: collapse; font-family: inherit; } .educators-theme .section-subjects .subjects-table thead th { background: #f6f8f8; text-align: left; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; font-weight: 600; padding: 18px 28px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .educators-theme .section-subjects .subjects-table th.col-level, .educators-theme .section-subjects .subjects-table td.col-level { text-align: center; width: 140px; } .educators-theme .section-subjects .subjects-table tbody td { padding: 20px 28px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); vertical-align: middle; color: #0f172a; } .educators-theme .section-subjects .subjects-table tbody tr:last-child td { border-bottom: 0; } .educators-theme .section-subjects .subjects-table tbody tr:nth-child(even) td { background: #fbfcfc; } .educators-theme .section-subjects .subject-name { font-weight: 600; font-size: 17px; display: block; } .educators-theme .section-subjects .subject-meta { display: block; font-size: 13px; color: #64748b; margin-top: 4px; } .educators-theme .section-subjects .subjects-table td.col-level .subject-check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: hsl(168, 65%, 32%); color: #ffffff; } .educators-theme .section-subjects .subjects-footnote { font-size: 14px; } @media (max-width: 600px) { .educators-theme .section-subjects .subjects-table thead th, .educators-theme .section-subjects .subjects-table tbody td { padding: 14px 16px; } .educators-theme .section-subjects .subjects-table th.col-level, .educators-theme .section-subjects .subjects-table td.col-level { width: 80px; } .educators-theme .section-subjects .subject-name { font-size: 15px; } } /* Extra top padding for the About / Students page first section */ .educators-theme .section-about-us { padding-top: 180px; } @media (max-width: 991px) { .educators-theme .section-about-us { padding-top: 120px; } } @media (max-width: 767px) { .educators-theme .section-about-us { padding-top: 100px; } } /* Defensive mobile layout for the About section so it renders correctly on * first paint (before GSAP/SplitText refresh). Prevents heading overflow and * keeps the dark globe card and review box stacking cleanly on phones. */ .educators-theme .section-about-us .heading-section { margin-bottom: 12px !important; } @media (max-width: 767px) { .educators-theme .section-about-us .heading-section .heading-title { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.1 !important; word-wrap: break-word; } .educators-theme .section-about-us .heading-section .heading-title br { display: none; } .educators-theme .section-about-us .col-left, .educators-theme .section-about-us .review-box, .educators-theme .section-about-us .box-quotes { max-width: 100%; box-sizing: border-box; } .educators-theme .section-about-us .col-left { padding-left: 16px; padding-right: 16px; } .educators-theme .section-about-us .col-left .title { font-size: 22px; line-height: 1.25; } .educators-theme .section-about-us .review-box { padding: 28px 22px; } /* Center the single Instagram social button in the footer on mobile */ .educators-theme footer .tf-social-1 { display: flex !important; justify-content: center !important; grid-template-columns: none !important; width: 100%; } .educators-theme .section-about-us .review-box .counter { font-size: 64px; line-height: 64px; } .educators-theme .section-about-us .uk-globe-img { margin-top: 8px; } .educators-theme .section-about-us .container { overflow: hidden; } } /* "Lessons from" label in front of the per-session price */ .educators-theme .pricing-item.style-black .heading .price-label { color: var(--neutral-300) !important; } /* Footer social panel: keep the blue artwork behind all social content instead * of letting it sit as a separate strip above the heading on small screens. */ .educators-theme footer .footer-image { display: none !important; } .educators-theme footer .footer-content { position: relative; isolation: isolate; max-width: 1296px; margin-left: auto; margin-right: auto; padding: 64px 24px 88px !important; background-image: url('/educators-theme/assets/images/logo/logo-footer.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 767px) { .educators-theme footer { padding-top: 24px !important; } .educators-theme footer .footer-content { padding: 68px 18px 64px !important; background-size: cover; background-position: center; } .educators-theme footer .footer-content .title { max-width: 360px; margin-left: auto; margin-right: auto; } } /* Hero badge: prevent single-line overflow on small screens */ @media (max-width: 575.98px) { .educators-theme .section-hero .content-wrap .sub { white-space: normal !important; max-width: 92vw; margin-left: auto; margin-right: auto; font-size: 13px !important; line-height: 1.35 !important; padding: 8px 14px !important; text-align: center; } .educators-theme .section-hero .content-wrap .sub svg { flex-shrink: 0; } } /* Partner strip: text labels instead of logos */ .educators-theme .partner-text-list { display: flex; align-items: center; gap: 48px; } .educators-theme .partner-text-list .partner-text { font-family: inherit; font-weight: 600; font-size: 20px; letter-spacing: 0.04em; color: #6b7280; white-space: nowrap; text-transform: uppercase; } @media (max-width: 575.98px) { .educators-theme .partner-text-list { gap: 28px; } .educators-theme .partner-text-list .partner-text { font-size: 16px; } }