Australia
Inggris
USA
Canada
Singapore
Malaysia
/* ============================================
style.css – Starship Education
Modern 2026 · Glassmorphism · Responsive
============================================ */
/* ———- CSS Variables ———- */
:root {
–primary: #1E3A8A;
–secondary: #2563EB;
–accent: #06B6D4;
–success: #22C55E;
–warning: #F59E0B;
–bg: #F8FAFC;
–dark: #0F172A;
–gray: #64748B;
–white: #ffffff;
–shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
–radius: 24px;
–transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
–font: ‘Poppins’, sans-serif;
}
/* ———- Reset & Base ———- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(–font);
background: var(–bg);
color: var(–dark);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: 4rem 0;
}
.alt-bg {
background: rgba(30, 58, 138, 0.02);
}
.section-title {
font-size: 2.4rem;
font-weight: 700;
text-align: center;
margin-bottom: 2.5rem;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(–primary), var(–secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ———- Loading Screen ———- */
#loading-screen {
position: fixed;
inset: 0;
background: var(–white);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.6s, visibility 0.6s;
}
#loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid var(–bg);
border-top: 5px solid var(–secondary);
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ———- Progress Bar ———- */
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(–secondary), var(–accent));
z-index: 9999;
width: 0%;
transition: width 0.1s;
}
/* ———- Glassmorphism ———- */
.glass {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}
/* ———- Navbar ———- */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 0.6rem 0;
transition: all 0.3s;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
#navbar.scrolled {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}
.nav-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.logo i {
color: var(–secondary);
}
.nav-menu {
display: flex;
gap: 1.8rem;
align-items: center;
}
.nav-menu a {
font-weight: 500;
font-size: 0.9rem;
color: var(–dark);
transition: color 0.2s;
position: relative;
}
.nav-menu a:hover {
color: var(–secondary);
}
.nav-cta {
background: var(–secondary);
color: white !important;
padding: 0.5rem 1.4rem;
border-radius: 40px;
font-weight: 600;
}
.nav-cta:hover {
background: var(–primary) !important;
}
.hamburger {
display: none;
font-size: 1.8rem;
cursor: pointer;
}
/* ———- Hero ———- */
#hero {
background: linear-gradient(160deg, #f0f5ff 0%, #ffffff 100%);
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
margin-top:-150px;
}
.hero-grid {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
width: 100%;
}
.hero-text h1 {
font-size: 3.6rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 1rem;
color: var(–dark);
}
.hero-text h1 br {
display: none;
}
.hero-sub {
font-size: 1.1rem;
color: var(–gray);
max-width: 500px;
margin-bottom: 2rem;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
margin-bottom: 1.8rem;
}
.hero-badges span {
background: rgba(37, 99, 235, 0.08);
padding: 0.3rem 1rem;
border-radius: 40px;
font-size: 0.75rem;
font-weight: 500;
color: var(–secondary);
backdrop-filter: blur(4px);
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-primary {
background: var(–secondary);
border: none;
color: white;
padding: 0.8rem 2rem;
border-radius: 60px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.6rem;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(37, 99, 235, 0.35);
background: var(–primary);
}
.btn-primary a {
color: white;
display: flex;
align-items: center;
gap: 0.6rem;
}
.btn-outline {
background: transparent;
border: 2px solid var(–gray);
color: var(–dark);
padding: 0.8rem 2rem;
border-radius: 60px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.btn-outline:hover {
border-color: var(–secondary);
color: var(–secondary);
}
/* ———- Hero Illustration ———- */
.hero-illustration {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 350px;
}
.hero-image-wrapper {
position: relative;
width: 100%;
max-width: 460px;
aspect-ratio: 1/1;
border-radius: var(–radius);
overflow: hidden;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(6, 182, 212, 0.05));
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-wrapper svg {
width: 100%;
height: 100%;
padding: 1rem;
}
.floating-card {
position: absolute;
padding: 0.7rem 1.2rem;
border-radius: var(–radius);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 500;
font-size: 0.8rem;
animation: float 5s ease-in-out infinite;
border: 1px solid rgba(255, 255, 255, 0.6);
white-space: nowrap;
}
.floating-card:nth-child(2) { top: 5%; right: 0%; animation-delay: 1s; }
.floating-card:nth-child(3) { bottom: 10%; left: -5%; animation-delay: 2s; }
.floating-card:nth-child(4) { bottom: 30%; right: -10%; animation-delay: 0.5s; }
.hero-glow {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
border-radius: 50%;
position: absolute;
z-index: 0;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
/* ———- Cards Grid ———- */
.cards-grid,
.commission-grid,
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1.5rem;
}
.feature-card {
padding: 1.8rem 1.2rem;
border-radius: var(–radius);
text-align: center;
transition: all 0.3s;
cursor: default;
}
.feature-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
}
.feature-card i {
font-size: 2.2rem;
color: var(–secondary);
margin-bottom: 0.6rem;
}
.feature-card h4 {
font-size: 1.1rem;
margin-bottom: 0.2rem;
}
.feature-card p {
color: var(–gray);
font-size: 0.85rem;
}
/* ———- About ———- */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: center;
}
.about-list li {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.about-list li i {
color: var(–success);
font-size: 1.2rem;
}
.about-image {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
border-radius: var(–radius);
}
/* ———- Commission ———- */
.commission-card {
padding: 1.5rem 1rem;
border-radius: var(–radius);
text-align: center;
transition: all 0.3s;
}
.commission-card:hover {
transform: translateY(-6px);
}
.commission-card i {
font-size: 2rem;
color: var(–secondary);
margin-bottom: 0.3rem;
}
.commission-card h3 {
font-size: 1.6rem;
font-weight: 700;
color: var(–primary);
}
.commission-card .note {
display: block;
font-size: 0.7rem;
color: var(–gray);
margin-top: 0.3rem;
}
.commission-card.highlight {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(6, 182, 212, 0.08));
border: 1px solid rgba(37, 99, 235, 0.15);
}
.total-earning {
margin-top: 2.5rem;
padding: 1.5rem;
border-radius: var(–radius);
text-align: center;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.total-earning i {
color: var(–warning);
font-size: 1.8rem;
}
/* ———- Timeline ———- */
.timeline {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3rem;
padding: 1.5rem 0;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
padding: 0.8rem 1.2rem;
border-radius: 60px;
border: 1px solid rgba(255, 255, 255, 0.6);
min-width: 90px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
transition: all 0.3s;
}
.step:hover {
transform: scale(1.05);
background: white;
}
.step span {
background: var(–secondary);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-bottom: 0.2rem;
font-size: 0.9rem;
}
.step p {
font-size: 0.8rem;
text-align: center;
font-weight: 500;
margin: 0;
}
.step-arrow {
color: var(–gray);
font-size: 1.2rem;
padding: 0 0.2rem;
transition: transform 0.3s;
}
.step-arrow.down {
display: none;
}
/* ———- Checklist ———- */
.checklist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.checklist div {
display: flex;
align-items: center;
gap: 0.8rem;
background: white;
padding: 0.8rem 1.2rem;
border-radius: 60px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
font-size: 0.9rem;
}
.checklist i {
color: var(–success);
font-size: 1.2rem;
}
/* ———- Benefits ———- */
.benefit-card {
padding: 1.5rem 0.8rem;
border-radius: var(–radius);
text-align: center;
transition: all 0.3s;
font-weight: 500;
font-size: 0.95rem;
}
.benefit-card:hover {
transform: scale(1.04);
background: rgba(37, 99, 235, 0.06);
}
.benefit-card i {
display: block;
font-size: 2rem;
color: var(–secondary);
margin-bottom: 0.3rem;
}
/* ———- Career Path ———- */
.career-path {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3rem 0.8rem;
padding: 1.5rem 0;
}
.career-path .cp-item {
background: white;
padding: 0.6rem 1.5rem;
border-radius: 60px;
font-weight: 600;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
gap: 0.5rem;
}
.career-path .cp-arrow {
color: var(–gray);
font-size: 1.2rem;
}
.career-path .cp-arrow.down {
display: none;
}
/* ———- FAQ Accordion ———- */
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: white;
border-radius: 16px;
margin-bottom: 0.7rem;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.03);
}
.faq-question {
padding: 1rem 1.5rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s;
font-size: 0.95rem;
}
.faq-question:hover {
background: rgba(37, 99, 235, 0.02);
}
.faq-question i {
transition: transform 0.3s;
color: var(–secondary);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 1.5rem;
transition: max-height 0.4s ease, padding 0.3s;
color: var(–gray);
font-size: 0.9rem;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 0 1.5rem 1.2rem;
}
/* ———- Testimonials ———- */
.testimonial-slider {
overflow: hidden;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.testimonial-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.testimonial-item {
min-width: 100%;
padding: 1.8rem 2rem;
background: white;
border-radius: var(–radius);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
text-align: center;
font-style: italic;
color: var(–dark);
border: 1px solid rgba(0, 0, 0, 0.02);
}
.testimonial-item i {
color: var(–warning);
font-size: 1.8rem;
margin-bottom: 0.8rem;
}
.testimonial-item h4 {
margin-top: 0.8rem;
font-style: normal;
color: var(–primary);
}
/* ———- Calculator ———- */
.calc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
}
.calc-inputs {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.calc-inputs label {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 0.5rem 1.2rem;
border-radius: 60px;
border: 1px solid rgba(0, 0, 0, 0.04);
font-size: 0.9rem;
}
.calc-inputs input {
width: 80px;
padding: 0.3rem 0.6rem;
border-radius: 40px;
border: 1px solid #ddd;
text-align: center;
font-weight: 600;
font-family: var(–font);
font-size: 0.9rem;
}
.calc-output {
padding: 2rem;
border-radius: var(–radius);
text-align: center;
}
.calc-output h2 {
font-size: 2.6rem;
color: var(–secondary);
margin-top: 0.3rem;
}
/* ———- CTA ———- */
.cta-section {
background: linear-gradient(135deg, var(–primary), var(–secondary));
color: white;
text-align: center;
padding: 4rem 1.5rem;
}
.cta-section h2 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.cta-section .btn-primary {
background: white;
color: var(–primary);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
font-size: 1.2rem;
padding: 0.9rem 2.6rem;
}
.cta-section .btn-primary:hover {
background: var(–bg);
transform: scale(1.04);
}
.cta-section .btn-primary a {
color: var(–primary);
}
/* ———- Scroll to Top ———- */
.scroll-top {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(–secondary);
color: white;
border: none;
width: 46px;
height: 46px;
border-radius: 50%;
font-size: 1.2rem;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
cursor: pointer;
opacity: 0;
transform: translateY(30px);
transition: all 0.3s;
z-index: 900;
}
.scroll-top.visible {
opacity: 1;
transform: translateY(0);
}
.scroll-top:hover {
background: var(–primary);
transform: scale(1.08);
}
/* ———- POPUP MODAL ———- */
.popup-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
padding: 1.5rem;
}
.popup-overlay.active {
opacity: 1;
visibility: visible;
}
.popup-box {
background: white;
max-width: 480px;
width: 100%;
padding: 2.5rem 2rem;
border-radius: var(–radius);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
text-align: center;
transform: scale(0.9) translateY(20px);
transition: transform 0.4s ease;
position: relative;
}
.popup-overlay.active .popup-box {
transform: scale(1) translateY(0);
}
.popup-box .close-popup {
position: absolute;
top: 1rem;
right: 1.2rem;
font-size: 1.6rem;
color: var(–gray);
cursor: pointer;
transition: color 0.2s;
background: none;
border: none;
}
.popup-box .close-popup:hover {
color: var(–dark);
}
.popup-box .popup-icon {
font-size: 3.5rem;
color: var(–secondary);
margin-bottom: 0.8rem;
}
.popup-box h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(–dark);
margin-bottom: 0.8rem;
}
.popup-box p {
color: var(–gray);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.popup-box .popup-email-link {
display: inline-block;
background: var(–secondary);
color: white;
padding: 0.8rem 2.2rem;
border-radius: 60px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s;
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}
.popup-box .popup-email-link:hover {
background: var(–primary);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}
.popup-box .popup-email-link i {
margin-right: 0.6rem;
}
/* ———- Animations ———- */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: ”;
position: absolute;
width: 100%;
padding-top: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
opacity: 0;
pointer-events: none;
left: 50%;
top: 50%;
transform-origin: center;
}
.ripple:active::after {
animation: rippleAnim 0.6s ease-out;
}
@keyframes rippleAnim {
0% { transform: scale(0); opacity: 0.5; }
100% { transform: scale(3); opacity: 0; }
}
/* ============================================
RESPONSIVE – Mobile First
============================================ */
/* Tablet & small laptop */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text h1 { font-size: 3rem; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-badges { justify-content: center; }
.hero-actions { justify-content: center; }
.hero-illustration { min-height: 300px; }
.hero-image-wrapper { max-width: 380px; margin: 0 auto; }
.floating-card:nth-child(3) { left: 0; }
.floating-card:nth-child(4) { right: 0; }
.about-grid { grid-template-columns: 1fr; }
.calc-grid { grid-template-columns: 1fr; }
.step-arrow.down { display: none; }
.step-arrow { display: inline-block; }
.cp-arrow.down { display: none; }
.cp-arrow { display: inline-block; }
}
/* Handphone */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 68px;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(18px);
flex-direction: column;
padding: 1.8rem;
gap: 1.2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
transform: translateY(-120%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.nav-menu.active {
transform: translateY(0);
}
.hamburger {
display: block;
}
.section-title {
font-size: 2rem;
}
.hero-text h1 {
font-size: 2.2rem;
}
.hero-text h1 br {
display: block;
}
.hero-badges span {
font-size: 0.65rem;
padding: 0.2rem 0.7rem;
}
.hero-image-wrapper {
max-width: 300px;
}
.floating-card {
padding: 0.4rem 0.8rem;
font-size: 0.65rem;
gap: 0.4rem;
}
.floating-card i {
font-size: 0.8rem !important;
}
.floating-card:nth-child(2) { top: 0; right: 0; }
.floating-card:nth-child(3) { bottom: 0; left: 0; }
.floating-card:nth-child(4) { bottom: 20%; right: 0; }
.step-arrow { display: none; }
.step-arrow.down { display: inline-block; transform: rotate(90deg); }
.timeline {
flex-direction: column;
gap: 0.2rem;
}
.step {
width: 100%;
max-width: 240px;
flex-direction: row;
justify-content: center;
gap: 0.8rem;
border-radius: 40px;
padding: 0.6rem 1.2rem;
}
.step span {
margin-bottom: 0;
width: 26px;
height: 26px;
font-size: 0.8rem;
}
.step p { font-size: 0.75rem; }
.cp-arrow { display: none; }
.cp-arrow.down { display: inline-block; transform: rotate(90deg); }
.career-path {
flex-direction: column;
gap: 0.2rem;
}
.career-path .cp-item {
font-size: 0.8rem;
padding: 0.5rem 1.2rem;
}
/* ===== CALCULATOR FIX: label left, input right ===== */
.calc-inputs label {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
padding: 0.5rem 1rem;
gap: 0.8rem;
font-size: 0.85rem;
background: white;
border-radius: 60px;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.calc-inputs label .label-text {
flex: 1;
text-align: left;
font-weight: 500;
}
.calc-inputs input {
width: 80px;
min-width: 60px;
padding: 0.3rem 0.5rem;
border-radius: 40px;
border: 1px solid #ddd;
text-align: center;
font-weight: 600;
font-family: var(–font);
font-size: 0.85rem;
flex-shrink: 0;
}
.calc-output h2 {
font-size: 2rem;
}
.cta-section h2 { font-size: 1.8rem; }
.cta-section .btn-primary { font-size: 1rem; padding: 0.8rem 2rem; }
.commission-grid,
.cards-grid,
.benefits-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.checklist {
grid-template-columns: 1fr;
}
.checklist div {
font-size: 0.85rem;
padding: 0.6rem 1rem;
}
.about-list li {
font-size: 0.9rem;
padding: 0.4rem 0;
}
.about-image i {
font-size: 3.5rem !important;
}
.total-earning {
font-size: 1rem;
padding: 1.2rem;
}
.total-earning i {
font-size: 1.5rem;
}
.section {
padding: 3rem 0;
}
.container {
padding: 0 1.2rem;
}
/* Popup mobile */
.popup-box {
padding: 2rem 1.5rem;
}
.popup-box h3 {
font-size: 1.2rem;
}
.popup-box p {
font-size: 0.9rem;
}
.popup-box .popup-email-link {
font-size: 0.9rem;
padding: 0.7rem 1.8rem;
}
}
@media (max-width: 480px) {
.hero-text h1 {
font-size: 1.8rem;
}
.btn-primary,
.btn-outline {
padding: 0.6rem 1.4rem;
font-size: 0.85rem;
}
.hero-image-wrapper {
max-width: 250px;
}
.floating-card {
font-size: 0.55rem;
padding: 0.3rem 0.6rem;
}
.commission-grid,
.cards-grid,
.benefits-grid {
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.feature-card {
padding: 1.2rem 0.8rem;
}
.feature-card i {
font-size: 1.8rem;
}
.feature-card h4 {
font-size: 0.95rem;
}
.commission-card h3 {
font-size: 1.3rem;
}
.section-title {
font-size: 1.6rem;
}
.scroll-top {
width: 40px;
height: 40px;
font-size: 1rem;
bottom: 1.2rem;
right: 1.2rem;
}
.calc-output h2 {
font-size: 1.6rem;
}
.cta-section h2 {
font-size: 1.4rem;
}
.faq-question {
font-size: 0.85rem;
padding: 0.8rem 1.2rem;
}
.faq-answer {
font-size: 0.8rem;
}
.calc-inputs label {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.calc-inputs input {
width: 70px;
min-width: 50px;
font-size: 0.8rem;
padding: 0.2rem 0.4rem;
}
.popup-box {
padding: 1.5rem 1.2rem;
}
.popup-box .popup-icon {
font-size: 2.8rem;
}
.popup-box h3 {
font-size: 1.1rem;
}
.popup-box p {
font-size: 0.85rem;
}
}
Flexible
Commission
Career
Become a Freelance
Education Consultant
Help Indonesian students achieve their dream of studying abroad while earning unlimited commissions.
Why Starship Education
100% Remote
Work from anywhere
Flexible Schedule
Set your own hours
Database Provided
Leads ready to contact
Unlimited Commission
No cap on earnings
Professional Training
Onboarding & tools
Career Growth
Promotion path
About the Job
- Follow up database yang disediakan
- Konsultasi dengan student
- Membantu proses pendaftaran
- Menjelaskan program
- Menggunakan CRM
- Bekerja dari rumah
Commission Scheme
Rp10.000
Per sworn translation page
Avg. student >10 pages
Rp100.000
Report card & passport
Rp250.000
Enrolls in English Course
Rp1–5 Juta
Depart from company db
Rp2–10 Juta
Depart from own lead
How It Works
Receive Database
Contact Student
Consultation
Collect Documents
Student Enrolment
Receive Commission
Requirements
What You Will Get
Career Path
Frequently Asked Questions
Testimonials
Commission Calculator
Rp 0
Ready to Build Your Career with Starship Education?
document.addEventListener(‘DOMContentLoaded’, function() {
‘use strict’;
// ———- LOADING ———-
const loadingScreen = document.getElementById(‘loading-screen’);
window.addEventListener(‘load’, function() {
setTimeout(function() { loadingScreen.classList.add(‘hidden’); }, 600);
});
// ———- PROGRESS BAR ———-
const progressBar = document.querySelector(‘.progress-bar’);
window.addEventListener(‘scroll’, function() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight – window.innerHeight;
progressBar.style.width = (scrollTop / docHeight * 100) + ‘%’;
});
// ———- NAVBAR SCROLL ———-
const navbar = document.getElementById(‘navbar’);
window.addEventListener(‘scroll’, function() {
navbar.classList.toggle(‘scrolled’, window.pageYOffset > 80);
});
// ———- HAMBURGER ———-
const hamburger = document.getElementById(‘hamburger’);
const navMenu = document.getElementById(‘nav-menu’);
hamburger.addEventListener(‘click’, function(e) {
e.stopPropagation();
navMenu.classList.toggle(‘active’);
const icon = this.querySelector(‘i’);
icon.classList.toggle(‘fa-bars’);
icon.classList.toggle(‘fa-times’);
});
document.querySelectorAll(‘.nav-menu a’).forEach(function(link) {
link.addEventListener(‘click’, function() {
navMenu.classList.remove(‘active’);
const icon = hamburger.querySelector(‘i’);
icon.classList.add(‘fa-bars’);
icon.classList.remove(‘fa-times’);
});
});
document.addEventListener(‘click’, function(e) {
if (!navbar.contains(e.target)) {
navMenu.classList.remove(‘active’);
const icon = hamburger.querySelector(‘i’);
icon.classList.add(‘fa-bars’);
icon.classList.remove(‘fa-times’);
}
});
// ———- SMOOTH SCROLL ———-
document.querySelectorAll(‘a[href^=”#”]’).forEach(function(anchor) {
anchor.addEventListener(‘click’, function(e) {
const targetId = this.getAttribute(‘href’);
if (targetId === ‘#’) return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
window.scrollTo({ top: targetElement.getBoundingClientRect().top + window.pageYOffset – 80, behavior: ‘smooth’ });
}
});
});
// ———- SCROLL TOP ———-
const scrollTopBtn = document.getElementById(‘scrollTop’);
window.addEventListener(‘scroll’, function() {
scrollTopBtn.classList.toggle(‘visible’, window.pageYOffset > 400);
});
scrollTopBtn.addEventListener(‘click’, function() {
window.scrollTo({ top: 0, behavior: ‘smooth’ });
});
// ———- POPUP MODAL ———-
const popupOverlay = document.getElementById(‘applyPopup’);
const closePopupBtn = document.getElementById(‘closePopup’);
function openPopup() {
popupOverlay.classList.add(‘active’);
document.body.style.overflow = ‘hidden’;
}
function closePopup() {
popupOverlay.classList.remove(‘active’);
document.body.style.overflow = ”;
}
// Tombol Apply Now di Hero
document.getElementById(‘applyNowBtn’).addEventListener(‘click’, function(e) {
e.preventDefault();
openPopup();
});
// Tombol Apply Today di CTA
document.getElementById(‘ctaApplyBtn’).addEventListener(‘click’, function(e) {
e.preventDefault();
openPopup();
});
// Tombol Apply di Navbar
document.querySelector(‘.nav-cta’).addEventListener(‘click’, function(e) {
e.preventDefault();
openPopup();
});
// Close popup
closePopupBtn.addEventListener(‘click’, closePopup);
// Close popup dengan klik di luar
popupOverlay.addEventListener(‘click’, function(e) {
if (e.target === this) {
closePopup();
}
});
// Close popup dengan ESC
document.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Escape’ && popupOverlay.classList.contains(‘active’)) {
closePopup();
}
});
// ———- LEARN MORE -> Scroll ke Why ———-
document.getElementById(‘learnMoreBtn’).addEventListener(‘click’, function() {
const whySection = document.getElementById(‘why’);
if (whySection) {
window.scrollTo({
top: whySection.getBoundingClientRect().top + window.pageYOffset – 80,
behavior: ‘smooth’
});
}
});
// ———- INTERSECTION OBSERVER ———-
const fadeElements = document.querySelectorAll(‘.feature-card, .commission-card, .benefit-card, .step, .cp-item, .checklist div, .about-list li, .section-title’);
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
entry.target.classList.add(‘fade-in’);
}
});
}, { threshold: 0.1, rootMargin: ‘0px 0px -30px 0px’ });
fadeElements.forEach(function(el) {
el.classList.add(‘fade-in’);
observer.observe(el);
});
// ———- RIPPLE ———-
document.querySelectorAll(‘.ripple’).forEach(function(btn) {
btn.addEventListener(‘click’, function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX – rect.left;
const y = e.clientY – rect.top;
const ripple = document.createElement(‘span’);
ripple.style.cssText = ‘position:absolute;width:100%;padding-top:100%;border-radius:50%;background:rgba(255,255,255,0.3);transform:scale(0);opacity:0;pointer-events:none;left:’+x+’px;top:’+y+’px;transform-origin:center;animation:rippleAnim 0.6s ease-out;’;
this.style.position = ‘relative’;
this.style.overflow = ‘hidden’;
this.appendChild(ripple);
setTimeout(function() { ripple.remove(); }, 700);
});
});
// ———- FAQ ACCORDION ———-
const faqData = [
{ q: ‘Is this fully remote?’, a: ‘Yes, 100% remote. You can work from anywhere in Indonesia.’ },
{ q: ‘Do I need to find my own leads?’, a: ‘No, we provide a database of students. You can also use your own network for higher commissions.’ },
{ q: ‘How do commissions work?’, a: ‘You earn from every stage: translation, document submission, course enrollment, and student departure.’ },
{ q: ‘When am I paid?’, a: ‘Commissions are paid monthly after each milestone is confirmed.’ },
{ q: ‘Can students come from my own network?’, a: ‘Yes! You earn higher commissions (Rp2-10M) for students from your own leads.’ },
{ q: ‘Do I need experience?’, a: ‘Not necessarily. Fresh graduates are welcome. We provide full training.’ },
{ q: ‘How flexible is the schedule?’, a: ‘Completely flexible. Set your own hours as long as you meet weekly targets.’ },
{ q: ‘Will I receive training?’, a: ‘Yes, comprehensive onboarding and continuous training are provided.’ },
{ q: ‘Can I become full time?’, a: ‘Yes, top performers can transition to full-time remote staff with benefits.’ },
{ q: ‘What tools do I need?’, a: ‘A laptop, good internet connection, and a smartphone for WhatsApp.’ },
{ q: ‘Is there a target?’, a: ‘Yes, but it’s reasonable and achievable with the provided database.’ },
{ q: ‘Do I need to speak English?’, a: ‘English is preferred but not mandatory. We provide language support.’ },
{ q: ‘What is the commission split?’, a: ‘You keep 100% of the commission. No deductions.’ },
{ q: ‘How many students can I handle?’, a: ‘As many as you want. More students = more commissions.’ },
{ q: ‘Is there a contract?’, a: ‘Yes, a simple freelance agreement that protects both parties.’ },
{ q: ‘What support do I get?’, a: ‘Dedicated mentor, CRM access, marketing materials, and 24/7 team support.’ }
];
const faqContainer = document.getElementById(‘faq-container’);
faqData.forEach(function(item) {
const faqItem = document.createElement(‘div’);
faqItem.className = ‘faq-item’;
faqItem.innerHTML = ‘
‘;
const question = faqItem.querySelector(‘.faq-question’);
question.addEventListener(‘click’, function() {
const isActive = faqItem.classList.contains(‘active’);
document.querySelectorAll(‘.faq-item’).forEach(function(el) { el.classList.remove(‘active’); });
if (!isActive) faqItem.classList.add(‘active’);
});
faqContainer.appendChild(faqItem);
});
if (faqContainer.firstChild) faqContainer.firstChild.classList.add(‘active’);
// ———- TESTIMONIAL SLIDER ———-
const testimonials = [
{ name: ‘Ayu W.’, text: ‘Starship Education gave me the freedom to work from Bali while earning more than I ever did in an office. The commission system is transparent and motivating.’ },
{ name: ‘Budi S.’, text: ‘I love the flexibility. As a fresh graduate, I was worried about finding a job, but the training and database here made it so easy to start.’ },
{ name: ‘Citra R.’, text: ‘The commission structure is incredible. I earned Rp 8M in my first month just from the provided leads. Highly recommended!’ },
{ name: ‘Dedi P.’, text: ‘Working as a freelance consultant here has been life-changing. The support from the team and the career growth opportunities are amazing.’ },
{ name: ‘Eka M.’, text: ‘I’ve worked in education for years, but Starship Education’s remote model and commission scheme are truly innovative. The best decision I’ve made.’ }
];
const track = document.getElementById(‘testimonial-track’);
let currentIndex = 0, sliderInterval;
testimonials.forEach(function(t) {
const item = document.createElement(‘div’);
item.className = ‘testimonial-item’;
item.innerHTML = ‘
“‘+t.text+'”
— ‘+t.name+’
‘;
track.appendChild(item);
});
function goToSlide(index) {
const items = track.querySelectorAll(‘.testimonial-item’);
if (index >= items.length) index = 0;
if (index 0) total += companyLeads * 500000;
if (ownLeads > 0) total += ownLeads * 1000000;
const startTime = performance.now();
function animateCounter(currentTime) {
const progress = Math.min((currentTime – startTime) / 1500, 1);
const eased = 1 – Math.pow(1 – progress, 3);
const current = Math.floor(eased * total);
totalOutput.textContent = formatRupiah(current);
if (progress < 1) requestAnimationFrame(animateCounter);
else totalOutput.textContent = formatRupiah(total);
}
requestAnimationFrame(animateCounter);
}
calcBtn.addEventListener('click', calculateCommission);
[pagesInput, docsInput, courseInput, companyLeadsInput, ownLeadsInput].forEach(function(input) {
input.addEventListener('input', calculateCommission);
});
setTimeout(calculateCommission, 500);
// ———- PARALLAX HERO ———-
const hero = document.getElementById('hero');
hero.addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = (e.clientX – rect.left) / rect.width – 0.5;
const y = (e.clientY – rect.top) / rect.height – 0.5;
const glow = this.querySelector('.hero-glow');
if (glow) glow.style.transform = 'translate(' + (x * 20) + 'px, ' + (y * 20) + 'px)';
this.querySelectorAll('.floating-card').forEach(function(card, index) {
const speed = 8 + index * 4;
card.style.transform = 'translate(' + (x * speed) + 'px, ' + (y * speed) + 'px)';
});
});
// ———- COUNTER ANIMATION ———-
const totalEarningEl = document.querySelector('.total-earning strong');
if (totalEarningEl) {
const observerTotal = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const target = 15000000;
const startTime = performance.now();
function animateCounter(currentTime) {
const progress = Math.min((currentTime – startTime) / 2000, 1);
const eased = 1 – Math.pow(1 – progress, 3);
const current = Math.floor(eased * target);
totalEarningEl.textContent = formatRupiah(current);
if (progress < 1) requestAnimationFrame(animateCounter);
else totalEarningEl.textContent = formatRupiah(target);
}
requestAnimationFrame(animateCounter);
observerTotal.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
observerTotal.observe(totalEarningEl);
}
console.log('%c🚀 Starship Education', 'font-size:24px;font-weight:bold;color:#2563EB;');
console.log('%cFreelance Education Consultant · 100% Remote', 'font-size:14px;color:#64748B;');
console.log('%c📧 Apply via: hrd@starshipeducation.com', 'font-size:13px;color:#22C55E;');
});
