Ready to start your teaching journey?
Join our community of passionate tutors and start making a difference today.
Create Your Tutor Profile Now
→✓ Free to join✓ Takes less than 5 minutes✓ No experience needed
.mot-teacher-cta {
position: relative;
overflow: hidden;
min-height: 225px;
padding: 34px 70px;
border: 1px solid #E9DDFB;
background:
radial-gradient(circle at 18% 45%, rgba(97, 52, 183, 0.14) 0%, transparent 34%),
linear-gradient(90deg, #F8F6F0 0%, #FCFBF8 55%, #ffffff 100%);
linear-gradient(90deg, #eef2ff 0%, #f7f8ff 55%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
}
/* soft glow behind rocket */
.mot-teacher-cta::before {
content: "";
position: absolute;
left: 55px;
bottom: 16px;
width: 280px;
height: 210px;
background: radial-gradient(circle, rgba(97, 52, 183, 0.18) 0%, transparent 68%);
filter: blur(30px);
z-index: 0;
pointer-events: none;
}
/* small light effect */
.mot-teacher-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,0.35), transparent 45%);
z-index: 0;
pointer-events: none;
}
.mot-teacher-cta-rocket {
position: absolute;
left: 62px;
bottom: 8px;
width: 255px;
height: auto;
z-index: 2;
filter: drop-shadow(0 22px 35px rgba(15, 23, 42, 0.18));
transform-origin: center;
animation: motRocketFloat 4s ease-in-out infinite;
transition: transform 0.45s ease, filter 0.45s ease;
}
.mot-teacher-cta:hover .mot-teacher-cta-rocket {
transform: translateY(-12px) rotate(-2deg) scale(1.04);
filter: drop-shadow(0 34px 55px rgba(15, 23, 42, 0.28));
animation-play-state: paused;
}
@keyframes motRocketFloat {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-22px) rotate(-2deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
.mot-teacher-cta-content {
position: relative;
z-index: 3;
max-width: 650px;
margin-left: 295px;
}
.mot-teacher-cta-content h2 {
margin: 0 0 14px;
color: #05083D;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1px;
}
.mot-teacher-cta-content p {
margin: 0 0 18px;
color: #405171;
font-size: 16px;
line-height: 1.55;
}
.mot-teacher-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 30px;
background: linear-gradient(135deg, #6134B7 0%, #452197 100%);
color: #ffffff !important;
border-radius: 9px;
font-size: 16px;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 14px 28px rgba(97, 52, 183, 0.28);
transition: all 0.25s ease;
}
.mot-teacher-cta-btn:hover {
background: linear-gradient(135deg, #7A3EF2 0%, #6134B7 100%);
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(97, 52, 183, 0.36);
}
.mot-teacher-cta-btn span {
font-size: 18px;
transition: transform 0.25s ease;
}
.mot-teacher-cta-btn:hover span {
transform: translateX(4px);
}
.mot-teacher-cta-points {
margin-top: 18px;
display: flex;
gap: 24px;
flex-wrap: wrap;
color: #6B6B6B;
font-size: 15px;
}
.mot-teacher-cta-points span {
white-space: nowrap;
}
/* tablet */
@media (max-width: 900px) {
.mot-teacher-cta {
min-height: auto;
padding: 36px 24px 240px;
text-align: center;
}
.mot-teacher-cta::before {
left: 50%;
transform: translateX(-50%);
bottom: 25px;
}
.mot-teacher-cta-rocket {
left: 50%;
transform: translateX(-50%);
bottom: 18px;
width: 220px;
animation: motRocketFloatMobile 4s ease-in-out infinite;
}
.mot-teacher-cta:hover .mot-teacher-cta-rocket {
transform: translateX(-50%) translateY(-10px) scale(1.03);
}
.mot-teacher-cta-content {
margin-left: 0;
max-width: 680px;
}
.mot-teacher-cta-points {
justify-content: center;
gap: 14px;
}
}
@keyframes motRocketFloatMobile {
0% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-8px);
}
100% {
transform: translateX(-50%) translateY(0);
}
}
/* mobile */
@media (max-width: 520px) {
.mot-teacher-cta {
padding: 32px 18px 220px;
}
.mot-teacher-cta-content h2 {
font-size: 28px;
}
.mot-teacher-cta-content p {
font-size: 15px;
}
.mot-teacher-cta-btn {
width: 100%;
padding: 14px 18px;
font-size: 15px;
}
.mot-teacher-cta-points {
flex-direction: column;
align-items: center;
gap: 8px;
}
.mot-teacher-cta-rocket {
width: 205px;
}
}
/* Animated blue glow */
.mot-rocket-glow {
position: absolute;
left: 72px;
bottom: 28px;
width: 260px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(97, 52, 183, 0.26), transparent 68%); transparent 68%);
filter: blur(34px);
z-index: 1;
animation: motGlowPulse 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes motGlowPulse {
0%, 100% {
opacity: 0.45;
transform: scale(0.95);
}
50% {
opacity: 0.9;
transform: scale(1.08);
}
}
/* Animated flame */
.mot-rocket-flame {
position: absolute;
left: 172px;
bottom: 70px;
width: 42px;
height: 82px;
z-index: 1;
pointer-events: none;
background: radial-gradient(circle at 50% 20%, #fff7cc 0%, #ffb347 35%, #ff7a18 68%, transparent 72%);
filter: blur(2px);
border-radius: 50% 50% 55% 55%;
transform: rotate(18deg);
animation: motFlameFlicker 0.18s ease-in-out infinite alternate;
}
@keyframes motFlameFlicker {
from {
opacity: 0.65;
transform: rotate(18deg) scaleY(0.92) scaleX(0.9);
}
to {
opacity: 1;
transform: rotate(18deg) scaleY(1.12) scaleX(1.08);
}
}
/* Mouse-follow light */
.mot-mouse-light {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(184, 160, 90, 0.18), transparent 32%);
} transparent 32%);
transition: opacity 0.25s ease;
}
.mot-teacher-cta:hover .mot-mouse-light {
opacity: 1;
}
document.querySelectorAll('.mot-teacher-cta').forEach(function(card) {
card.addEventListener('mousemove', function(e) {
const rect = card.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
card.style.setProperty('--x', x + '%');
card.style.setProperty('--y', y + '%');
});
});
