/* ============================================================
TANBETA — Main Stylesheet v3.0
============================================================ */
/* ── 1. Reset & CSS Variables ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* TANBETA Brand Colors — Teal + Navy (sesuai referensi desain) */
--navy: #0d1b3e;
--navy-mid: #1a2f6e;
--navy-dark: #08102a;
--teal: #0ea5a5;
--teal-dark: #0b8a8a;
--teal-light: #ccf2f2;
--teal-pale: #e6fafa;
--blue: #2563eb;
--blue-dark: #1d4ed8;
--blue-light: #dbeafe;
--blue-pale: #eff6ff;
--emerald: #10b981;
--emerald-light:#d1fae5;
--emerald-border:#6ee7b7;
--violet: #7c3aed;
--violet-light:#ede9fe;
--violet-border:#c4b5fd;
--orange: #f97316;
--orange-dark: #ea580c;
--orange-light:#ffedd5;
--orange-pale: #fff7ed;
--red: #ef4444;
--red-light: #fee2e2;
--gray-50: #f0f4f8;
--gray-100: #e2e8f0;
--gray-200: #cbd5e1;
--gray-300: #94a3b8;
--gray-400: #64748b;
--gray-500: #475569;
--gray-600: #334155;
--gray-700: #1e293b;
--gray-800: #0f172a;
--gray-900: #0d1b3e;
--white: #ffffff;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 1px 3px rgba(13,27,62,.08);
--shadow: 0 8px 24px rgba(13,27,62,.10);
--shadow-md: 0 12px 32px rgba(13,27,62,.14);
--shadow-lg: 0 20px 48px rgba(13,27,62,.18);
--transition: .22s ease;
--font-display:'Plus Jakarta Sans', system-ui, sans-serif;
--font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--navbar-h: 72px;
}
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--gray-700); line-height: 1.65; background: #ffffff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }
/* ── 2. Layout ───────────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding: 80px 0; }
.section-pad-sm { padding: 56px 0; }
.text-center { text-align: center; }
/* ── 3. Typography ───────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.2; color: var(--navy); }
h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); }
h4 { font-size: 1rem; font-weight: 600; color: var(--navy); }
p { color: var(--gray-500); font-size: .95rem; line-height: 1.7; }
.text-teal { color: var(--teal); }
.text-navy { color: var(--navy); }
.text-white { color: var(--white) !important; }
.eyebrow {
display: inline-block;
font-family: var(--font);
font-size: .78rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--teal); margin-bottom: 10px;
}
.section-title { margin-bottom: 6px; }
.section-intro { font-size: 1rem; color: var(--gray-500); margin-bottom: 48px; max-width: 520px; margin-left: auto; margin-right: auto; }
/* ── 4. Buttons ──────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 30px; border-radius: 999px;
font-size: .82rem; font-weight: 700; line-height: 1; letter-spacing: .05em;
border: 2px solid transparent;
transition: all var(--transition); cursor: pointer;
white-space: nowrap; text-transform: uppercase;
}
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,165,165,.35); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover{ background: var(--navy-mid); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,27,62,.3); }
.btn-outline-teal { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn-outline-teal:hover { background: var(--teal); color: var(--white); }
.btn-outline-dark { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline-dark:hover { background: var(--navy); color: var(--white); }
.btn-outline-white { border-color: rgba(255,255,255,.5); color: var(--white); background: transparent; }
.btn-outline-white:hover { background: rgba(255,255,255,.15); }
.btn-whatsapp { background: #25d366; color: var(--white); }
.btn-whatsapp:hover { background: #1db954; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 18px; font-size: .72rem; }
.btn-lg { padding: 18px 40px; font-size: .92rem; }
.btn-green { background: var(--emerald); color: var(--white); }
.btn-green:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16,185,129,.3); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,.3); }
.btn-purple { background: var(--violet); color: var(--white); }
.btn-purple:hover { background: #6d28d9; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124,58,237,.3); }
/* ── 5. Badges & Tags ────────────────────────────────────── */
.badge {
display: inline-block; padding: 4px 12px;
border-radius: 20px; font-size: .72rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
}
.badge-green { background: var(--emerald-light); color: var(--emerald); border: 1px solid var(--emerald-border); }
.badge-blue { background: var(--blue-light); color: var(--blue); border: 1px solid var(--blue-border); }
.badge-purple { background: var(--violet-light); color: var(--violet); border: 1px solid var(--violet-border); }
.badge-teal { background: var(--teal-light); color: var(--teal-dark); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }
/* ── 6. Alerts ───────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .875rem; border: 1px solid transparent; }
.alert-error { background: var(--red-light); border-color: #fca5a5; color: #991b1b; }
.alert-success { background: var(--emerald-light); border-color: var(--emerald-border); color: #065f46; }
.alert-info { background: var(--blue-light); border-color: var(--blue-border); color: #1e40af; }
/* ── 7. Navbar ───────────────────────────────────────────── */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
height: var(--navbar-h);
background: rgba(255,255,255,.95);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(13,27,62,.08);
transition: box-shadow var(--transition), background var(--transition);
}
.navbar.scrolled { box-shadow: 0 4px 20px rgba(13,27,62,.10); background: #fff; }
.nav-inner {
display: flex; align-items: center; gap: 12px;
height: var(--navbar-h);
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 80px; width: auto; flex-shrink: 0; max-width: 320px; }
.nav-links {
display: flex; align-items: center; gap: 4px;
margin-left: auto; margin-right: 8px;
}
.nav-links a {
padding: 8px 14px;
font-size: .9rem; font-weight: 600; color: var(--gray-600);
text-transform: none; letter-spacing: 0;
transition: all var(--transition);
border-bottom: 2px solid transparent;
border-radius: 6px;
}
.nav-links a:hover { color: var(--teal); }
.nav-links a.active {
color: var(--navy); font-weight: 700;
border-bottom: 2px solid var(--teal);
border-radius: 0;
}
.nav-right {
display: flex; align-items: center; gap: 10px; margin-left: 8px; flex-shrink: 0;
}
.btn-admin-login {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 999px;
font-size: .78rem; font-weight: 600; color: var(--gray-400);
border: 1.5px solid var(--gray-200); background: var(--white);
transition: all var(--transition); white-space: nowrap;
}
.btn-admin-login:hover {
color: var(--navy); border-color: var(--navy); background: var(--gray-50);
}
.btn-admin-login svg { flex-shrink: 0; }
.nav-toggle {
display: none; flex-direction: column; gap: 5px;
padding: 8px; margin-left: 8px; border-radius: var(--radius-sm);
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: all var(--transition); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── 8. Hero Section ─────────────────────────────────────── */
.hero {
background: linear-gradient(160deg, #f0f9ff 0%, #e6fafa 40%, #ffffff 100%);
padding: calc(var(--navbar-h) + 36px) 0 0;
overflow: hidden;
margin-top: 0;
}
.hero-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 56px; align-items: center;
padding-bottom: 60px;
}
.hero-text { max-width: 520px; }
.hero-text h1 { margin: 12px 0 20px; }
.hero-text h1 .line2 { color: var(--teal); }
.hero-text p { font-size: 1rem; margin-bottom: 32px; color: var(--gray-600); max-width: 440px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero visual */
.hero-visual {
position: relative;
background: transparent;
border-radius: 24px;
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
padding: 0;
}
/* tidak ada background dekoratif — gambar sudah membawa background sendiri */
.hero-visual::before {
display: none;
}
/* hapus class logo lama */
.hero-bg-logo {
display: none;
}
.hero-image-wrapper {
position: relative;
width: 100%;
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
}
/* foto full tanpa crop — gambar sudah landscape dengan background putih */
.hero-student-img {
width: 100%;
height: auto;
max-height: 560px;
object-fit: contain;
object-position: center center;
display: block;
position: relative;
z-index: 2;
margin: 0 auto;
}
.hero-image-placeholder {
position: absolute; inset: 0;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 20px;
z-index: 2;
}
.hero-image-wrapper:has(.hero-student-img:not([style*="display: none"])) .hero-image-placeholder {
display: none;
}
.hero-image-wrapper.img-error .hero-image-placeholder {
display: flex;
}
/* Student Illustration (fallback) */
.student-illustration {
position: relative; width: 200px; height: 300px;
display: flex; flex-direction: column; align-items: center;
z-index: 2;
}
.student-head {
position: relative;
width: 90px; height: 100px;
background: linear-gradient(135deg, #f5c99c, #e0a478);
border-radius: 45px 45px 50px 50px;
box-shadow: 0 6px 20px rgba(0,0,0,.08);
margin-bottom: 4px;
}
.student-head::before {
content: ''; position: absolute;
top: 35px; left: 22px;
width: 10px; height: 10px;
background: #4a3528; border-radius: 50%;
}
.student-head::after {
content: ''; position: absolute;
top: 35px; right: 22px;
width: 10px; height: 10px;
background: #4a3528; border-radius: 50%;
}
.student-body {
position: relative; width: 130px; height: 160px;
background: var(--teal);
border-radius: 24px;
box-shadow: 0 8px 24px rgba(14,165,165,.2);
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: 12px;
}
.student-body::before {
content: ''; position: absolute; top: 20px; left: -15px;
width: 40px; height: 70px; background: var(--teal); border-radius: 20px;
}
.student-body::after {
content: ''; position: absolute; top: 20px; right: -15px;
width: 40px; height: 70px; background: var(--teal); border-radius: 20px;
}
.book-stack {
position: absolute; bottom: 30px; right: -50px;
width: 70px; height: 60px; z-index: 3;
}
.book {
position: absolute; width: 60px; height: 12px;
border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.12);
border: 1px solid rgba(255,255,255,.3);
}
.book-1 { bottom: 0; background: linear-gradient(135deg, #10b981, #059669); left: 0; transform: rotate(-2deg); }
.book-2 { bottom: 14px; background: linear-gradient(135deg, #2563eb, #1d4ed8); left: 5px; transform: rotate(1deg); }
.book-3 { bottom: 28px; background: linear-gradient(135deg, #7c3aed, #6d28d9); left: 10px; transform: rotate(-1deg); }
/* Decorative elements */
.hero-visual::after {
content: '';
}
.hero-float, .hero-float-1, .hero-float-2, .hero-float-3 {
display: none !important;
}
@keyframes floatAnim {
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-12px) scale(1.02)}
}
/* Hero pillars bar */
.hero-pillars {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; background: var(--white);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(13,27,62,.08);
padding: 0; overflow: hidden;
border: 1px solid var(--gray-100);
}
.pillar-item {
display: flex; gap: 14px; align-items: center;
padding: 22px 24px;
border-right: 1px solid var(--gray-100);
}
.pillar-item:last-child { border-right: none; }
.pillar-icon { font-size: 1.6rem; flex-shrink: 0; }
.pillar-item strong { display: block; font-size: .875rem; color: var(--navy); margin-bottom: 2px; font-weight: 700; }
.pillar-item span { font-size: .78rem; color: var(--gray-400); line-height: 1.4; }
/* ── 9. Method Strip ─────────────────────────────────────── */
.method-strip { background: #fff; padding: 80px 0; }
.method-strip-header { text-align: center; margin-bottom: 52px; }
.method-strip-header .eyebrow { display: block; margin-bottom: 8px; }
.method-strip-header h2 { color: var(--navy); }
.method-steps {
display: grid; grid-template-columns: repeat(4,1fr);
gap: 24px; position: relative;
}
.method-steps::before {
content: ''; position: absolute;
top: 40px; left: calc(12.5% + 20px); right: calc(12.5% + 20px);
height: 2px;
background: linear-gradient(90deg, var(--teal), var(--blue));
z-index: 0; opacity: .35;
}
.method-step { text-align: center; padding: 0 12px; position: relative; z-index: 1; }
.step-circle {
width: 56px; height: 56px; border-radius: 50%;
background: var(--teal-pale);
color: var(--teal);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin: 0 auto 16px;
border: 2px solid var(--teal-light);
box-shadow: 0 0 0 6px var(--teal-pale);
}
.step-num { font-size: .72rem; font-weight: 700; color: var(--teal); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; }
.method-step h3 { font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.method-step p { font-size: .82rem; color: var(--gray-400); }
.method-cta { text-align: center; margin-top: 44px; }
/* ── 10. Programs Section ────────────────────────────────── */
.programs-section { background: #f8fafc; padding: 80px 0; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header .eyebrow { display: block; margin-bottom: 8px; }
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.program-card {
background: var(--white); border-radius: 20px;
padding: 32px; display: flex; flex-direction: column;
box-shadow: 0 4px 16px rgba(13,27,62,.06);
border: 1px solid var(--gray-100);
border-top: 4px solid var(--teal);
transition: all var(--transition);
}
.program-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(13,27,62,.12); }
.program-card.card-green { border-top-color: var(--teal); }
.program-card.card-blue { border-top-color: var(--blue); }
.program-card.card-purple { border-top-color: var(--violet); }
.program-card-icon {
width: 56px; height: 56px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 18px;
background: var(--teal-pale);
}
.card-green .program-card-icon { background: var(--teal-pale); }
.card-blue .program-card-icon { background: var(--blue-light); }
.card-purple .program-card-icon { background: var(--violet-light); }
.program-card h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--navy); }
.program-card .tagline { font-size: .8rem; font-weight: 600; color: var(--teal); margin-bottom: 10px; }
.card-blue .tagline { color: var(--blue); }
.card-purple .tagline { color: var(--violet); }
.program-card p { font-size: .875rem; color: var(--gray-400); flex-grow: 1; margin-bottom: 20px; }
.program-card .badge { margin-bottom: 14px; }
/* ── 11. Daily Challenge Widget ──────────────────────────── */
.daily-section { background: var(--white); padding: 80px 0; }
.daily-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center;
}
.daily-left h2 { margin: 10px 0 14px; }
.daily-left p { margin-bottom: 28px; }
.dc-card {
background: #fff;
border-radius: 20px;
padding: 28px; border: 1px solid var(--gray-100);
box-shadow: 0 8px 24px rgba(13,27,62,.08);
}
.dc-tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.dc-question { font-size: .95rem; color: var(--navy); margin-bottom: 18px; font-weight: 500; }
.dc-question strong { color: var(--navy); font-size: 1.05rem; }
.dc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.dc-btn {
padding: 10px 18px; border: 2px solid var(--gray-200);
border-radius: 10px; font-size: .85rem;
font-weight: 600; background: var(--white); cursor: pointer;
text-align: left; color: var(--gray-600); transition: all var(--transition);
font-family: var(--font);
}
.dc-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); }
.dc-btn.correct { border-color: var(--teal); background: var(--teal-pale); color: var(--teal-dark); }
.dc-btn.wrong { border-color: var(--red); background: var(--red-light); color: var(--red); }
.dc-feedback { border-radius: 10px; padding: 10px 14px; font-size: .82rem; margin-bottom: 12px; display: none; }
.dc-link { display: block; text-align: right; margin-top: 14px; font-size: .875rem; font-weight: 700; color: var(--teal); }
.dc-link:hover { text-decoration: underline; }
/* ── 12. CTA Banner ──────────────────────────────────────── */
.cta-banner {
background: linear-gradient(135deg, var(--navy) 0%, #1a3a6e 100%);
padding: 72px 0;
position: relative; overflow: hidden;
}
.cta-banner::before {
content: ''; position: absolute; bottom: 0; right: 0;
width: 400px; height: 400px; border-radius: 50%;
background: rgba(14,165,165,.12);
transform: translate(30%, 40%);
}
.cta-banner::after {
content: ''; position: absolute; top: -60px; left: -60px;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(14,165,165,.08);
}
.cta-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 40px; flex-wrap: wrap; position: relative; z-index: 1;
}
.cta-banner h2 { color: var(--white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,.65); }
/* ── 13. Page Hero ───────────────────────────────────────── */
.page-hero {
background: linear-gradient(135deg, #e6fafa 0%, #f0f9ff 60%, #fff 100%);
padding: 96px 0 56px; margin-top: var(--navbar-h); color: var(--navy);
}
.page-hero .eyebrow { color: var(--teal); }
.page-hero h1 { color: var(--navy); margin: 10px 0 14px; }
.page-hero p { color: var(--gray-400); max-width: 540px; font-size: 1rem; }
/* ── 14. Program Tabs (sticky) ───────────────────────────── */
.program-tabs-bar {
position: sticky; top: var(--navbar-h); z-index: 900;
background: var(--white); border-bottom: 2px solid var(--gray-100);
box-shadow: 0 2px 10px rgba(13,27,62,.06);
}
.program-tabs { display: flex; overflow-x: auto; }
.program-tab {
padding: 16px 28px; font-size: .8rem; font-weight: 600;
color: var(--gray-400); white-space: nowrap; cursor: pointer;
text-transform: uppercase; letter-spacing: .06em;
border-bottom: 3px solid transparent; margin-bottom: -2px;
transition: all var(--transition);
}
.program-tab:hover { color: var(--teal); }
.program-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
/* ── 15. Program Detail Sections ─────────────────────────── */
.prog-section { padding: 80px 0; }
.prog-section.alt { background: var(--gray-50); }
.prog-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 56px; align-items: center; margin-bottom: 64px;
}
.prog-header-text h2 { margin: 8px 0 12px; }
.prog-tagline { font-size: .95rem; font-weight: 600; color: var(--teal); margin-bottom: 14px; }
.prog-header-text p { margin-bottom: 12px; }
.prog-header-text .btn { margin-top: 8px; }
.prog-visual {
border-radius: 24px; padding: 36px;
text-align: center; display: flex; flex-direction: column;
align-items: center; gap: 20px;
}
.pv-green { background: linear-gradient(135deg, var(--emerald-light), #dcfce7); }
.pv-blue { background: linear-gradient(135deg, var(--blue-light), #dbeafe); }
.pv-purple { background: linear-gradient(135deg, var(--violet-light),#ede9fe); }
.pv-icon { font-size: 72px; }
.pv-card {
width: 100%; background: var(--white); border-radius: 12px;
padding: 18px; text-align: left; box-shadow: var(--shadow-sm);
}
.pv-card-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 10px; }
.flow-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flow-pill { background: var(--gray-100); color: var(--gray-700); padding: 4px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.flow-arrow { color: var(--gray-400); font-size: .75rem; }
/* Features grid */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 48px; }
.feature-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 22px; }
.prog-section.alt .feature-card { background: var(--white); }
.feature-icon { font-size: 1.6rem; margin-bottom: 10px; }
.feature-card h4 { margin-bottom: 6px; }
.feature-card p { font-size: .82rem; }
/* Info two-col */
.info-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 40px 0; }
.info-block h3 { margin-bottom: 16px; font-size: 1.05rem; }
/* Jenjang badges */
.jenjang-row { display: flex; gap: 10px; margin-bottom: 14px; }
.jenjang-pill { background: var(--teal); color: var(--white); padding: 6px 18px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
/* Learning options */
.lo-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: var(--gray-50); border-radius: 12px; margin-bottom: 10px; }
.lo-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.lo-item h4 { margin-bottom: 3px; font-size: .9rem; }
.lo-item p { font-size: .82rem; }
/* ── 16. Approach Steps (vertical list) ──────────────────── */
.approach-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 32px 0 48px; }
.ap-step {
display: flex; gap: 14px; background: var(--white);
border: 1px solid var(--gray-200); border-radius: 20px;
padding: 18px;
}
.prog-section.alt .ap-step { background: var(--gray-50); }
.ap-num { font-size: 1.6rem; font-weight: 900; color: var(--teal); line-height: 1; flex-shrink: 0; }
.ap-step h4 { margin-bottom: 4px; font-size: .9rem; }
.ap-step p { font-size: .82rem; }
/* Target list */
.target-list { display: flex; flex-direction: column; gap: 12px; }
.target-item p { font-size: .82rem; margin-top: 4px; }
.target-pill { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.target-pill.blue { background: var(--blue-light); color: var(--blue); }
.target-pill.purple { background: var(--violet-light); color: var(--violet); }
/* Tutor box */
.tutor-box { background: var(--navy); border-radius: 20px; padding: 32px; margin: 32px 0; }
.tutor-box h3 { color: var(--white); margin-bottom: 10px; font-size: 1.05rem; }
.tutor-box p { color: rgba(255,255,255,.7); margin-bottom: 16px; }
.tutor-points { display: flex; flex-wrap: wrap; gap: 8px; }
.tutor-point { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); padding: 5px 14px; border-radius: 20px; font-size: .8rem; font-weight: 500; }
/* Philosophy banner */
.phi-box { border-radius: 20px; padding: 40px; text-align: center; margin-top: 48px; }
.phi-green { background: var(--emerald-light); border: 1px solid var(--emerald-border); }
.phi-blue { background: var(--blue-light); border: 1px solid var(--blue-border); }
.phi-purple { background: var(--violet-light);border: 1px solid var(--violet-border); }
.phi-quote { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); font-style: italic; margin-bottom: 10px; }
.phi-sub { font-size: .875rem; color: var(--gray-500); }
/* Materi grid */
.materi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 48px; }
.materi-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 22px; }
.materi-num { font-size: 1.8rem; font-weight: 900; color: var(--teal); line-height: 1; margin-bottom: 10px; }
.materi-card h4 { margin-bottom: 8px; }
.materi-card ul { margin: 8px 0 0 4px; }
.materi-card li { font-size: .82rem; color: var(--gray-600); margin-bottom: 4px; padding-left: 12px; position: relative; }
.materi-card li::before { content: '•'; position: absolute; left: 0; color: var(--teal); }
.materi-wide { grid-column: span 3; }
/* Why start early */
.wse-section { background: var(--navy); border-radius: 24px; padding: 40px; margin: 40px 0; }
.wse-section h3 { color: var(--white); margin-bottom: 6px; }
.wse-sub { color: rgba(255,255,255,.6); margin-bottom: 24px; }
.wse-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.wse-item { text-align: center; }
.wse-icon { font-size: 1.8rem; margin-bottom: 8px; }
.wse-item h4 { font-size: .82rem; color: var(--white); margin-bottom: 4px; }
.wse-item p { font-size: .75rem; color: rgba(255,255,255,.55); }
/* ── 17. Method Page ─────────────────────────────────────── */
.method-intro { padding: 72px 0; }
.method-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.mi-lead { font-size: 1.05rem; font-weight: 600; color: var(--gray-900); margin-bottom: 14px; }
.method-cycle-wrap { display: flex; justify-content: center; }
.method-cycle {
position: relative; width: 260px; height: 260px;
border-radius: 50%; border: 2px dashed var(--teal);
display: flex; align-items: center; justify-content: center;
background: var(--teal-pale);
}
.mc-pill {
position: absolute; background: var(--teal); color: var(--white);
padding: 7px 16px; border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.mc-1 { top: -14px; left: 50%; transform: translateX(-50%); }
.mc-2 { right: -20px; top: 50%; transform: translateY(-50%); }
.mc-3 { bottom: -14px;left: 50%; transform: translateX(-50%); }
.mc-4 { left: -20px; top: 50%; transform: translateY(-50%); }
.mc-center { font-weight: 900; font-size: .85rem; color: var(--navy); text-align: center; line-height: 1.3; }
.ms-section { padding: 80px 0; }
.ms-section.alt { background: var(--gray-50); }
.ms-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ms-inner.rev .ms-content { order: 2; }
.ms-inner.rev .ms-visual { order: 1; }
.ms-tag { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 8px; }
.ms-content h2 { margin-bottom: 14px; }
.ms-content p { margin-bottom: 12px; }
.ms-lead { font-size: 1rem; font-weight: 600; color: var(--gray-900) !important; }
.ms-highlight {
margin-top: 20px; padding: 14px 18px;
border-left: 4px solid var(--teal);
background: var(--teal-pale); border-radius: 0 12px 12px 0;
font-weight: 600; color: var(--teal-dark); font-size: .9rem;
}
.ms-visual {
border-radius: 24px;
display: flex; align-items: center; justify-content: center;
min-height: 240px; font-size: 80px;
}
.personalized-sec { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); padding: 80px 0; }
.pers-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pers-text h2 { color: var(--white); margin-bottom: 12px; }
.pers-text p { color: rgba(255,255,255,.7); margin-bottom: 12px; }
.pers-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px; }
.pers-flow span { background: rgba(255,255,255,.12); color: var(--white); padding: 6px 14px; border-radius: 20px; font-size: .82rem; font-weight: 600; }
.pers-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 30px; }
.pers-card h3 { color: var(--white); margin-bottom: 12px; }
.pers-card p { color: rgba(255,255,255,.7); margin-bottom: 12px; }
.more-list li { color: rgba(255,255,255,.9); font-size: 1rem; margin-bottom: 8px; font-weight: 500; }
/* ── 18. Challenge Page ──────────────────────────────────── */
.challenge-hero .page-hero-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 40px; align-items: center;
}
.ch-deco {
position: relative;
height: 380px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.ch-deco::before {
content:''; position:absolute; top:30px; right:20px;
width:85%; height:85%;
background:var(--teal); opacity:.18;
border-radius:40px 6px 60px 6px;
transform:rotate(-6deg); z-index:0;
}
.ch-deco .ch-student-img {
position: relative;
max-width: 85%;
height: 380px;
object-fit: contain;
z-index: 2;
}
.ch-deco .ch-formula {
position: absolute;
top: 20px; left: 10px;
font-size: 1.1rem;
font-weight: 700;
color: var(--navy);
opacity: .25;
font-family: 'Georgia', serif;
font-style: italic;
z-index: 3;
}
.ch-deco .ch-icon-1 {
position: absolute; top: 40px; right: 10px;
font-size: 2.4rem; opacity: .5; z-index: 3;
animation: floatAnim 3.5s ease-in-out infinite;
}
.ch-deco .ch-icon-2 {
position: absolute; bottom: 80px; left: 0px;
font-size: 2rem; opacity: .5; z-index: 3;
animation: floatAnim 3.5s ease-in-out infinite 1s;
}
.ch-deco .ch-icon-3 {
position: absolute; top: 50%; right: -10px;
font-size: 1.8rem; opacity: .5; z-index: 3;
animation: floatAnim 3.5s ease-in-out infinite 2s;
}
.choose-section { padding: 80px 0; }
.choose-divider { text-align: center; margin-bottom: 48px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-400); }
.challenge-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ch-card {
background: var(--white); border-radius: 24px;
overflow: hidden; box-shadow: var(--shadow);
border: 1px solid var(--gray-100); transition: all var(--transition);
display: flex; flex-direction: column;
}
.ch-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,.16); }
.ch-card.ch-green:hover { border-color: var(--emerald-border); }
.ch-card.ch-blue:hover { border-color: var(--blue-border); }
.ch-card.ch-purple:hover { border-color: var(--violet-border); }
.ch-card-top {
padding: 48px 28px 56px;
text-align: center;
position: relative;
}
.ch-card-top.bg-green { background: linear-gradient(135deg, var(--emerald-light), #d1fae5); }
.ch-card-top.bg-blue { background: linear-gradient(135deg, var(--blue-light), #dbeafe); }
.ch-card-top.bg-purple { background: linear-gradient(135deg, var(--violet-light),#ede9fe); }
.ch-icon { font-size: 3.2rem; margin-bottom: 0; position: relative; z-index: 1; }
.ch-card-overlay {
position: absolute;
bottom: -36px;
left: 50%;
transform: translateX(-50%);
width: 72px; height: 72px;
border-radius: 50%;
background: var(--white);
border: 3px solid var(--teal);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem;
z-index: 5;
box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.ch-card.ch-green .ch-card-overlay { border-color: var(--emerald); }
.ch-card.ch-blue .ch-card-overlay { border-color: var(--blue); }
.ch-card.ch-purple .ch-card-overlay { border-color: var(--violet); }
.ch-card-body { padding: 48px 28px 28px; flex-grow: 1; display: flex; flex-direction: column; }
.ch-type { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 6px; }
.ch-card-body h3 { font-size: 1.1rem; margin-bottom: 10px; }
.ch-card-body p { font-size: .85rem; color: var(--gray-600); margin-bottom: 14px; }
.ch-list { margin-bottom: 16px; }
.ch-list li {
font-size: .82rem; color: var(--gray-600); margin-bottom: 6px;
padding-left: 24px; position: relative;
line-height: 1.5;
}
.ch-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 18px; height: 18px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .7rem;
font-weight: 700;
color: var(--white);
background: var(--teal);
}
.ch-card.ch-green .ch-list li::before { background: var(--emerald); }
.ch-card.ch-blue .ch-list li::before { background: var(--blue); }
.ch-card.ch-purple .ch-list li::before { background: var(--violet); }
.ch-note {
font-size: .78rem;
border-radius: 12px;
padding: 12px;
margin-bottom: 16px;
font-weight: 500;
background: var(--teal-light);
color: var(--teal-dark);
}
.ch-card.ch-green .ch-note { background: var(--emerald-light); color: #047857; }
.ch-card.ch-blue .ch-note { background: var(--blue-light); color: #1e40af; }
.ch-card.ch-purple .ch-note { background: var(--violet-light); color: #5b21b6; }
.ch-card .btn {
margin-top: auto;
width: 100%;
text-transform: uppercase;
letter-spacing: .08em;
}
.ch-card .btn::after {
content: '→';
margin-left: 4px;
transition: transform var(--transition);
}
.ch-card .btn:hover::after {
transform: translateX(4px);
}
/* After challenge */
.after-ch {
background: var(--white);
padding: 64px 0;
}
.after-ch-grid {
display: grid;
grid-template-columns: repeat(4, auto) 1fr;
gap: 0;
margin-top: 40px;
align-items: start;
justify-content: center;
}
.ac-item {
text-align: center;
padding: 24px 12px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-width: 180px;
}
.ac-icon-wrap {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--teal-light);
border: 2px solid rgba(14,165,165,0.3);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.ac-icon {
font-size: 1.8rem;
color: var(--teal);
}
.ac-item h4 { margin-bottom: 8px; color: var(--navy); }
.ac-item p { font-size: .82rem; max-width: 160px; }
.ac-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
font-size: 1.6rem;
font-weight: 700;
padding-top: 40px;
min-width: 40px;
flex-shrink: 0;
}
/* Bottom CTA challenge */
.ch-bottom { padding: 64px 0; }
.ch-bottom-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 48px; align-items: center;
background: linear-gradient(135deg, #e6fafa 0%, #effaf9 100%);
border-radius: 32px;
padding: 40px;
}
.ch-bottom-left h3 {
margin-bottom: 10px;
font-size: 1.8rem;
line-height: 1.25;
font-family: var(--font-display);
}
.ch-bottom-left p { font-size: .95rem; color: var(--gray-600); }
.ch-bottom-right { display: flex; flex-direction: column; gap: 16px; }
.ch-box {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 24px;
padding: 28px;
box-shadow: var(--shadow-sm);
}
.ch-box h4 { margin-bottom: 8px; font-size: 1.05rem; color: var(--navy); }
.ch-box p { font-size: .85rem; margin-bottom: 16px; }
.ch-box .btn-green { background: var(--emerald); }
.ch-box .btn-green:hover { background: #059669; }
.ch-box .btn-purple { background: var(--violet); }
.ch-box .btn-purple:hover { background: #6d28d9; }
/* ── 19. Start Challenge Page ────────────────────────────── */
.start-hero-green { background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 50%, #f0fdfa 100%); padding: 96px 0 48px; margin-top: var(--navbar-h); }
.start-hero-blue { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #f0f9ff 100%); padding: 96px 0 48px; margin-top: var(--navbar-h); }
.start-hero-purple{ background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 50%, #faf5ff 100%); padding: 96px 0 48px; margin-top: var(--navbar-h); }
.start-hero-green h1, .start-hero-blue h1, .start-hero-purple h1 { color: var(--navy); margin: 8px 0 12px; }
.start-hero-green p, .start-hero-blue p, .start-hero-purple p { color: var(--gray-600); font-size: 1rem; }
.start-page-section { padding: 56px 0 80px; background: var(--gray-50); }
.start-page-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
/* Stats row */
.start-stats-row { display: flex; align-items: center; gap: 0; background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.sst-item { flex: 1; text-align: center; padding: 20px 16px; }
.sst-num { display: block; font-size: 2rem; font-weight: 900; color: var(--teal); line-height: 1; font-family: var(--font-display); }
.sst-lbl { font-size: .72rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; display: block; }
.sst-divider { width: 1px; height: 48px; background: var(--gray-200); flex-shrink: 0; }
/* Subject card */
.start-subject-card { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.start-sub-title { font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.start-sub-title svg { color: var(--teal); flex-shrink: 0; }
.start-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.start-tbl th { text-align: left; padding: 8px 12px; background: var(--gray-50); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); border-bottom: 2px solid var(--gray-200); }
.start-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.start-tbl tfoot td { font-weight: 700; background: var(--gray-50); color: var(--navy); border-top: 2px solid var(--gray-200); border-bottom: none; }
.sst-soal-badge { background: var(--teal-light); color: var(--teal-dark); padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
/* Level bars (already existed) */
.lc-bars { margin-top: 4px; }
/* Result preview */
.start-result-preview { background: var(--teal-light); border: 1px solid rgba(14,165,165,0.3); border-radius: 14px; padding: 20px 22px; margin-top: 16px; }
.start-result-preview h4 { color: var(--teal-dark); margin-bottom: 12px; font-size: .9rem; }
.start-result-list { list-style: none; }
.start-result-list li { font-size: .82rem; color: var(--gray-700); margin-bottom: 6px; padding-left: 4px; }
/* Form box */
.start-form-box { background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); }
.sfb-header { display: flex; align-items: center; gap: 16px; padding: 28px 28px 24px; }
.sfb-header-green { background: linear-gradient(135deg, #d1fae5, #ecfdf5); border-bottom: 2px solid var(--emerald-border); }
.sfb-header-blue { background: linear-gradient(135deg, #dbeafe, #eff6ff); border-bottom: 2px solid var(--blue-border); }
.sfb-header-purple { background: linear-gradient(135deg, #ede9fe, #f5f3ff); border-bottom: 2px solid var(--violet-border); }
.sfb-icon { font-size: 2.4rem; flex-shrink: 0; }
.sfb-header h2 { font-size: 1.3rem; color: var(--navy); margin-bottom: 2px; }
.sfb-header p { font-size: .82rem; color: var(--gray-500); }
.sfb-body { padding: 28px; }
.sfb-note { font-size: .75rem; color: var(--gray-400); text-align: center; margin-top: 14px; }
.start-details h2 { margin-bottom: 24px; }
.start-stats { display: flex; gap: 24px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.stat-pill { text-align: center; }
.stat-pill .sp-num { display: block; font-size: 2.4rem; font-weight: 900; color: var(--teal); line-height: 1; }
.stat-pill .sp-lbl { font-size: .72rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; }
.subject-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; margin-bottom: 24px; }
.subject-tbl th { text-align: left; padding: 8px 12px; background: var(--gray-50); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); border-bottom: 2px solid var(--gray-200); }
.subject-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--gray-100); }
.subject-tbl tfoot td { font-weight: 700; background: var(--gray-50); }
.lc-title { font-size: .8rem; font-weight: 600; margin-bottom: 12px; color: var(--gray-700); }
.lc-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lc-label { width: 76px; font-size: .75rem; font-weight: 600; color: var(--gray-600); }
.lc-track { flex: 1; background: var(--gray-200); border-radius: 20px; height: 7px; }
.lc-fill { height: 100%; border-radius: 20px; }
.lc-f { background: var(--emerald); }
.lc-r { background: var(--blue); }
.lc-c { background: var(--violet); }
.lc-pct { font-size: .72rem; color: var(--gray-400); width: 32px; text-align: right; }
.result-preview { background: var(--teal-light); border: 1px solid rgba(14,165,165,0.3); border-radius: 12px; padding: 18px; margin-top: 20px; }
.result-preview h4 { color: var(--teal-dark); margin-bottom: 10px; font-size: .875rem; }
.result-preview li { font-size: .82rem; color: var(--gray-700); margin-bottom: 4px; padding-left: 4px; }
/* Form card */
.form-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 24px; padding: 36px; box-shadow: var(--shadow-md); }
.form-card h2 { margin-bottom: 6px; }
.form-card > p { font-size: .875rem; color: var(--gray-500); margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.form-group input,
.form-group select {
width: 100%; padding: 12px 16px;
border: 2px solid var(--gray-200); border-radius: 12px;
font-size: .9rem; font-family: var(--font);
transition: border var(--transition); outline: none;
background: var(--white); color: var(--gray-900);
}
.form-group input:focus,
.form-group select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,165,165,.1); }
.form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.form-check input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--teal); flex-shrink: 0; }
.form-check label { font-size: .82rem; color: var(--gray-700); cursor: pointer; }
.req { color: var(--red); }
.field-err { display: block; font-size: .75rem; color: var(--red); margin-top: 4px; }
.form-foot { font-size: .75rem; color: var(--gray-400); text-align: center; margin-top: 12px; }
/* ── 20. Result Page ─────────────────────────────────────── */
.result-hero { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); padding: 72px 0; }
.result-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.rh-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 8px; }
.rh-left h1 { color: var(--white); margin: 6px 0 14px; }
.level-badge {
display: inline-block; padding: 10px 24px; border-radius: 999px;
font-weight: 800; font-size: 1rem; margin-bottom: 24px; letter-spacing: .03em;
}
.lv-teal { background: var(--teal); color: var(--white); }
.lv-blue { background: var(--blue); color: var(--white); }
.lv-green { background: var(--emerald); color: var(--white); }
.lv-yellow { background: #f59e0b; color: var(--white); }
.lv-red { background: var(--red); color: var(--white); }
.score-ring-wrap { position: relative; display: inline-block; }
.score-svg { width: 130px; height: 130px; }
.score-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-num { font-size: 2.2rem; font-weight: 900; color: var(--white); line-height: 1; }
.score-pct { font-size: .7rem; color: rgba(255,255,255,.6); }
.result-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.rs-item { text-align: center; }
.rs-num { display: block; font-size: 1.6rem; font-weight: 900; color: var(--white); }
.rs-cor { color: #4ade80; }
.rs-wrg { color: #f87171; }
.rs-lbl { font-size: .72rem; color: rgba(255,255,255,.5); }
.result-hl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.hl-card { border-radius: 12px; padding: 14px 16px; }
.hl-str { background: rgba(74,222,128,.15); }
.hl-foc { background: rgba(96,165,250,.15); }
.hl-card h4 { color: var(--white); font-size: .8rem; margin-bottom: 4px; }
.hl-card p { color: rgba(255,255,255,.8); font-size: .82rem; }
/* Result detail */
.result-detail { padding: 64px 0; }
.perf-bars { margin-bottom: 40px; }
.perf-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.perf-subj { width: 140px; font-size: .875rem; font-weight: 600; flex-shrink: 0; }
.perf-track{ flex: 1; background: var(--gray-200); border-radius: 20px; height: 10px; }
.perf-fill { height: 100%; border-radius: 20px; background: var(--teal); transition: width 1s ease; }
.perf-pct { width: 42px; font-size: .82rem; font-weight: 700; text-align: right; }
.lb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lb-label { width: 80px; font-size: .78rem; font-weight: 600; text-transform: capitalize; }
.lb-track { flex: 1; background: var(--gray-200); border-radius: 20px; height: 7px; }
.lb-fill { height: 100%; border-radius: 20px; }
.lb-f { background: var(--emerald); }
.lb-r { background: var(--blue); }
.lb-c { background: var(--violet); }
/* Level scale */
.level-scale-sec { background: var(--gray-50); padding: 64px 0; }
.level-scale { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 32px; }
.ls-item {
background: var(--white); border: 2px solid var(--gray-200);
border-radius: 20px; padding: 20px; text-align: center;
transition: all var(--transition);
}
.ls-item.active { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14,165,165,.1); }
.ls-num { font-size: .7rem; font-weight: 700; color: var(--gray-400); margin-bottom: 6px; }
.ls-lbl { font-size: .78rem; font-weight: 700; color: var(--gray-700); margin-bottom: 6px; }
.ls-desc { font-size: .72rem; color: var(--gray-400); }
.ls-item.active .ls-lbl { color: var(--teal); }
.ls-item.active .ls-num { color: var(--teal); }
/* Next steps */
.next-steps-sec { padding: 80px 0; }
.ns-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.ns-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 24px; padding: 32px; text-align: center; }
.ns-icon { font-size: 2.8rem; margin-bottom: 16px; }
.ns-card h3 { margin-bottom: 10px; }
.ns-card p { font-size: .875rem; margin-bottom: 20px; }
/* ── Program Detail Page Styles ──────────────────────────── */
.program-tabs-wrap { position: sticky; top: var(--navbar-h); z-index: 900; background: var(--white); border-bottom: 2px solid var(--gray-200); box-shadow: var(--shadow-sm); }
.program-detail { padding: 80px 0; }
.program-detail.program-alt { background: var(--gray-50); }
.program-detail-header { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; margin-bottom: 56px; }
.pdh-text .program-badge { display: inline-block; margin-bottom: 14px; }
.pdh-text h2 { margin: 8px 0 12px; font-size: 2rem; }
.program-tagline { font-size: 1rem; font-weight: 600; color: var(--teal); margin-bottom: 14px; font-style: italic; }
.pdh-text p { margin-bottom: 14px; }
.pdh-text .btn { margin-top: 12px; }
/* Program Visual Cards */
.pdh-visual { border-radius: 24px; padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pdh-green { background: linear-gradient(135deg, var(--emerald-light), #dcfce7); }
.pdh-blue { background: linear-gradient(135deg, var(--blue-light), #dbeafe); }
.pdh-purple { background: linear-gradient(135deg, var(--violet-light),#ede9fe); }
.pdh-icon-big { font-size: 72px; }
.approach-card { width: 100%; background: var(--white); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.approach-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 12px; }
.approach-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.approach-flow span { background: var(--gray-100); color: var(--gray-700); padding: 6px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.approach-flow .fa { color: var(--gray-400); background: transparent; padding: 0; }
.info-card-small { width: 100%; background: var(--white); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); text-align: left; }
.info-card-small h4 { margin-bottom: 8px; font-size: .95rem; }
.info-card-small p { font-size: .82rem; }
/* Section Sub Title */
.section-sub { font-size: 1.3rem; margin-bottom: 28px; margin-top: 16px; font-family: var(--font-display); }
/* Features Icon */
.fi { font-size: 1.6rem; margin-bottom: 10px; }
/* Program Info Row */
.program-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 48px 0; }
.info-block h3 { margin-bottom: 18px; font-size: 1.1rem; }
.info-block p { margin-bottom: 12px; }
/* Jenjang Badges */
.jenjang-badges { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.jenjang-badge { background: var(--teal); color: var(--white); padding: 8px 20px; border-radius: 999px; font-weight: 700; font-size: .875rem; }
/* Philosophy Box */
.philosophy-box { border-radius: 20px; padding: 40px; text-align: center; margin-top: 48px; }
.bg-green { background: var(--emerald-light); border: 1px solid var(--emerald-border); }
.bg-blue { background: var(--blue-light); border: 1px solid var(--blue-border); }
.bg-purple { background: var(--violet-light);border: 1px solid var(--violet-border); }
.phi-quote { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); font-style: italic; margin-bottom: 10px; line-height: 1.5; }
.phi-sub { font-size: .875rem; color: var(--gray-500); }
/* AV Steps (TKA) */
.av-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 32px 0 48px; }
.av-step { display: flex; gap: 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 20px; }
.program-alt .av-step { background: var(--gray-50); }
.av-num { font-size: 1.6rem; font-weight: 900; color: var(--teal); line-height: 1; flex-shrink: 0; }
.av-step h4 { margin-bottom: 6px; font-size: .9rem; }
.av-step p { font-size: .82rem; }
/* Module Flow */
.module-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; }
.module-flow span { background: var(--gray-100); color: var(--gray-700); padding: 6px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.module-flow .fa { color: var(--gray-400); background: transparent; padding: 0; }
/* Target Item */
.target-item { margin-bottom: 16px; }
.target-item .target-badge { display: inline-block; margin-bottom: 8px; }
.target-item p { font-size: .82rem; margin-top: 6px; }
/* Materi Card */
.materi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 48px; }
.materi-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; padding: 24px; }
.materi-card-wide { grid-column: span 3; }
.materi-num { font-size: 1.8rem; font-weight: 900; color: var(--teal); line-height: 1; margin-bottom: 12px; }
.materi-card h4 { margin-bottom: 10px; }
.materi-card p { font-size: .875rem; }
/* Why Start Early Section */
.why-early-section { background: var(--navy); border-radius: 24px; padding: 48px; margin: 48px 0; }
.why-early-section h3 { color: var(--white); margin-bottom: 8px; font-size: 1.4rem; }
.wse-sub { color: rgba(255,255,255,.6); margin-bottom: 32px; font-size: .95rem; }
.wse-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; }
.wse-item { text-align: center; }
.wse-icon { font-size: 2rem; margin-bottom: 12px; }
.wse-item h4 { font-size: .875rem; color: var(--white); margin-bottom: 6px; }
.wse-item p { font-size: .75rem; color: rgba(255,255,255,.55); line-height: 1.4; }
/* ── Method Page Specific Styles ─────────────────────────── */
.method-intro { padding: 72px 0; }
.method-intro-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.mi-text p { margin-bottom: 14px; }
.mi-lead { font-size: 1.05rem; font-weight: 600; color: var(--gray-900); margin-bottom: 16px; }
.mi-visual { display: flex; justify-content: center; align-items: center; }
.method-cycle { position: relative; width: 280px; height: 280px; border-radius: 50%; border: 2px dashed var(--teal); display: flex; align-items: center; justify-content: center; background: var(--teal-light); }
.mc-item { position: absolute; background: var(--teal); color: var(--white); padding: 8px 18px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.mc-1 { top: -14px; left: 50%; transform: translateX(-50%); }
.mc-2 { right: -30px; top: 50%; transform: translateY(-50%); }
.mc-3 { bottom: -14px;left: 50%; transform: translateX(-50%); }
.mc-4 { left: -30px; top: 50%; transform: translateY(-50%); }
.mc-center { font-weight: 900; font-size: .9rem; color: var(--navy); text-align: center; line-height: 1.3; }
.method-step-section { padding: 80px 0; }
.method-step-section.method-alt { background: var(--gray-50); }
.ms-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; position: relative; }
.ms-inner-rev { grid-template-columns: 1fr 1.2fr; }
.ms-inner-rev .ms-content { order: 2; }
.ms-inner-rev .ms-visual { order: 1; }
.ms-badge { position: absolute; top: 0; left: 0; font-size: 4rem; font-weight: 900; color: var(--gray-100); line-height: 1; z-index: 0; }
.ms-content { position: relative; z-index: 1; }
.ms-tag { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 8px; }
.ms-content h2 { margin-bottom: 16px; }
.ms-content p { margin-bottom: 12px; }
.ms-lead { font-size: 1.05rem; font-weight: 600; color: var(--gray-900) !important; }
.ms-highlight { margin-top: 24px; padding: 16px 20px; border-left: 4px solid var(--teal); background: var(--teal-pale); border-radius: 0 12px 12px 0; font-weight: 600; color: var(--teal-dark); font-size: .95rem; }
.ms-visual { background: var(--gray-100); border-radius: 24px; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.ms-icon-big { font-size: 100px; }
.ms-visual-foundation { background: linear-gradient(135deg, var(--teal-light), var(--teal-pale)); }
.ms-visual-reasoning { background: linear-gradient(135deg, var(--blue-light), #dbeafe); }
.ms-visual-challenge { background: linear-gradient(135deg, var(--violet-light), #ede9fe); }
.ms-visual-advance { background: linear-gradient(135deg, var(--emerald-light), #dcfce7); }
.personalized-section { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); padding: 80px 0; }
.ps-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.ps-text h2 { color: var(--white); margin-bottom: 12px; }
.ps-sub { font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 16px; }
.ps-text p { color: rgba(255,255,255,.7); margin-bottom: 14px; }
.progress-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; }
.progress-flow span { background: rgba(255,255,255,.12); color: var(--white); padding: 7px 16px; border-radius: 20px; font-size: .8rem; font-weight: 600; }
.progress-flow .fa { background: transparent; padding: 0; }
.ps-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 32px; }
.ps-card h3 { color: var(--white); margin-bottom: 14px; }
.ps-card p { color: rgba(255,255,255,.7); margin-bottom: 12px; }
.more-than-list { margin: 20px 0; }
.more-than-list li { color: rgba(255,255,255,.9); font-size: 1rem; margin-bottom: 10px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.ps-note { font-size: .875rem; font-style: italic; margin-top: 20px; }
/* ── 21. Footer ──────────────────────────────────────────── */
.site-footer { background: var(--navy-dark); padding: 64px 0 0; }
.sf-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr;
gap: 48px; padding-bottom: 52px; align-items: start;
}
/* Brand */
.sf-brand { display: flex; flex-direction: column; }
.sf-logo { display: inline-block; margin-bottom: 14px; }
.sf-logo img { height: 100px; width: auto; filter: brightness(0) invert(1) opacity(.9); }
.sf-tagline { font-size: .8rem; color: rgba(255,255,255,.45); line-height: 1.65; margin: 0 0 20px; max-width: 240px; }
/* Social icon buttons */
.sf-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-social {
width: 36px; height: 36px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: transform .2s, opacity .2s;
}
.sf-social:hover { transform: translateY(-3px); opacity: .85; }
.sf-social--yt { background: #ff0000; color: #fff; }
.sf-social--wa { background: #25d366; color: #fff; }
.sf-social--email { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7); }
.sf-social--email:hover { background: var(--teal); color: #fff; }
/* Link cols */
.sf-col__title { color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; }
.sf-links { display: flex; flex-direction: column; gap: 9px; }
.sf-links a { color: rgba(255,255,255,.45); font-size: .82rem; line-height: 1.4; transition: color .18s; }
.sf-links a:hover { color: var(--teal-light); }
/* Contact col */
.sf-contact { display: flex; flex-direction: column; gap: 10px; }
.sf-contact__link {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.45); font-size: .8rem; line-height: 1.4;
text-decoration: none; transition: color .18s; word-break: break-all;
}
.sf-contact__link:hover { color: var(--teal-light); }
.sf-contact__icon {
width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.5); transition: background .18s, color .18s;
}
.sf-contact__link:hover .sf-contact__icon { background: rgba(14,165,165,.2); color: var(--teal-light); border-color: rgba(14,165,165,.3); }
.sf-contact__icon--wa { background: rgba(37,211,102,.15); color: #25d366; border-color: rgba(37,211,102,.25); }
.sf-contact__icon--yt { background: rgba(255,0,0,.15); color: #ff4444; border-color: rgba(255,0,0,.2); }
/* Bottom bar */
.sf-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; flex-wrap: wrap;
}
.sf-bottom__copy { font-size: .75rem; color: rgba(255,255,255,.25); margin: 0; }
.sf-bottom__icons { display: flex; gap: 10px; align-items: center; }
.sf-bottom__icon {
width: 30px; height: 30px; border-radius: 7px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.4); transition: background .18s, color .18s;
}
.sf-bottom__icon:hover { background: rgba(14,165,165,.2); color: var(--teal-light); border-color: rgba(14,165,165,.3); }
/* keep old classes working if used elsewhere */
.footer { background: var(--navy-dark); padding: 64px 0 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 24px; text-align: center; }
.footer-bottom p { color: rgba(255,255,255,.25); font-size: .75rem; }
/* ── 22. Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-inner { gap: 36px; }
.programs-grid { grid-template-columns: repeat(2,1fr); }
.features-grid { grid-template-columns: repeat(2,1fr); }
.approach-steps { grid-template-columns: repeat(2,1fr); }
.challenge-cards { grid-template-columns: repeat(2,1fr); }
.wse-grid { grid-template-columns: repeat(3,1fr); }
.materi-grid { grid-template-columns: repeat(2,1fr); }
.materi-wide { grid-column: span 2; }
.materi-card-wide { grid-column: span 2; }
.footer-inner { grid-template-columns: repeat(3,1fr); }
.level-scale { grid-template-columns: repeat(3,1fr); }
.result-stats { grid-template-columns: repeat(2,1fr); }
.program-detail-header { grid-template-columns: 1fr; }
.pdh-visual { display: none; }
.program-info-row { grid-template-columns: 1fr; }
.av-steps { grid-template-columns: repeat(2,1fr); }
.method-intro-inner { grid-template-columns: 1fr; }
.mi-visual { display: none; }
.ms-inner, .ms-inner-rev { grid-template-columns: 1fr; }
.ms-visual { display: none; }
.ps-inner { grid-template-columns: 1fr; }
.after-ch-grid { grid-template-columns: 1fr; gap: 0; }
.ac-arrow { transform: rotate(90deg); padding-top: 0; padding: 8px 0; }
}
@media (max-width: 768px) {
:root { --navbar-h: 64px; }
.nav-logo img { height: 48px; max-width: 160px; }
.nav-links {
display: none; position: fixed;
top: var(--navbar-h); left: 0; right: 0;
flex-direction: column; align-items: stretch;
background: #fff;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 8px 24px rgba(13,27,62,.12);
padding: 10px 16px 18px;
z-index: 9998;
gap: 2px;
}
.nav-links.open { display: flex; }
.nav-links li { width: 100%; }
.nav-links a {
display: block;
padding: 13px 16px;
border-radius: 12px;
font-size: .95rem;
color: var(--gray-600);
border-bottom: none !important;
}
.nav-links a:hover { background: var(--teal-pale); color: var(--teal-dark); }
.nav-links a.active { background: var(--teal-pale); color: var(--teal-dark); font-weight: 700; }
.nav-toggle { display: flex; }
.nav-cta { display: none; }
.btn-admin-login { font-size: .75rem; padding: 7px 10px; }
.hero-inner { grid-template-columns: 1fr; padding-bottom: 40px; }
.hero-visual { display: none !important; }
.hero-pillars { grid-template-columns: repeat(2,1fr); border-radius: 20px; }
.pillar-item { border-right: none; border-bottom: 1px solid var(--gray-100); }
.pillar-item:nth-child(odd) { border-right: 1px solid var(--gray-100); }
.pillar-item:nth-last-child(-n+2) { border-bottom: none; }
.method-steps { grid-template-columns: repeat(2,1fr); }
.method-steps::before { display: none; }
.programs-grid { grid-template-columns: 1fr; }
.daily-inner { grid-template-columns: 1fr; }
.cta-inner { flex-direction: column; text-align: center; }
.prog-header { grid-template-columns: 1fr; }
.prog-visual { display: none; }
.features-grid { grid-template-columns: 1fr; }
.info-2col { grid-template-columns: 1fr; }
.approach-steps { grid-template-columns: 1fr; }
.materi-grid { grid-template-columns: 1fr; }
.materi-wide { grid-column: span 1; }
.materi-card-wide { grid-column: span 1; }
.wse-grid { grid-template-columns: repeat(2,1fr); }
.av-steps { grid-template-columns: 1fr; }
.challenge-cards { grid-template-columns: 1fr; }
.after-ch-grid { grid-template-columns: 1fr; }
.ch-bottom-inner { grid-template-columns: 1fr; padding: 28px; }
.start-inner { grid-template-columns: 1fr; }
.challenge-hero .page-hero-inner { grid-template-columns: 1fr; }
.ch-deco { display: none; }
.method-intro-inner { grid-template-columns: 1fr; }
.method-cycle-wrap { display: none; }
.ms-inner, .ms-inner.rev, .ms-inner-rev { grid-template-columns: 1fr; }
.ms-visual { display: none; }
.ms-badge { font-size: 2.5rem; opacity: .5; }
.pers-inner, .ps-inner { grid-template-columns: 1fr; }
.result-hero-inner { grid-template-columns: 1fr; }
.result-hl { grid-template-columns: 1fr; }
.level-scale{ grid-template-columns: repeat(2,1fr); }
.ns-cards { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: repeat(2,1fr); }
.program-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
.hero-pillars { grid-template-columns: 1fr; }
.pillar-item, .pillar-item:nth-child(odd) { border-right: none; }
.pillar-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-100); }
.pillar-item:last-child { border-bottom: none; }
.after-ch-grid{ grid-template-columns: 1fr; }
.level-scale { grid-template-columns: 1fr 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.method-steps { grid-template-columns: 1fr; }
.result-stats { grid-template-columns: repeat(2,1fr); }
.ch-bottom-inner { padding: 24px 20px; }
.form-card { padding: 24px; }
.why-early-section, .wse-section { padding: 28px 20px; }
}
/* ═══════════════════════════════════════════════════════════
23. NEW DESIGN CLASSES — Pillars, Illus, Overlays, etc.
═══════════════════════════════════════════════════════════ */
/* --- Pillar Icon Boxes (index hero pillars) --- */
.pillar-icon-box {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: 12px; display:flex; align-items:center; justify-content:center;
color:#fff;
}
.pillar-icon-box-teal { background: linear-gradient(135deg, #00b4a6, #00d4a3); box-shadow: 0 4px 10px rgba(0,180,166,.28); }
.pillar-icon-box-navy { background: linear-gradient(135deg, #0d1b3e, #1a2f6e); box-shadow: 0 4px 10px rgba(13,27,62,.25); }
.pillar-icon-box-violet { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 4px 10px rgba(124,58,237,.28); }
.pillar-icon-box-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); color:#5b3b00; box-shadow: 0 4px 10px rgba(245,158,11,.3); }
.pillar-item strong { font-size:.92rem; color: var(--navy); font-weight:700; font-family:var(--font-display); }
.pillar-item span { font-size:.8rem; color:var(--gray-500); line-height:1.4; }
/* --- Method Section Title Underline --- */
.method-strip-header h2 { color: var(--navy); font-size: clamp(1.5rem, 2.8vw, 2rem); font-family: var(--font-display); font-weight:800; }
.method-title-underline {
width:56px; height:4px; background: linear-gradient(90deg, var(--teal), var(--blue));
border-radius: 999px; margin: 12px auto 0;
}
.step-circle {
width:68px; height:68px; border-radius:50%;
background:#fff; border: 2px solid var(--teal); color:var(--teal);
display:flex; align-items:center; justify-content:center;
box-shadow: 0 0 0 6px var(--teal-light);
margin: 0 auto 16px;
}
.step-circle-blue { color:var(--blue); border-color:var(--blue); box-shadow: 0 0 0 6px var(--blue-light); }
.step-circle-violet { color:var(--violet); border-color:var(--violet); box-shadow: 0 0 0 6px var(--violet-light); }
.step-circle-amber { color:#d97706; border-color:#f59e0b; box-shadow: 0 0 0 6px #fef3c7; }
/* --- Programs + Daily Wrap layout --- */
.section-header-left { text-align:left; margin-bottom: 32px; }
.section-header-left .eyebrow { display:block; }
.programs-daily-wrap {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
gap: 28px;
align-items: start;
}
.programs-daily-wrap .programs-grid { grid-template-columns: 1fr; }
@media (min-width: 960px) and (max-width: 1199px) {
.programs-daily-wrap .programs-grid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1200px) {
.programs-daily-wrap .programs-grid { grid-template-columns: 1fr; }
}
/* Program card redesign: top illustration + overlay icon */
.program-card {
position: relative;
padding: 0 0 28px 0;
border: 1px solid var(--gray-200);
}
.program-card-top {
padding: 44px 24px 58px;
position: relative;
overflow: hidden;
border-radius: 22px 22px 0 0;
}
.program-card-top-green { background: linear-gradient(135deg, var(--emerald-light) 0%, #bbf7d0 100%); }
.program-card-top-blue { background: linear-gradient(135deg, var(--blue-light) 0%, #bfdbfe 100%); }
.program-card-top-purple { background: linear-gradient(135deg, var(--violet-light) 0%, #ddd6fe 100%); }
.program-card-body {
padding: 0 28px 0;
margin-top: -36px;
position: relative;
}
/* --- Ch-Card Overlay Circle (used on both challenge & program cards) --- */
.ch-card-overlay {
width: 76px; height: 76px; border-radius: 50%;
background: #fff;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 8px 22px rgba(13,27,62,.12);
border: 3px solid #fff;
margin-bottom: 14px;
position: relative;
z-index: 2;
}
.overlay-green { color: var(--emerald); box-shadow: 0 6px 18px rgba(16,185,129,.25), 0 0 0 4px var(--emerald-light); border-color:#fff; }
.overlay-blue { color: var(--blue); box-shadow: 0 6px 18px rgba(37,99,235,.25), 0 0 0 4px var(--blue-light); border-color:#fff; }
.overlay-purple { color: var(--violet); box-shadow: 0 6px 18px rgba(124,58,237,.25), 0 0 0 4px var(--violet-light); border-color:#fff; }
/* --- CSS illustrations: Book (Academic Program/Card) --- */
.program-card-illus, .ch-card-illus { position:relative; width:100%; height:140px; }
.illus-book, .illus-book-ch { position:relative; width:100%; height:100%; }
.illus-book .illus-page,
.ch-book { position:absolute; bottom: 30px; left: 50%; transform:translateX(-50%); width:130px; height:18px; border-radius: 4px 4px 3px 3px; background: linear-gradient(135deg, #fff 60%, #f0fdf4); box-shadow: 0 8px 18px rgba(16,185,129,.18); border: 2px solid #86efac;}
.illus-page-1, .ch-book-1 { bottom: 48px; width: 120px; background: linear-gradient(135deg, #fff, #fef3c7); border-color:#fcd34d; }
.illus-page-2, .ch-book-2 { bottom: 66px; width: 110px; background: linear-gradient(135deg, #fff, #ede9fe); border-color:#c4b5fd; }
.illus-book .illus-cap,
.ch-cap {
position: absolute;
top: 10px; left: 50%; transform:translateX(-50%);
width: 58px; height: 46px;
background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
clip-path: polygon(0% 45%, 50% 0%, 100% 45%, 100% 60%, 92% 60%, 92% 100%, 8% 100%, 8% 60%, 0% 60%);
filter: drop-shadow(0 4px 10px rgba(22,163,74,.25));
}
.illus-book .illus-cap::after,
.ch-cap::after {
content:''; position:absolute; right:-6px; bottom:-2px;
width:28px; height: 30px;
border-left: 3px solid #ca8a04;
border-bottom: 3px solid #ca8a04;
border-radius: 0 0 0 16px;
}
.illus-book .illus-pen,
.ch-pen { position:absolute; right: 22px; bottom: 36px; width: 10px; height:70px; background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%); transform: rotate(20deg); border-radius: 3px 3px 0 0;}
.illus-book .illus-pen::after,
.ch-pen::after { content:''; position:absolute; top: -6px; left: 2px; width:6px; height:10px; background:#1f2937; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 50% 50% 0 0 / 80% 80% 0 0;}
.ch-book-pages { position:absolute; left:50%; bottom: 20px; transform:translateX(-50%); width: 70px; height: 10px; background:#fff; border-radius: 0 0 4px 4px; border: 1.5px solid #a7f3d0; border-top:none; }
.ch-sqrt { position: absolute; font-family: Georgia, serif; font-weight: 800; font-size: 2rem; color: #16a34a; opacity: .5; }
.ch-sqrt-1 { top: 6px; left: 10px; transform: rotate(-8deg); }
.ch-sqrt-2 { top: 28px; right: 14px; transform: rotate(10deg); font-size: 1.6rem; }
/* --- CSS illustrations: Monitor (TKA Program/Card) --- */
.illus-monitor, .illus-monitor-ch { position:relative; width:100%; height:100%; }
.illus-screen, .ch-mon { position: absolute; top: 10px; left: 50%; transform:translateX(-50%); width: 110px; height: 78px; border-radius: 10px; background: linear-gradient(135deg, #1e40af, #1d4ed8); box-shadow: 0 10px 22px rgba(29,78,216,.3); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: .06em; }
.illus-stand, .ch-mon-stand { position: absolute; left:50%; top: 88px; transform:translateX(-50%); width: 36px; height: 14px; background:#94a3b8; border-radius: 2px; }
.illus-stand::after, .ch-mon-stand::after { content:''; position: absolute; left: 50%; bottom:-6px; transform:translateX(-50%); width: 58px; height: 5px; background:#cbd5e1; border-radius: 2px; }
.illus-doc, .ch-doc-ch { position: absolute; right: 18px; bottom: 18px; width: 60px; height: 76px; background: linear-gradient(180deg, #fff, #eff6ff); border: 2px solid #93c5fd; border-radius: 4px; box-shadow: 0 6px 14px rgba(37,99,235,.18); padding: 6px 5px; }
.illus-check, .ch-doc-line { width: 100%; height: 5px; background: #dbeafe; border-radius: 3px; margin-bottom: 5px; }
.ch-doc-line.d2 { width: 70%; }
.illus-check::after, .ch-tick { content:''; display:block; width:18px; height: 18px; margin: 4px auto 0; background: var(--blue); border-radius: 50%; position:relative; }
.illus-check::after, .ch-tick::after { content:''; position:absolute; left:5px; top: 2px; width:5px; height:10px; border: solid #fff; border-width:0 2px 2px 0; transform: rotate(45deg); }
.ch-tick.t2 { margin-top: 10px; }
.illus-pencil, .ch-pen-ch { position: absolute; left: 24px; bottom: 20px; width: 10px; height: 80px; background: linear-gradient(180deg, #f59e0b 0%, #b45309 60%, #1f2937 60%, #1f2937 100%); transform: rotate(-18deg); border-radius: 3px; }
.illus-chart, .ch-chart-ch { position:absolute; right: 30px; top: 6px; width: 48px; height: 36px; opacity: .85; }
.illus-chart::before, .ch-chart-ch::before { content:''; position:absolute; bottom: 0; left: 4px; width:10px; height:22px; background: linear-gradient(180deg, #93c5fd, #1d4ed8); border-radius: 2px 2px 0 0; }
.illus-chart::after, .ch-chart-ch::after { content:''; position:absolute; bottom:0; left: 20px; width:10px; height:32px; background: linear-gradient(180deg, #86efac, #16a34a); border-radius: 2px 2px 0 0;}
.ch-chart-ch::after { left: 32px; height: 26px; background: linear-gradient(180deg,#ddd6fe,#7c3aed);}
/* --- CSS illustrations: School (Labschool Program/Card) --- */
.illus-school, .illus-school-ch { position:relative; width:100%; height:100%; }
.illus-school-body, .sch-body { position:absolute; bottom: 10px; left: 50%; transform:translateX(-50%); width: 150px; height: 90px; background: linear-gradient(180deg, #fff 0%, #f5f3ff 100%); border: 2px solid #a78bfa; border-radius: 6px 6px 0 0; }
.sch-body { border-color: #c4b5fd; background: linear-gradient(180deg,#ede9fe 0%, #ddd6fe 100%); }
.illus-door, .sch-door { position:absolute; bottom:0; left: 50%; transform:translateX(-50%); width:30px; height: 46px; background: linear-gradient(180deg, #7c3aed, #5b21b6); border-radius: 10px 10px 0 0; }
.illus-win, .sch-win { position:absolute; width: 24px; height: 24px; background: linear-gradient(135deg,#dbeafe, #bfdbfe); border: 2px solid #a78bfa; border-radius: 3px; }
.illus-win-1, .sch-win-1 { top: 12px; left: 20px; }
.illus-win-2, .sch-win-2 { top: 12px; right: 20px; }
.sch-win-3 { top: 12px; left: 50%; transform:translateX(-50%); background: linear-gradient(135deg,#fef3c7,#fde68a); }
.illus-school-top, .sch-roof { position:absolute; bottom: 94px; left: 50%; transform:translateX(-50%); width: 172px; height: 40px; background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); filter: drop-shadow(0 6px 14px rgba(124,58,237,.3)); }
.sch-clock { position:absolute; top: 18px; right: 22px; width: 16px; height: 16px; border-radius: 50%; background:#fff; border:2px solid #7c3aed; }
.sch-clock::after { content:''; position:absolute; top: 3px; left: 6px; width: 2px; height: 8px; background:#7c3aed; border-radius: 2px; transform-origin: bottom; }
.sch-flag { position: absolute; bottom: 124px; left: 50%; transform: translateX(-60px); }
.sch-flag-pole { display:block; width: 3px; height: 48px; background: #1f2937; border-radius: 2px; }
.sch-flag-fabric { position:absolute; top: 2px; left: 3px; width: 30px; height: 20px; background: linear-gradient(135deg, #ef4444, #dc2626); clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); }
.illus-tree, .sch-bush { position:absolute; bottom: 8px; width: 24px; height: 40px; border-radius: 50% 50% 30% 30%; background: linear-gradient(180deg, #86efac, #16a34a); }
.illus-tree::after, .sch-bush::after { content:''; position:absolute; bottom:-6px; left: 50%; transform: translateX(-50%); width: 6px; height: 8px; background:#92400e; border-radius: 0 0 2px 2px; }
.illus-tree-1, .sch-bush-1 { left: 18px; }
.illus-tree-2, .sch-bush-2 { right: 18px; width: 18px; height: 30px; bottom: 10px; }
.sch-cloud { position:absolute; width: 32px; height: 10px; background:#fff; border-radius: 12px; opacity: .9; }
.sch-cloud::before { content:''; position:absolute; bottom: 3px; left: 6px; width: 14px; height:14px; border-radius: 50%; background:#fff;}
.sch-cloud-1 { top: 4px; left: 20px; }
.sch-cloud-2 { top: 16px; right: 20px; width: 24px; }
/* --- Daily Challenge Compact Card (right column) --- */
.daily-right-compact { position: sticky; top: calc(var(--navbar-h) + 20px); }
.dc-title-rule { width: 44px; height: 3px; background: linear-gradient(90deg, var(--teal), var(--blue)); border-radius: 999px; margin-bottom: 16px; }
.dc-feedback.correct-show, .dc-feedback.wrong-show { display: block; }
.dc-feedback.correct-show { background: var(--emerald-light); color: #065f46; border: 1px solid var(--emerald-border); }
.dc-feedback.wrong-show { background: var(--red-light); color: #991b1b; border: 1px solid #fca5a5; }
/* --- CTA Banner refined --- */
.cta-inner { display:flex; align-items:center; justify-content: space-between; gap: 24px; position:relative; z-index:1; }
.cta-left h2 { color: #fff; font-size: clamp(1.4rem, 2.5vw, 1.8rem); margin-bottom: 6px; }
.cta-left p { color: rgba(255,255,255,.7); margin: 0; }
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before {
content:''; position:absolute; left: -20px; bottom: -30px;
width: 300px; height: 220px; opacity:.12;
background:
radial-gradient(circle at 50% 90%, var(--teal) 0%, transparent 60%),
linear-gradient(180deg, transparent 70%, var(--teal) 70%);
clip-path: polygon(0 100%, 8% 60%, 20% 80%, 32% 40%, 45% 65%, 58% 25%, 72% 55%, 86% 15%, 100% 40%, 100% 100%);
}
.cta-banner::after {
content:''; position:absolute; left: 60px; bottom: 60px; width: 22px; height: 22px;
background: var(--teal); opacity:.4;
clip-path: polygon(50% 0, 50% 30%, 40% 30%, 40% 100%, 60% 100%, 60% 30%, 50% 30%);
}
.btn-block { width: 100%; }
/* --- Challenge Page Hero --- */
.challenge-hero {
background: linear-gradient(135deg, #effaf9 0%, #f0fdfa 40%, #ecfeff 80%, #fff 100%) !important;
color: var(--navy) !important;
padding: 112px 0 64px !important;
}
.challenge-hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.challenge-hero-text h1 { color: var(--navy) !important; margin: 10px 0 16px !important; }
.ch-hl { color: var(--teal); }
.challenge-hero-text p { color: var(--gray-600) !important; font-size: 1rem; max-width: 520px; }
.challenge-hero-text .eyebrow { color: var(--teal); }
.challenge-hero-visual { position: relative; min-height: 500px; }
.ch-visual-shape {
position: absolute;
top: 20px; right: 20px;
width: 78%; height: 88%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 200' fill='none' stroke='white' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 25 L30 125 Q30 155 75 170 L95 175 Q115 180 135 175 L155 170 Q200 155 200 125 L200 25 L170 25 L170 120 Q170 140 140 150 L115 156 Q112 157 108 156 L80 150 Q60 140 60 120 L60 25 Z'/%3E%3Cpath d='M30 25 L115 10 L200 25'/%3E%3C/svg%3E"),
linear-gradient(135deg, rgba(14,165,165,.16), rgba(16,185,129,.12));
background-size: 55% auto, cover;
background-repeat: no-repeat, no-repeat;
background-position: center center, center;
border-radius: 44px 10px 52px 10px;
transform: rotate(-4deg);
z-index: 0;
}
.ch-hero-img {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 92%; height: auto; max-height: 520px; object-fit: contain;
border-radius: 22px;
box-shadow: 0 24px 60px rgba(13,27,62,.18);
z-index: 2;
}
.ch-float {
position: absolute; z-index: 3;
background: #fff;
border-radius: 14px;
padding: 10px 14px;
display: flex; align-items: center; gap: 6px;
box-shadow: 0 10px 24px rgba(13,27,62,.12);
color: var(--navy);
border: 1px solid #fff;
animation: floatAnim 3.2s ease-in-out infinite;
}
.ch-float-formula {
top: 8%; left: -4%;
font-family: Georgia, serif; font-style: italic; font-weight: 700;
color: var(--navy); font-size: .95rem; padding: 12px 18px;
animation-delay: 0s;
}
.ch-float-bulb { top: 20%; right: -2%; color: #f59e0b; animation-delay: .8s; }
.ch-float-bulb svg { color: #f59e0b; }
.ch-float-chart { bottom: 16%; left: -2%; color: var(--teal); animation-delay: 1.6s; }
.ch-float-chart svg { color: var(--teal); }
.ch-float-puzzle { bottom: 8%; right: 4%; color: var(--violet); animation-delay: 2.4s; }
.ch-float-puzzle svg { color: var(--violet); }
/* --- Choose divider redesign (with bullets & lines) --- */
.choose-divider {
display:flex; align-items:center; justify-content:center;
gap: 14px; margin-bottom: 48px;
}
.choose-line {
flex: 1; max-width: 180px; height: 2px;
background: linear-gradient(90deg, transparent, #cbd5e1 50%, transparent);
position: relative;
}
.choose-line::after {
content:''; position:absolute; right: -8px; top: 50%;
transform: translateY(-50%);
width: 10px; height: 10px; border-radius: 50%; background: var(--teal);
box-shadow: 0 0 0 4px var(--teal-light);
}
.choose-line:first-child::after { right: auto; left: -8px; }
.choose-text {
font-family: var(--font-display);
font-size: .85rem; font-weight: 800;
letter-spacing: .22em; color: var(--navy);
white-space: nowrap;
}
/* --- Ch-card top re-layout for new illus --- */
.ch-card-top { padding: 40px 28px 56px; }
.ch-card-body { padding: 0 28px 28px; margin-top: -36px; }
.ch-card-body h3 { font-family: var(--font-display); font-size: 1.08rem; }
.ch-list { margin-bottom: 18px; }
.ch-list li {
position: relative;
padding-left: 28px; margin-bottom: 6px;
font-size: .88rem; color: var(--gray-700);
}
.ch-list li::before {
content:''; position:absolute; left: 0; top: 2px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--emerald-light);
}
.ch-list li::after {
content:''; position:absolute; left: 5px; top: 5px;
width: 5px; height: 10px;
border: solid var(--emerald); border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ch-list.blue-list li::before { background: var(--blue-light); }
.ch-list.blue-list li::after { border-color: var(--blue); }
.ch-list.purple-list li::before { background: var(--violet-light); }
.ch-list.purple-list li::after { border-color: var(--violet); }
.ch-note {
display:flex; align-items:flex-start; gap: 8px;
padding: 12px 14px;
border-radius: 10px;
font-size: .82rem;
color: var(--gray-700);
line-height:1.55;
}
.note-green { background: var(--emerald-light); color: #064e3b; }
.note-blue { background: var(--blue-light); color: #1e3a8a; }
.note-purple { background: var(--violet-light); color: #4c1d95; }
.note-green svg { color: var(--emerald); }
.note-blue svg { color: var(--blue); }
.note-purple svg { color: var(--violet); }
/* --- After-challenge section new layout --- */
.after-ch { background: #fff !important; padding: 72px 0; }
.after-ch-header { text-align: center; margin-bottom: 12px; }
.after-ch-grid {
display: grid;
grid-template-columns: auto 40px auto 40px auto 40px auto;
align-items: start;
justify-content: center;
gap: 0;
margin-top: 32px;
}
.ac-item { text-align: center; padding: 20px 14px; max-width: 220px; }
.ac-icon-box {
width: 64px; height: 64px; margin: 0 auto 14px;
border-radius: 50%;
background: var(--teal-light); color: var(--teal-dark);
display:flex; align-items:center; justify-content:center;
border: 3px solid #fff;
box-shadow: 0 0 0 4px var(--teal-pale);
}
.ac-item h4 { font-family: var(--font-display); font-size: .95rem; color: var(--navy); margin-bottom: 6px; }
.ac-item p { font-size: .82rem; color: var(--gray-500); }
.ac-arrow {
display:flex; align-items:center; justify-content:center;
padding-top: 40px;
color: var(--teal);
opacity: .6;
}
/* --- Ch-bottom gradient wrapper --- */
.ch-bottom { padding: 64px 0 80px; }
.ch-bottom-inner-grad {
background: linear-gradient(135deg, #effaf9 0%, #ecfdf5 50%, #f5f3ff 100%);
border-radius: 32px;
padding: 48px 44px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 44px;
align-items: center;
border: 1px solid rgba(0,180,166,.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ch-bottom-left h3 {
font-family: var(--font-display);
font-weight: 900;
color: var(--navy);
font-size: clamp(1.3rem, 2vw, 1.8rem);
line-height: 1.2;
margin-bottom: 12px;
}
.ch-bottom-left p { color: var(--gray-600); font-size: .95rem; max-width: 480px; }
.ch-bottom-right { display: flex; flex-direction: column; gap: 16px; }
.ch-box {
background: #fff;
border-radius: 20px;
padding: 24px;
box-shadow: 0 8px 24px rgba(13,27,62,.06);
border: 1px solid rgba(0,0,0,.04);
}
.ch-box h4 { font-family: var(--font-display); color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.box-green h4 { color: var(--emerald); }
.box-purple h4 { color: var(--violet); }
.ch-box p { font-size: .85rem; color: var(--gray-600); margin-bottom: 14px; }
/* --- BONUS: Ensure btn-outline-dark is pill and btn-lg matches design --- */
.btn-outline-dark { border-radius: 999px !important; font-weight: 700 !important; }
.btn-lg { padding: 16px 34px !important; font-size: .9rem !important; }
/* --- Fine-tuning: Hero student images (local user-provided PNG crops) --- */
.hero-student-img {
object-fit: cover !important;
object-position: 50% 20% !important; /* fokus ke area wajah & badan atas */
border-radius: 28px !important;
width: 92% !important;
height: 520px !important;
max-height: 540px !important;
z-index: 2;
filter: drop-shadow(0 24px 50px rgba(13,27,62,.18));
}
.ch-hero-img {
object-fit: cover !important;
object-position: 45% 15% !important; /* fokus area wajah + badan atas siswa */
width: 90% !important;
height: 480px !important;
max-height: 500px !important;
border-radius: 26px !important;
}
/* --- Compat: hero-eyebrow used in program/method pages === eyebrow style --- */
.hero-eyebrow {
display: inline-block;
font-size: .78rem; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--teal); margin-bottom: 10px;
font-family: var(--font-display);
}
/* --- Compat: old .daily-section is not used anymore but ensure no flash --- */
.daily-section { display: none !important; }
/* ═══════════════════════════════════════════════════════════
24. RESPONSIVE — NEW CLASSES
═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
.programs-daily-wrap { grid-template-columns: 1fr; }
.daily-right-compact { position: static; }
}
@media (max-width: 1024px) {
.challenge-hero-inner { grid-template-columns: 1fr; }
.challenge-hero-visual { min-height: 440px; margin-top: 20px; }
.ch-bottom-inner-grad { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
.after-ch-grid {
grid-template-columns: 1fr;
justify-items: center;
}
.ac-arrow { padding: 2px 0; transform: rotate(90deg); }
.programs-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
.programs-grid { grid-template-columns: 1fr !important; }
.cta-inner { flex-direction: column; text-align: center; }
.cta-left { text-align: center; }
.choose-divider { gap: 8px; }
.choose-line { max-width: 60px; }
.choose-text { font-size: .75rem; letter-spacing: .14em; }
.ch-float { display: none; }
.challenge-hero-visual { min-height: 380px; }
.ch-hero-img { width: 96%; }
.ch-bottom-inner-grad { padding: 28px 20px; border-radius: 22px; }
.ch-bottom-left h3 { font-size: 1.3rem; }
.ch-card-body { padding: 0 22px 22px; }
.ch-card-top { padding: 36px 20px 48px; }
.program-card-body { padding: 0 22px; }
}
/* ═══════════════════════════════════════════════════════════
25. THEME v4 — layout polish (cream + copper)
═══════════════════════════════════════════════════════════ */
.form-group input:focus,
.form-group select:focus { box-shadow: 0 0 0 3px rgba(14,165,165,.14); }
.hero-visual::before {
background-color: var(--teal);
}
.hero-pillars {
margin-top: 8px;
border-radius: 18px;
background: var(--white);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow);
}
.pillar-item { padding: 22px 20px; gap: 14px; }
.method-strip { background: var(--white); }
.method-title-underline {
background: linear-gradient(90deg, var(--teal), var(--blue));
}
.programs-section { background: var(--gray-50); }
.section-header-left { margin-bottom: 28px; }
.programs-daily-wrap {
display: grid;
grid-template-columns: 1fr !important;
gap: 28px;
align-items: stretch;
}
.programs-daily-wrap .programs-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 22px;
}
.daily-right-compact { position: static !important; }
.dc-card-banner {
display: grid;
grid-template-columns: minmax(220px, .9fr) minmax(0, 1.2fr);
gap: 28px;
align-items: center;
background: var(--white);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow);
}
.dc-banner-play { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.dc-card-banner .dc-options { margin-bottom: 0; }
.dc-card-banner .btn { align-self: flex-start; }
.page-hero {
background: linear-gradient(135deg, #faf3ec 0%, #f1e6d8 48%, #e8eef5 100%);
}
.challenge-hero {
background: linear-gradient(135deg, #faf3ec 0%, #f6f1ea 42%, #fffdf9 100%) !important;
}
.cta-banner {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
}
.cta-banner::before,
.cta-banner::after { opacity: .18; }
.start-hero-green { background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 50%, #f0fdfa 100%); }
.start-hero-blue { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #f0f9ff 100%); }
.start-hero-purple{ background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 50%, #faf5ff 100%); }
.ch-bottom-inner,
.ch-bottom-inner-grad {
background: linear-gradient(135deg, #faf3ec 0%, #f1e6d8 55%, #f1eaf3 100%);
}
.container { max-width: 1180px; }
.ls-item.active { box-shadow: 0 0 0 4px rgba(14,165,165,.12); }
.pillar-icon-box-teal { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); box-shadow: 0 4px 10px rgba(14,165,165,.28); }
.pillar-icon-box-navy { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); box-shadow: 0 4px 10px rgba(13,27,62,.25); }
.pillar-icon-box-violet { background: linear-gradient(135deg, var(--violet), #6d28d9); box-shadow: 0 4px 10px rgba(124,58,237,.28); }
.pillar-icon-box-amber { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff; box-shadow: 0 4px 10px rgba(37,99,235,.3); }
.choose-line::after { background: var(--teal); box-shadow: 0 0 0 4px var(--teal-light); }
@media (max-width: 1024px) {
.programs-daily-wrap .programs-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.dc-card-banner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.programs-daily-wrap .programs-grid { grid-template-columns: 1fr !important; }
.nav-cta { display: inline-flex; padding: 10px 16px; font-size: .72rem; }
.btn-admin-login { display: none; }
.nav-right { margin-left: auto; }
}
/* ============================================================
CHALLENGE & PROGRAM PAGES — Enhanced Styling
============================================================ */
/* Challenge Page Hero - Improved */
.challenge-hero {
background: linear-gradient(160deg, #e6fafa 0%, #f0f9ff 40%, #ffffff 100%);
padding: calc(var(--navbar-h) + 32px) 0 0;
margin-bottom: 0;
position: relative;
overflow: hidden;
}
.challenge-hero h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
margin: 20px 0 24px;
color: var(--navy);
font-weight: 900;
}
.challenge-hero-text .eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
}
/* Challenge Cards - Enhanced */
.choose-section {
padding: 80px 0;
background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 50%);
}
.choose-divider {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 56px;
text-align: center;
justify-content: center;
}
.choose-line {
flex: 1;
height: 2px;
background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
opacity: .3;
}
.choose-text {
font-size: .85rem;
font-weight: 800;
letter-spacing: .12em;
color: var(--navy);
white-space: nowrap;
}
.challenge-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 48px;
}
.ch-card {
background: var(--white);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(13,27,62,.08);
transition: all .3s ease;
border: 1px solid var(--gray-100);
}
.ch-card:hover {
transform: translateY(-12px);
box-shadow: 0 16px 40px rgba(13,27,62,.15);
}
.ch-card-top {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.bg-green { background: linear-gradient(135deg, #d1fae5, #ecfdf5); }
.bg-blue { background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.bg-purple { background: linear-gradient(135deg, #ede9fe, #f5f3ff); }
.ch-card-body {
padding: 28px 24px;
display: flex;
flex-direction: column;
}
.ch-type {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray-400);
margin-bottom: 8px;
}
.ch-card h3 {
font-size: 1.1rem;
color: var(--navy);
margin-bottom: 12px;
font-weight: 800;
}
.ch-card > .ch-card-body > p:not(.ch-type) {
font-size: .9rem;
color: var(--gray-600);
margin-bottom: 14px;
}
.ch-list {
list-style: none;
margin-bottom: 14px;
}
.ch-list li {
font-size: .85rem;
color: var(--gray-700);
margin-bottom: 6px;
padding-left: 18px;
position: relative;
}
.ch-list li::before {
content: '✓';
position: absolute;
left: 0;
font-weight: 700;
line-height: 1;
}
.ch-note {
font-size: .82rem;
border-radius: 12px;
padding: 12px;
margin-bottom: 16px;
font-weight: 500;
display: flex;
gap: 10px;
align-items: flex-start;
}
.ch-note svg { flex-shrink: 0; margin-top: 2px; }
.note-green {
background: var(--emerald-light);
color: #065f46;
}
.note-blue {
background: var(--blue-light);
color: #1e40af;
}
.note-purple {
background: var(--violet-light);
color: #5b21b6;
}
.ch-card .btn {
margin-top: auto;
width: 100%;
font-size: .82rem;
}
/* After Challenge Section - Enhanced */
.after-ch {
padding: 80px 0;
background: var(--white);
}
.after-ch-header {
text-align: center;
margin-bottom: 48px;
}
.after-ch-header .eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 10px;
}
.after-ch-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
align-items: center;
}
.ac-item {
text-align: center;
}
.ac-icon-wrap {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--teal-light);
border: 2px solid rgba(14,165,165,.3);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.ac-icon {
font-size: 1.8rem;
color: var(--teal);
}
.ac-item h4 {
margin-bottom: 8px;
color: var(--navy);
}
.ac-item p {
font-size: .82rem;
max-width: 160px;
}
.ac-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
font-size: 1.6rem;
font-weight: 700;
}
/* Program Page - Improved */
.program-tabs-wrap {
background: var(--white);
border-bottom: 1px solid var(--gray-100);
position: sticky;
top: var(--navbar-h);
z-index: 100;
box-shadow: 0 2px 8px rgba(13,27,62,.05);
}
.program-tabs {
display: flex;
gap: 0;
align-items: center;
}
.program-tab {
padding: 16px 28px;
font-size: .9rem;
font-weight: 700;
color: var(--gray-500);
border-bottom: 3px solid transparent;
text-transform: none;
letter-spacing: -.01em;
transition: all .25s ease;
cursor: pointer;
}
.program-tab:hover {
color: var(--teal);
border-bottom-color: var(--teal-light);
}
.program-tab.active {
color: var(--teal);
border-bottom-color: var(--teal);
}
/* Program Detail Section */
.program-detail {
padding: 80px 0;
background: var(--white);
}
.program-detail.program-alt {
background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 50%);
}
.program-detail-header {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: start;
margin-bottom: 56px;
padding-bottom: 56px;
border-bottom: 1px solid var(--gray-100);
}
.pdh-text h2 {
font-size: 2rem;
color: var(--navy);
margin: 12px 0 14px;
font-weight: 900;
}
.program-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.badge-green {
background: var(--emerald-light);
color: #065f46;
}
.badge-blue {
background: var(--blue-light);
color: #1e40af;
}
.badge-purple {
background: var(--violet-light);
color: #5b21b6;
}
.program-tagline {
font-size: 1rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 14px;
font-style: italic;
}
.pdh-text p {
font-size: .95rem;
color: var(--gray-600);
margin-bottom: 14px;
line-height: 1.7;
}
.pdh-text .btn {
margin-top: 20px;
}
.pdh-visual {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px;
border-radius: 20px;
text-align: center;
}
.pdh-green { background: linear-gradient(135deg, #d1fae5, #ecfdf5); }
.pdh-blue { background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.pdh-purple { background: linear-gradient(135deg, #ede9fe, #f5f3ff); }
.pdh-icon-big {
font-size: 3.2rem;
}
/* Features Grid */
.section-sub {
font-size: 1.1rem;
font-weight: 800;
color: var(--navy);
margin: 32px 0 28px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.feature-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 20px;
text-align: center;
transition: all .3s ease;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 20px rgba(13,27,62,.12);
border-color: var(--teal);
}
.fi {
font-size: 2rem;
margin-bottom: 12px;
}
.feature-card h4 {
font-size: .9rem;
color: var(--navy);
margin-bottom: 8px;
font-weight: 700;
}
.feature-card p {
font-size: .8rem;
color: var(--gray-600);
line-height: 1.5;
}
/* Program Info Row */
.program-info-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
padding: 32px 0;
border-bottom: 1px solid var(--gray-100);
}
.info-block h3 {
font-size: 1rem;
color: var(--navy);
margin-bottom: 16px;
font-weight: 800;
}
.info-block p {
font-size: .9rem;
color: var(--gray-600);
margin-bottom: 12px;
}
.jenjang-badges {
display: flex;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.jenjang-badge {
background: var(--teal);
color: var(--white);
padding: 8px 20px;
border-radius: 999px;
font-weight: 700;
font-size: .875rem;
}
.lo-item {
display: flex;
gap: 14px;
margin-bottom: 14px;
}
.lo-icon {
font-size: 1.6rem;
flex-shrink: 0;
}
.lo-item h4 {
font-size: .9rem;
color: var(--navy);
margin-bottom: 4px;
font-weight: 700;
}
.lo-item p {
font-size: .82rem;
color: var(--gray-600);
}
.target-item {
margin-bottom: 14px;
}
.target-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: .7rem;
font-weight: 700;
margin-bottom: 6px;
}
/* Approach & Method Cards */
.approach-card {
background: rgba(255,255,255,.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.5);
border-radius: 14px;
padding: 16px;
}
.approach-label {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--navy);
margin-bottom: 10px;
display: block;
}
.approach-flow {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
font-size: .8rem;
font-weight: 600;
}
.approach-flow span {
background: var(--white);
color: var(--navy);
padding: 6px 12px;
border-radius: 20px;
font-size: .75rem;
font-weight: 700;
}
.fa {
color: var(--teal);
margin: 0 4px;
}
/* Steps & Flow Styling */
.av-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.av-step {
display: flex;
gap: 14px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 16px;
padding: 18px;
}
.av-num {
font-size: 1.6rem;
font-weight: 900;
color: var(--teal);
line-height: 1;
flex-shrink: 0;
}
.av-step h4 {
margin-bottom: 4px;
font-size: .9rem;
color: var(--navy);
}
.av-step p {
font-size: .82rem;
color: var(--gray-600);
}
/* Material Grid */
.materi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.materi-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 16px;
padding: 20px;
text-align: center;
}
.materi-card-wide {
grid-column: span 2;
}
.materi-num {
font-size: 1.8rem;
font-weight: 900;
color: var(--teal);
line-height: 1;
margin-bottom: 12px;
}
.materi-card h4 {
font-size: .95rem;
color: var(--navy);
margin-bottom: 8px;
font-weight: 700;
}
.materi-card p {
font-size: .82rem;
color: var(--gray-600);
}
/* Why Early Section */
.why-early-section {
padding: 40px;
background: linear-gradient(135deg, #ede9fe, #f5f3ff);
border-radius: 20px;
margin-bottom: 48px;
}
.why-early-section h3 {
font-size: 1.3rem;
color: var(--navy);
margin-bottom: 8px;
font-weight: 800;
}
.wse-sub {
color: var(--gray-600);
margin-bottom: 24px;
font-weight: 500;
}
.wse-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.wse-item {
text-align: center;
}
.wse-icon {
font-size: 2rem;
margin-bottom: 10px;
}
.wse-item h4 {
font-size: .9rem;
color: var(--navy);
margin-bottom: 6px;
font-weight: 700;
}
.wse-item p {
font-size: .8rem;
color: var(--gray-600);
}
/* Tutor Box */
.tutor-box {
background: linear-gradient(135deg, var(--navy), var(--navy-mid));
color: var(--white);
border-radius: 20px;
padding: 32px;
margin-bottom: 48px;
}
.tutor-box h3 {
font-size: 1.1rem;
color: var(--white);
margin-bottom: 12px;
font-weight: 800;
}
.tutor-box p:not(.tutor-points) {
color: rgba(255,255,255,.9);
margin-bottom: 12px;
}
.tutor-points {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 12px;
}
.tutor-points span {
font-size: .85rem;
color: var(--white);
font-weight: 600;
}
/* Philosophy Box */
.philosophy-box {
border-radius: 20px;
padding: 40px;
text-align: center;
margin-bottom: 48px;
}
.bg-green { background: linear-gradient(135deg, #d1fae5, #ecfdf5); }
.bg-blue { background: linear-gradient(135deg, #dbeafe, #eff6ff); }
.bg-purple { background: linear-gradient(135deg, #ede9fe, #f5f3ff); }
.phi-quote {
font-size: 1.2rem;
font-weight: 700;
color: var(--navy);
margin-bottom: 12px;
font-style: italic;
}
.phi-sub {
font-size: .9rem;
color: var(--gray-600);
}
/* Responsive Design */
@media (max-width: 1200px) {
.challenge-cards { grid-template-columns: repeat(2, 1fr); }
.after-ch-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.program-detail-header { grid-template-columns: 1fr; gap: 40px; }
.features-grid { grid-template-columns: repeat(3, 1fr); }
.av-steps { grid-template-columns: repeat(2, 1fr); }
.materi-grid { grid-template-columns: repeat(2, 1fr); }
.materi-card-wide { grid-column: span 2; }
.wse-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.after-ch-grid { grid-template-columns: repeat(2, 1fr); }
.program-info-row { grid-template-columns: 1fr; gap: 40px; }
.av-steps { grid-template-columns: 1fr; }
.materi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.challenge-cards { grid-template-columns: 1fr; }
.after-ch-grid { grid-template-columns: 1fr; gap: 24px; }
.challenge-hero h1 { font-size: 1.8rem; }
.features-grid { grid-template-columns: 1fr; gap: 14px; }
.program-tabs { gap: 0; }
.program-tab { padding: 14px 16px; font-size: .8rem; }
.pdh-text h2 { font-size: 1.5rem; }
.program-detail-header { padding-bottom: 32px; }
.wse-grid { grid-template-columns: 1fr; gap: 14px; }
.tutor-box { padding: 24px; }
.philosophy-box { padding: 24px; }
}
/* ============================================================
PROGRAMS PAGE — Modern Design v2
============================================================ */
/* Programs Hero */
.programs-hero {
background: linear-gradient(160deg, #e6fafa 100%, #f0f9ff 40%, #ffffff 30%);
padding: calc(var(--navbar-h) + 56px) 0 64px;
text-align: center;
}
.hero-content {
max-width: 600px;
margin: 0 auto;
}
.programs-hero h1 {
font-size: clamp(2.2rem, 6vw, 3.6rem);
margin: 16px 0 20px;
color: var(--navy);
font-weight: 900;
}
.programs-hero p {
font-size: 1.05rem;
color: var(--gray-600);
}
/* Program Selector Cards */
.programs-selector {
padding: 80px 0;
background: var(--white);
}
.selector-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.selector-card {
background: var(--white);
border: 2px solid var(--gray-200);
border-radius: 20px;
padding: 32px 28px;
text-align: center;
transition: all .3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
.selector-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
opacity: 0;
transition: opacity .3s ease;
}
.selector-card:hover {
transform: translateY(-12px);
border-color: transparent;
box-shadow: 0 16px 40px rgba(13,27,62,.15);
}
.selector-card:hover::before {
opacity: 1;
}
.academic-selector::before { background: linear-gradient(90deg, var(--emerald), var(--teal)); }
.tka-selector::before { background: linear-gradient(90deg, var(--blue), var(--violet)); }
.labschool-selector::before { background: linear-gradient(90deg, var(--violet), var(--teal)); }
.selector-icon {
font-size: 3.2rem;
margin-bottom: 16px;
}
.selector-card h3 {
font-size: 1.15rem;
color: var(--navy);
margin-bottom: 8px;
font-weight: 800;
}
.selector-card p {
font-size: .9rem;
color: var(--gray-600);
margin-bottom: 14px;
}
.selector-arrow {
font-size: 1.4rem;
color: var(--teal);
font-weight: 700;
opacity: 0;
transform: translateX(-8px);
transition: all .3s ease;
}
.selector-card:hover .selector-arrow {
opacity: 1;
transform: translateX(0);
}
/* Program Sections */
.program-section {
padding: 80px 0;
background: var(--white);
}
.program-section:nth-child(even) {
background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 50%);
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 56px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.section-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.badge-emerald {
background: var(--emerald-light);
color: #065f46;
}
.badge-blue {
background: var(--blue-light);
color: #1e40af;
}
.badge-purple {
background: var(--violet-light);
color: #5b21b6;
}
.section-header h2 {
font-size: 2.2rem;
color: var(--navy);
margin: 12px 0 12px;
font-weight: 900;
}
.section-tagline {
font-size: 1.05rem;
font-weight: 600;
color: var(--teal);
margin-bottom: 0;
font-style: italic;
}
/* Program Content Layout */
.program-content {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: center;
margin-bottom: 56px;
}
.content-left {
display: flex;
flex-direction: column;
gap: 24px;
}
.intro-text p {
font-size: .95rem;
color: var(--gray-600);
line-height: 1.8;
margin-bottom: 0;
}
/* Approach Box */
.approach-box {
background: linear-gradient(135deg, #f0f4f8, #ffffff);
border: 1px solid var(--gray-200);
border-radius: 16px;
padding: 24px;
overflow: hidden;
}
.approach-box h4 {
font-size: .9rem;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 14px;
}
.approach-steps {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.step-pill {
background: var(--white);
color: var(--navy);
padding: 8px 16px;
border-radius: 20px;
font-size: .8rem;
font-weight: 700;
border: 1px solid var(--gray-200);
transition: all .3s ease;
}
.approach-steps:hover .step-pill {
border-color: var(--teal);
}
.step-arrow {
color: var(--teal);
font-weight: 700;
opacity: .6;
margin: 0 4px;
}
/* Approach Steps Vertical */
.approach-steps-vertical {
display: flex;
flex-direction: column;
gap: 16px;
}
.vstep {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: var(--white);
border-radius: 12px;
border-left: 3px solid var(--blue);
}
.vstep-num {
font-size: 1.4rem;
font-weight: 900;
color: var(--blue);
flex-shrink: 0;
}
.vstep h5 {
font-size: .95rem;
color: var(--navy);
margin: 0 0 4px 0;
font-weight: 700;
}
.vstep p {
font-size: .82rem;
color: var(--gray-600);
margin: 0;
}
/* Visual Card */
.visual-card {
background: var(--white);
border-radius: 20px;
padding: 32px;
box-shadow: 0 8px 24px rgba(13,27,62,.1);
border: 1px solid var(--gray-100);
}
.card-icon-large {
font-size: 3.2rem;
margin-bottom: 16px;
}
.visual-card h3 {
font-size: 1.2rem;
color: var(--navy);
margin: 0 0 20px 0;
font-weight: 800;
}
/* Features List */
.features-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.feature-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.feature-icon {
font-size: 1.6rem;
flex-shrink: 0;
}
.feature-text h5 {
font-size: .9rem;
color: var(--navy);
margin: 0 0 3px 0;
font-weight: 700;
}
.feature-text p {
font-size: .82rem;
color: var(--gray-600);
margin: 0;
}
/* Target Boxes */
.target-boxes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.target-box {
background: var(--gray-50);
border-radius: 14px;
padding: 16px;
text-align: center;
transition: all .3s ease;
}
.target-box:hover {
background: var(--teal-light);
transform: translateY(-4px);
}
.target-icon {
font-size: 2rem;
margin-bottom: 8px;
}
.target-box h5 {
font-size: .85rem;
color: var(--navy);
margin: 0 0 4px 0;
font-weight: 700;
}
.target-box p {
font-size: .75rem;
color: var(--gray-600);
margin: 0;
}
/* Materi Items */
.materi-items {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.materi-item {
background: var(--gray-50);
border-radius: 12px;
padding: 16px;
text-align: center;
transition: all .3s ease;
}
.materi-item:hover {
background: var(--violet-light);
transform: translateY(-4px);
}
.materi-item-icon {
font-size: 1.8rem;
margin-bottom: 6px;
}
.materi-item h5 {
font-size: .8rem;
color: var(--navy);
margin: 0 0 3px 0;
font-weight: 700;
}
.materi-item p {
font-size: .7rem;
color: var(--gray-600);
margin: 0;
}
/* CAT Info Box */
.cat-info {
background: linear-gradient(135deg, #ede9fe, #f5f3ff);
border: 1px solid var(--violet-border);
border-radius: 16px;
padding: 24px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.cat-icon {
font-size: 2.4rem;
flex-shrink: 0;
}
.cat-info h4 {
font-size: .95rem;
color: var(--navy);
margin: 0 0 6px 0;
font-weight: 800;
}
.cat-info p {
font-size: .85rem;
color: var(--gray-600);
margin: 0;
}
/* Program Details Grid */
.program-details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 32px 0;
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
margin-bottom: 48px;
}
.detail-card {
background: var(--white);
border-radius: 14px;
padding: 20px;
border: 1px solid var(--gray-100);
}
.detail-card h4 {
font-size: .95rem;
color: var(--navy);
margin: 0 0 12px 0;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
}
.detail-badges {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.detail-badge {
background: var(--teal);
color: var(--white);
padding: 6px 14px;
border-radius: 20px;
font-size: .75rem;
font-weight: 700;
}
.learning-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.option {
font-size: .85rem;
color: var(--gray-700);
padding: 8px 0;
}
.detail-card p {
font-size: .85rem;
color: var(--gray-600);
margin: 0;
}
.module-flow {
font-size: .85rem;
color: var(--gray-700);
line-height: 1.6;
}
.tutor-list {
list-style: none;
margin: 0;
padding: 0;
}
.tutor-list li {
font-size: .85rem;
color: var(--gray-700);
margin-bottom: 6px;
font-weight: 500;
}
/* Why Early Section */
.why-early-box {
background: linear-gradient(135deg, #ede9fe, #f5f3ff);
border-radius: 20px;
padding: 40px;
margin-bottom: 48px;
text-align: center;
}
.why-early-box h3 {
font-size: 1.4rem;
color: var(--navy);
margin: 0 0 8px 0;
font-weight: 900;
}
.why-early-box > p {
font-size: .95rem;
color: var(--gray-600);
margin-bottom: 24px;
}
.why-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.why-item {
background: var(--white);
border-radius: 12px;
padding: 20px 16px;
transition: all .3s ease;
}
.why-item:hover {
transform: translateY(-6px);
box-shadow: 0 8px 16px rgba(13,27,62,.1);
}
.why-icon {
font-size: 2.2rem;
margin-bottom: 10px;
}
.why-item h5 {
font-size: .85rem;
color: var(--navy);
margin: 0 0 6px 0;
font-weight: 700;
}
.why-item p {
font-size: .75rem;
color: var(--gray-600);
margin: 0;
}
/* Responsive */
@media (max-width: 1200px) {
.program-content { grid-template-columns: 1fr; gap: 40px; }
.selector-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(3, 1fr); }
.target-boxes { grid-template-columns: repeat(2, 1fr); }
.materi-items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.program-details-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.approach-steps { flex-direction: column; }
}
@media (max-width: 768px) {
.programs-hero { padding: calc(var(--navbar-h) + 32px) 0 48px; }
.programs-hero h1 { font-size: 2rem; }
.selector-grid { grid-template-columns: 1fr; gap: 16px; }
.program-section { padding: 60px 0; }
.section-header h2 { font-size: 1.6rem; }
.approach-steps { justify-content: flex-start; }
.why-grid { grid-template-columns: 1fr; gap: 12px; }
.target-boxes { grid-template-columns: 1fr; }
.materi-items { grid-template-columns: repeat(2, 1fr); }
.why-early-box { padding: 28px 20px; }
.detail-badge { font-size: .7rem; }
}
/* ============================================================
CHALLENGE PAGE REDESIGN - Modern Theme Update
============================================================ */
/* ── Challenge Hero Redesign ──────────────────────────────── */
.challenge-hero {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #1a3a6e 100%);
padding: 120px 0 80px;
margin-top: var(--navbar-h);
color: var(--white);
position: relative;
overflow: hidden;
}
.challenge-hero::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(14, 165, 165, 0.15);
filter: blur(40px);
}
.challenge-hero::after {
content: '';
position: absolute;
bottom: -50px;
left: -50px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(37, 99, 235, 0.1);
filter: blur(30px);
}
.challenge-hero .page-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.challenge-hero-text {
max-width: 520px;
}
.challenge-hero-text .eyebrow {
color: var(--teal-light);
font-size: 0.8rem;
letter-spacing: 0.2em;
margin-bottom: 16px;
display: inline-block;
padding: 4px 12px;
background: rgba(14, 165, 165, 0.15);
border-radius: 20px;
}
.challenge-hero-text h1 {
color: var(--white);
font-size: clamp(2.4rem, 6vw, 4rem);
line-height: 1.1;
margin: 0 0 20px;
}
.challenge-hero-text h1 .ch-hl {
color: var(--teal-light);
background: linear-gradient(90deg, var(--teal-light), #80e8e8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.challenge-hero-text p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 32px;
max-width: 480px;
}
.challenge-hero .hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.challenge-hero .btn-primary {
background: var(--teal);
border-color: var(--teal);
padding: 16px 32px;
font-size: 0.9rem;
}
.challenge-hero .btn-primary:hover {
background: var(--teal-dark);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(14, 165, 165, 0.4);
}
.challenge-hero .btn-outline-teal {
border-color: rgba(255, 255, 255, 0.3);
color: var(--white);
padding: 16px 32px;
font-size: 0.9rem;
}
.challenge-hero .btn-outline-teal:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--teal);
color: var(--teal-light);
}
.challenge-hero-visual {
position: relative;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
}
.hero-visual-shape {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 30px;
}
.hero-image-wrapper {
position: relative;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.ch-hero-img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
}
.hero-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
}
.hero-float {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(14, 165, 165, 0.2);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
animation: floatAnim 5s ease-in-out infinite;
}
.hero-float-1 {
top: 20px;
left: 20px;
background: rgba(14, 165, 165, 0.25);
}
.hero-float-2 {
top: 50%;
right: 20px;
animation-delay: 1.5s;
background: rgba(37, 99, 235, 0.25);
}
.hero-float-3 {
bottom: 20px;
left: 40%;
animation-delay: 3s;
background: rgba(124, 58, 237, 0.25);
}
@keyframes floatAnim {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(5deg);
}
}
/* ── Challenge Cards Redesign ──────────────────────────────── */
.choose-section {
padding: 100px 0;
background: var(--gray-50);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header .eyebrow {
font-size: 0.8rem;
letter-spacing: 0.15em;
color: var(--teal);
margin-bottom: 12px;
display: inline-block;
}
.section-header h2 {
font-size: clamp(1.8rem, 4vw, 2.8rem);
margin-bottom: 16px;
}
.section-intro {
max-width: 600px;
margin: 0 auto;
font-size: 1.05rem;
color: var(--gray-500);
line-height: 1.6;
}
.challenge-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.ch-card {
background: var(--white);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(13, 27, 62, 0.08);
border: 1px solid var(--gray-100);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.ch-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(13, 27, 62, 0.15);
}
.ch-card.ch-green:hover {
border-color: var(--emerald-border);
box-shadow: 0 20px 60px rgba(16, 185, 129, 0.2);
}
.ch-card.ch-blue:hover {
border-color: var(--blue-border);
box-shadow: 0 20px 60px rgba(37, 99, 235, 0.2);
}
.ch-card.ch-purple:hover {
border-color: var(--violet-border);
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.2);
}
.ch-card-top {
padding: 40px 30px 30px;
text-align: center;
border-bottom: 1px solid var(--gray-100);
background: var(--white);
position: relative;
overflow: hidden;
}
.ch-card.ch-green .ch-card-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--emerald), #34d399);
}
.ch-card.ch-blue .ch-card-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blue), #60a5fa);
}
.ch-card.ch-purple .ch-card-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--violet), #a78bfa);
}
.ch-icon {
margin-bottom: 20px;
color: var(--navy);
}
.ch-card.ch-green .ch-icon {
color: var(--emerald);
}
.ch-card.ch-blue .ch-icon {
color: var(--blue);
}
.ch-card.ch-purple .ch-icon {
color: var(--violet);
}
.ch-card-top h3 {
font-size: 1.3rem;
margin-bottom: 8px;
color: var(--navy);
}
.ch-subtitle {
font-size: 0.85rem;
color: var(--gray-400);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.ch-card-body {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ch-card-body > p {
font-size: 0.9rem;
color: var(--gray-600);
margin-bottom: 20px;
line-height: 1.6;
}
.ch-list {
margin-bottom: 20px;
}
.ch-list li {
font-size: 0.85rem;
color: var(--gray-700);
margin-bottom: 8px;
padding-left: 28px;
position: relative;
line-height: 1.5;
}
.ch-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--white);
}
.ch-card.ch-green .ch-list li::before {
background: var(--emerald);
}
.ch-card.ch-blue .ch-list li::before {
background: var(--blue);
}
.ch-card.ch-purple .ch-list li::before {
background: var(--violet);
}
.ch-features {
margin-bottom: 25px;
padding: 15px 0;
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.ch-feature {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 0.8rem;
color: var(--gray-600);
}
.ch-feature:last-child {
margin-bottom: 0;
}
.ch-feature svg {
flex-shrink: 0;
color: var(--teal);
}
.ch-card.ch-green .ch-feature svg {
color: var(--emerald);
}
.ch-card.ch-blue .ch-feature svg {
color: var(--blue);
}
.ch-card.ch-purple .ch-feature svg {
color: var(--violet);
}
.ch-card .btn {
margin-top: auto;
padding: 14px 24px;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.ch-card .btn svg {
transition: transform 0.3s ease;
}
.ch-card .btn:hover svg {
transform: translateX(5px);
}
/* ── Benefits Section ─────────────────────────────────────── */
.benefits-section {
padding: 100px 0;
background: var(--white);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 40px;
}
.benefit-item {
background: var(--gray-50);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid var(--gray-100);
}
.benefit-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(13, 27, 62, 0.1);
border-color: var(--teal-light);
}
.benefit-icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--teal-light);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
color: var(--teal);
}
.benefit-item:nth-child(2) .benefit-icon {
background: var(--blue-light);
color: var(--blue);
}
.benefit-item:nth-child(3) .benefit-icon {
background: var(--emerald-light);
color: var(--emerald);
}
.benefit-item:nth-child(4) .benefit-icon {
background: var(--violet-light);
color: var(--violet);
}
.benefit-item h3 {
font-size: 1.1rem;
margin-bottom: 12px;
color: var(--navy);
}
.benefit-item p {
font-size: 0.9rem;
color: var(--gray-500);
line-height: 1.5;
margin-bottom: 0;
}
.benefit-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 4rem;
font-weight: 900;
color: rgba(13, 27, 62, 0.05);
line-height: 1;
font-family: var(--font-display);
}
/* ── CTA Section ──────────────────────────────────────────── */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.cta-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.cta-content {
color: var(--white);
}
.cta-content h2 {
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.1;
margin-bottom: 24px;
color: var(--white);
}
.cta-content h2 .highlight {
color: var(--teal-light);
background: linear-gradient(90deg, var(--teal-light), #80e8e8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.cta-content .btn {
padding: 18px 36px;
font-size: 0.95rem;
font-weight: 600;
}
.cta-content .btn-primary {
background: var(--teal);
border-color: var(--teal);
}
.cta-content .btn-primary:hover {
background: var(--teal-dark);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(14, 165, 165, 0.35);
}
.cta-content .btn-outline-white {
border-color: rgba(255, 255, 255, 0.3);
color: var(--white);
}
.cta-content .btn-outline-white:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--teal);
color: var(--teal-light);
}
.cta-visual {
position: relative;
height: 300px;
}
.cta-visual-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cta-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.cta-float {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(14, 165, 165, 0.2);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
animation: ctaFloat 6s ease-in-out infinite;
}
.cta-float-1 {
top: 20%;
left: 10%;
background: rgba(14, 165, 165, 0.25);
}
.cta-float-2 {
top: 60%;
right: 20%;
animation-delay: 2s;
background: rgba(37, 99, 235, 0.25);
}
.cta-float-3 {
bottom: 20%;
left: 60%;
animation-delay: 4s;
background: rgba(124, 58, 237, 0.25);
}
@keyframes ctaFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(10px, -15px) rotate(5deg);
}
50% {
transform: translate(0, -20px) rotate(0deg);
}
75% {
transform: translate(-10px, -15px) rotate(-5deg);
}
}
/* ── Responsive Design ────────────────────────────────────── */
@media (max-width: 1024px) {
.challenge-hero .page-hero-inner {
gap: 40px;
}
.challenge-cards {
grid-template-columns: repeat(2, 1fr);
}
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-container {
gap: 40px;
}
}
@media (max-width: 768px) {
.challenge-hero {
padding: 80px 0 60px;
}
.challenge-hero .page-hero-inner {
grid-template-columns: 1fr;
gap: 50px;
}
.challenge-hero-text {
text-align: center;
}
.challenge-hero-text .hero-actions {
justify-content: center;
}
.challenge-cards {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.benefits-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.cta-container {
grid-template-columns: 1fr;
text-align: center;
}
.cta-visual {
height: 200px;
}
.cta-buttons {
justify-content: center;
}
}
@media (max-width: 480px) {
.challenge-hero .hero-actions {
flex-direction: column;
align-items: stretch;
}
.cta-content .btn {
width: 100%;
justify-content: center;
}
.challenge-hero-text h1 {
font-size: 2.2rem;
}
}
/* ============================================================
CHALLENGE START PAGE REDESIGN - Modern Theme
============================================================ */
/* ── Challenge Start Hero ──────────────────────────────────── */
.challenge-start-hero {
background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
padding: 120px 0 80px;
margin-top: var(--navbar-h);
color: var(--white);
position: relative;
overflow: hidden;
}
.challenge-start-hero::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(14, 165, 165, 0.15);
filter: blur(40px);
}
.challenge-start-hero::after {
content: '';
position: absolute;
bottom: -50px;
left: -50px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(124, 58, 237, 0.1);
filter: blur(30px);
}
.start-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.start-hero-content {
max-width: 600px;
}
.start-hero-content .eyebrow {
color: var(--teal-light);
font-size: 0.8rem;
letter-spacing: 0.2em;
margin-bottom: 16px;
display: inline-block;
padding: 4px 16px;
background: rgba(14, 165, 165, 0.15);
border-radius: 20px;
text-transform: uppercase;
font-weight: 700;
}
.start-hero-content h1 {
color: var(--white);
font-size: clamp(2.4rem, 6vw, 3.8rem);
line-height: 1.1;
margin: 0 0 16px;
}
.start-tagline {
color: rgba(255, 255, 255, 0.8);
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: 32px;
max-width: 500px;
}
.start-hero-stats {
display: flex;
gap: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 0;
max-width: 400px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.stat-item {
flex: 1;
text-align: center;
padding: 20px 16px;
}
.stat-number {
display: block;
font-size: 2.4rem;
font-weight: 900;
color: var(--teal-light);
line-height: 1;
font-family: var(--font-display);
}
.stat-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 6px;
}
.stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
align-self: center;
}
.start-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.hero-visual-container {
position: relative;
width: 200px;
height: 200px;
}
.hero-icon-circle {
width: 160px;
height: 160px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(14, 165, 165, 0.2), rgba(37, 99, 235, 0.2));
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.icon-emoji {
font-size: 3.5rem;
}
.hero-floating-dots {
position: absolute;
inset: 0;
}
.dot {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(14, 165, 165, 0.6);
animation: dotFloat 4s ease-in-out infinite;
}
.dot-1 {
top: 20px;
left: 30px;
background: rgba(14, 165, 165, 0.6);
}
.dot-2 {
top: 60%;
right: 40px;
animation-delay: 1s;
background: rgba(37, 99, 235, 0.6);
}
.dot-3 {
bottom: 30px;
left: 50%;
animation-delay: 2s;
background: rgba(124, 58, 237, 0.6);
}
@keyframes dotFloat {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-15px) scale(1.1);
}
}
/* ── Challenge Details Section ─────────────────────────────── */
.challenge-details-section {
padding: 100px 0;
background: var(--gray-50);
}
.challenge-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.details-left {
display: flex;
flex-direction: column;
gap: 24px;
}
.detail-card {
background: var(--white);
border-radius: 20px;
padding: 28px;
box-shadow: 0 10px 30px rgba(13, 27, 62, 0.08);
border: 1px solid var(--gray-100);
}
.detail-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid var(--gray-100);
}
.detail-card-header h3 {
font-size: 1.1rem;
color: var(--navy);
margin: 0;
}
.detail-card-header svg {
color: var(--teal);
flex-shrink: 0;
}
.subject-table-container {
overflow-x: auto;
}
.subject-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.subject-table th {
text-align: left;
padding: 12px 16px;
background: var(--gray-50);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--gray-500);
border-bottom: 2px solid var(--gray-200);
font-weight: 700;
}
.subject-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-700);
}
.subject-table tfoot td {
font-weight: 700;
background: var(--gray-50);
color: var(--navy);
border-top: 2px solid var(--gray-200);
border-bottom: none;
}
.question-badge {
display: inline-block;
padding: 4px 12px;
background: var(--teal-light);
color: var(--teal-dark);
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
min-width: 80px;
text-align: center;
}
.difficulty-bars {
display: flex;
flex-direction: column;
gap: 16px;
}
.difficulty-row {
display: flex;
align-items: center;
gap: 16px;
}
.difficulty-label {
width: 100px;
font-size: 0.85rem;
font-weight: 600;
color: var(--gray-700);
flex-shrink: 0;
}
.difficulty-track {
flex: 1;
background: var(--gray-200);
border-radius: 20px;
height: 10px;
overflow: hidden;
}
.difficulty-fill {
height: 100%;
border-radius: 20px;
}
.fill-foundation {
background: linear-gradient(90deg, var(--emerald), #34d399);
}
.fill-reasoning {
background: linear-gradient(90deg, var(--blue), #60a5fa);
}
.fill-challenge {
background: linear-gradient(90deg, var(--violet), #a78bfa);
}
.difficulty-percent {
width: 50px;
font-size: 0.85rem;
font-weight: 700;
color: var(--navy);
text-align: right;
flex-shrink: 0;
}
.benefits-card {
background: linear-gradient(135deg, var(--teal-light), var(--blue-light));
border-radius: 20px;
padding: 28px;
border: 1px solid rgba(14, 165, 165, 0.2);
}
.benefits-card h4 {
font-size: 1.1rem;
color: var(--navy);
margin-bottom: 20px;
font-weight: 700;
}
.benefits-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.benefits-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
color: var(--gray-700);
padding: 6px 0;
}
.benefits-list li svg {
color: var(--teal);
flex-shrink: 0;
}
/* ── Modern Form Card ──────────────────────────────────────── */
.form-card-modern {
background: var(--white);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(13, 27, 62, 0.15);
border: 1px solid var(--gray-100);
overflow: hidden;
position: sticky;
top: 100px;
}
.form-card-header {
background: linear-gradient(135deg, var(--navy), var(--navy-mid));
padding: 40px 32px;
display: flex;
align-items: center;
gap: 20px;
color: var(--white);
}
.header-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-emoji-large {
font-size: 2.2rem;
}
.header-content h2 {
color: var(--white);
font-size: 1.8rem;
margin: 0 0 6px;
}
.header-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
margin: 0;
}
.form-card-body {
padding: 40px 32px;
}
.alert-modern {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border-radius: 12px;
margin-bottom: 24px;
font-size: 0.9rem;
}
.alert-error {
background: var(--red-light);
border: 1px solid #fca5a5;
color: #991b1b;
}
.alert-error svg {
color: #991b1b;
flex-shrink: 0;
}
.form-group-modern {
margin-bottom: 24px;
}
.form-group-modern label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 8px;
}
.form-group-modern .required {
color: var(--red);
}
.input-container,
.select-container {
position: relative;
}
.input-container svg,
.select-container svg {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
pointer-events: none;
}
.input-container input,
.select-container select {
width: 100%;
padding: 14px 16px 14px 44px;
border: 2px solid var(--gray-200);
border-radius: 12px;
font-size: 0.95rem;
font-family: var(--font);
transition: all 0.3s ease;
outline: none;
background: var(--white);
color: var(--gray-900);
}
.select-container select {
appearance: none;
cursor: pointer;
padding-right: 40px;
}
.select-container svg:last-child {
left: auto;
right: 16px;
}
.input-container input:focus,
.select-container select:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(14, 165, 165, 0.1);
background: var(--white);
}
.input-container input::placeholder,
.select-container select:invalid {
color: var(--gray-400);
}
.field-error {
display: block;
font-size: 0.75rem;
color: var(--red);
margin-top: 6px;
min-height: 18px;
}
.agreement-check {
margin-bottom: 32px;
}
.checkbox-container {
display: flex;
align-items: flex-start;
gap: 12px;
}
.checkbox-container input[type="checkbox"] {
display: none;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
.checkbox-custom {
width: 22px;
height: 22px;
border: 2px solid var(--gray-300);
border-radius: 6px;
flex-shrink: 0;
position: relative;
transition: all 0.3s ease;
margin-top: 1px;
}
.checkbox-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 12px;
height: 12px;
background: var(--teal);
border-radius: 3px;
transition: transform 0.3s ease;
}
.checkbox-container input[type="checkbox"]:checked + .checkbox-label .checkbox-custom {
border-color: var(--teal);
background: rgba(14, 165, 165, 0.1);
}
.checkbox-container input[type="checkbox"]:checked + .checkbox-label .checkbox-custom::after {
transform: translate(-50%, -50%) scale(1);
}
.checkbox-text {
font-size: 0.9rem;
color: var(--gray-700);
line-height: 1.5;
flex: 1;
}
.btn-modern {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 32px;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
color: var(--white);
}
.btn-full {
width: 100%;
}
.btn-color-green {
background: linear-gradient(135deg, var(--emerald), #10b981);
}
.btn-color-blue {
background: linear-gradient(135deg, var(--blue), #2563eb);
}
.btn-color-purple {
background: linear-gradient(135deg, var(--violet), #7c3aed);
}
.btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.btn-modern.btn-color-green:hover {
box-shadow: 0 15px 35px rgba(16, 185, 129, 0.3);
}
.btn-modern.btn-color-blue:hover {
box-shadow: 0 15px 35px rgba(37, 99, 235, 0.3);
}
.btn-modern.btn-color-purple:hover {
box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
}
.form-footer-note {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--gray-50);
border-radius: 12px;
margin-top: 24px;
font-size: 0.85rem;
color: var(--gray-500);
}
.form-footer-note svg {
color: var(--teal);
flex-shrink: 0;
}
/* ── Responsive Design for Challenge Start ─────────────────── */
@media (max-width: 1024px) {
.start-hero-inner {
gap: 40px;
}
.challenge-details-grid {
gap: 40px;
}
.form-card-modern {
position: static;
}
}
@media (max-width: 768px) {
.challenge-start-hero {
padding: 80px 0 60px;
}
.start-hero-inner {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.start-hero-content {
max-width: 100%;
}
.start-hero-stats {
margin: 0 auto;
}
.challenge-details-grid {
grid-template-columns: 1fr;
}
.detail-card,
.benefits-card,
.form-card-modern {
margin-bottom: 24px;
}
}
@media (max-width: 480px) {
.start-hero-stats {
flex-direction: column;
gap: 0;
}
.stat-divider {
width: 100%;
height: 1px;
}
.stat-item {
padding: 16px;
}
.form-card-header {
padding: 30px 24px;
flex-direction: column;
text-align: center;
gap: 16px;
}
.form-card-body {
padding: 30px 24px;
}
.btn-modern {
padding: 16px 24px;
}
}
/* ============================================================
CHALLENGE PAGE FINAL REDESIGN - Modern Complete Theme
============================================================ */
/* ── Hero Section Redesign ─────────────────────────────────── */
.challenge-hero {
background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-mid) 50%, #162b5e 100%);
padding: 140px 0 100px;
margin-top: var(--navbar-h);
color: var(--white);
position: relative;
overflow: hidden;
}
.challenge-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(14, 165, 165, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.challenge-hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.hero-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
.hero-content {
max-width: 600px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
background: rgba(14, 165, 165, 0.15);
border: 1px solid rgba(14, 165, 165, 0.3);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
color: var(--teal-light);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 30px;
backdrop-filter: blur(10px);
}
.hero-badge svg {
color: var(--teal-light);
}
.hero-content h1 {
color: var(--white);
font-size: clamp(2.8rem, 7vw, 4.5rem);
line-height: 1.1;
margin: 0 0 20px;
font-weight: 800;
letter-spacing: -0.02em;
}
.hero-content h1 .highlight {
color: var(--teal-light);
background: linear-gradient(90deg, var(--teal-light), #80e8e8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-description {
color: rgba(255, 255, 255, 0.85);
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 40px;
max-width: 520px;
}
.hero-cta {
display: flex;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.hero-cta .btn {
padding: 18px 36px;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
}
.hero-cta .btn-primary {
background: var(--teal);
border-color: var(--teal);
}
.hero-cta .btn-primary:hover {
background: var(--teal-dark);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(14, 165, 165, 0.4);
}
.hero-cta .btn-outline-white {
border-color: rgba(255, 255, 255, 0.3);
color: var(--white);
}
.hero-cta .btn-outline-white:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--teal);
color: var(--teal-light);
transform: translateY(-4px);
}
.hero-stats {
display: flex;
gap: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 0;
max-width: 500px;
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
}
.hero-stats .stat-item {
flex: 1;
text-align: center;
padding: 24px 20px;
}
.hero-stats .stat-number {
display: block;
font-size: 2.8rem;
font-weight: 900;
color: var(--teal-light);
line-height: 1;
font-family: var(--font-display);
margin-bottom: 4px;
}
.hero-stats .stat-label {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hero-stats .stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
align-self: center;
}
.hero-visual {
position: relative;
}
.visual-container {
position: relative;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}
.hero-image-wrapper {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 30px;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.visual-container:hover .hero-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(13, 27, 62, 0.3), rgba(14, 165, 165, 0.1));
pointer-events: none;
}
.floating-cards {
position: absolute;
inset: 20px;
pointer-events: none;
}
.floating-card {
position: absolute;
width: 120px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 8px;
animation: floatCard 3s ease-in-out infinite;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-1 {
top: 10px;
left: 10px;
animation-delay: 0s;
}
.card-2 {
top: 50%;
right: 20px;
transform: translateY(-50%);
animation-delay: 1s;
}
.card-3 {
bottom: 20px;
left: 30%;
animation-delay: 2s;
}
.floating-card .card-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.floating-card .card-text {
font-size: 0.8rem;
font-weight: 600;
color: var(--navy);
white-space: nowrap;
}
@keyframes floatCard {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(2deg);
}
}
/* ── How It Works Section ──────────────────────────────────── */
.how-it-works {
padding: 120px 0;
background: var(--white);
}
.how-it-works .section-header {
text-align: center;
margin-bottom: 80px;
}
.how-it-works .eyebrow {
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--teal);
margin-bottom: 12px;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
}
.how-it-works h2 {
font-size: clamp(2.2rem, 5vw, 3.5rem);
margin-bottom: 20px;
color: var(--navy);
}
.section-description {
max-width: 600px;
margin: 0 auto;
font-size: 1.15rem;
color: var(--gray-500);
line-height: 1.6;
}
.steps-container {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}
.step-card {
background: var(--white);
border-radius: 24px;
padding: 40px 32px;
text-align: center;
border: 1px solid var(--gray-100);
box-shadow: 0 10px 40px rgba(13, 27, 62, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.step-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(13, 27, 62, 0.15);
border-color: var(--teal-light);
}
.step-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 4rem;
font-weight: 900;
color: rgba(14, 165, 165, 0.05);
line-height: 1;
font-family: var(--font-display);
}
.step-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.step-card h3 {
font-size: 1.3rem;
color: var(--navy);
margin-bottom: 12px;
}
.step-card p {
font-size: 0.95rem;
color: var(--gray-500);
line-height: 1.6;
margin: 0;
}
.step-connector {
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
}
.step-connector svg {
width: 32px;
height: 32px;
}
/* ── Challenges Section ────────────────────────────────────── */
.challenges-section {
padding: 120px 0;
background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
}
.challenges-section .section-header {
text-align: center;
margin-bottom: 80px;
}
.challenges-section .eyebrow {
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--teal);
margin-bottom: 12px;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
}
.challenges-section h2 {
font-size: clamp(2.2rem, 5vw, 3.5rem);
margin-bottom: 20px;
color: var(--navy);
}
.challenges-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.challenge-card {
background: var(--white);
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--gray-100);
box-shadow: 0 10px 40px rgba(13, 27, 62, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.challenge-card:hover {
transform: translateY(-12px);
box-shadow: 0 30px 80px rgba(13, 27, 62, 0.15);
}
.card-header {
padding: 40px 32px 32px;
text-align: center;
border-bottom: 1px solid var(--gray-100);
background: var(--white);
position: relative;
}
.card-badge {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.5rem;
border: 3px solid transparent;
}
.badge-academic {
background: linear-gradient(135deg, var(--emerald-light), #d1fae5);
color: var(--emerald);
border-color: rgba(16, 185, 129, 0.2);
}
.badge-tka {
background: linear-gradient(135deg, var(--blue-light), #dbeafe);
color: var(--blue);
border-color: rgba(37, 99, 235, 0.2);
}
.badge-labschool {
background: linear-gradient(135deg, var(--violet-light), #ede9fe);
color: var(--violet);
border-color: rgba(124, 58, 237, 0.2);
}
.card-header h3 {
font-size: 1.4rem;
color: var(--navy);
margin-bottom: 8px;
}
.card-subtitle {
font-size: 0.9rem;
color: var(--gray-400);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0;
}
.card-content {
padding: 32px;
flex-grow: 1;
}
.card-description {
font-size: 0.95rem;
color: var(--gray-600);
line-height: 1.6;
margin-bottom: 24px;
}
.feature-list {
list-style: none;
margin-bottom: 24px;
}
.feature-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
color: var(--gray-700);
margin-bottom: 12px;
padding: 6px 0;
}
.feature-list li svg {
color: var(--teal);
flex-shrink: 0;
}
.challenge-card:nth-child(2) .feature-list li svg {
color: var(--blue);
}
.challenge-card:nth-child(3) .feature-list li svg {
color: var(--violet);
}
.card-stats {
display: flex;
gap: 16px;
padding: 20px 0;
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
}
.card-stats .stat {
flex: 1;
text-align: center;
}
.card-stats .stat-number {
display: block;
font-size: 1.8rem;
font-weight: 900;
color: var(--navy);
line-height: 1;
margin-bottom: 4px;
font-family: var(--font-display);
}
.card-stats .stat-label {
display: block;
font-size: 0.8rem;
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.card-footer {
padding: 32px;
background: rgba(13, 27, 62, 0.02);
}
.btn-card {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 32px;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
color: var(--white);
}
.btn-academic {
background: linear-gradient(135deg, var(--emerald), #10b981);
}
.btn-academic:hover {
background: linear-gradient(135deg, #0da271, #0e9e6e);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(16, 185, 129, 0.3);
}
.btn-tka {
background: linear-gradient(135deg, var(--blue), #2563eb);
}
.btn-tka:hover {
background: linear-gradient(135deg, #1d4fd8, #1c4ed8);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(37, 99, 235, 0.3);
}
.btn-labschool {
background: linear-gradient(135deg, var(--violet), #7c3aed);
}
.btn-labschool:hover {
background: linear-gradient(135deg, #6d28d9, #6c27d8);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
}
/* ── Benefits Section Update ───────────────────────────────── */
.benefits-section {
padding: 120px 0;
background: var(--white);
}
.benefits-section .section-header {
text-align: center;
margin-bottom: 80px;
}
.benefits-section .eyebrow {
font-size: 0.85rem;
letter-spacing: 0.15em;
color: var(--teal);
margin-bottom: 12px;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
}
.benefits-section h2 {
font-size: clamp(2.2rem, 5vw, 3.5rem);
margin-bottom: 20px;
color: var(--navy);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 40px;
}
.benefit-item {
background: var(--white);
border-radius: 24px;
padding: 48px 32px;
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid var(--gray-100);
box-shadow: 0 10px 40px rgba(13, 27, 62, 0.08);
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(13, 27, 62, 0.15);
border-color: var(--teal-light);
}
.benefit-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--teal-light), rgba(14, 165, 165, 0.1));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 28px;
color: var(--teal);
font-size: 2rem;
border: 2px solid var(--teal-light);
}
.benefit-item:nth-child(2) .benefit-icon {
background: linear-gradient(135deg, var(--blue-light), rgba(37, 99, 235, 0.1));
border-color: var(--blue-light);
color: var(--blue);
}
.benefit-item:nth-child(3) .benefit-icon {
background: linear-gradient(135deg, var(--emerald-light), rgba(16, 185, 129, 0.1));
border-color: var(--emerald-light);
color: var(--emerald);
}
.benefit-item:nth-child(4) .benefit-icon {
background: linear-gradient(135deg, var(--violet-light), rgba(124, 58, 237, 0.1));
border-color: var(--violet-light);
color: var(--violet);
}
.benefit-item h3 {
font-size: 1.2rem;
margin-bottom: 12px;
color: var(--navy);
}
.benefit-item p {
font-size: 0.95rem;
color: var(--gray-500);
line-height: 1.6;
margin: 0;
}
.benefit-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 5rem;
font-weight: 900;
color: rgba(13, 27, 62, 0.03);
line-height: 1;
font-family: var(--font-display);
}
/* ── CTA Section Update ─────────────────────────────���──────── */
.cta-section {
padding: 120px 0;
background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(14, 165, 165, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.cta-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
.cta-content {
color: var(--white);
}
.cta-content h2 {
font-size: clamp(2.4rem, 6vw, 4rem);
line-height: 1.1;
margin-bottom: 28px;
color: var(--white);
font-weight: 800;
letter-spacing: -0.02em;
}
.cta-content h2 .highlight {
color: var(--teal-light);
background: linear-gradient(90deg, var(--teal-light), #80e8e8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 48px;
line-height: 1.7;
max-width: 520px;
}
.cta-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.cta-content .btn {
padding: 20px 40px;
font-size: 1.05rem;
font-weight: 600;
border-radius: 14px;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
}
.cta-content .btn-primary {
background: var(--teal);
border-color: var(--teal);
}
.cta-content .btn-primary:hover {
background: var(--teal-dark);
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(14, 165, 165, 0.4);
}
.cta-content .btn-outline-white {
border-color: rgba(255, 255, 255, 0.3);
color: var(--white);
}
.cta-content .btn-outline-white:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--teal);
color: var(--teal-light);
transform: translateY(-5px);
}
.cta-visual {
position: relative;
height: 350px;
}
.cta-visual-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(20px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.cta-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.cta-float {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
animation: floatCTA 6s ease-in-out infinite;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.cta-float svg {
width: 30px;
height: 30px;
}
.cta-float-1 {
top: 15%;
left: 15%;
animation-delay: 0s;
}
.cta-float-2 {
top: 60%;
right: 25%;
animation-delay: 2s;
}
.cta-float-3 {
bottom: 25%;
left: 65%;
animation-delay: 4s;
}
@keyframes floatCTA {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(10px, -20px) rotate(5deg);
}
50% {
transform: translate(0, -25px) rotate(0deg);
}
75% {
transform: translate(-10px, -20px) rotate(-5deg);
}
}
/* ── Responsive Design ────────────────────────────────────── */
@media (max-width: 1200px) {
.steps-container {
gap: 30px;
}
.challenges-grid {
gap: 24px;
}
}
@media (max-width: 1024px) {
.hero-container {
gap: 60px;
}
.steps-container {
grid-template-columns: 1fr;
gap: 30px;
}
.step-connector {
display: none;
}
.challenges-grid {
grid-template-columns: repeat(2, 1fr);
}
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-container {
gap: 60px;
}
}
@media (max-width: 768px) {
.challenge-hero {
padding: 100px 0 60px;
}
.hero-container {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
}
.hero-content {
max-width: 100%;
}
.hero-cta {
justify-content: center;
}
.hero-stats {
margin: 0 auto;
}
.visual-container {
max-width: 500px;
margin: 0 auto;
}
.challenges-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
}
.benefits-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
}
.cta-container {
grid-template-columns: 1fr;
text-align: center;
gap: 50px;
}
.cta-visual {
height: 250px;
}
.cta-content p {
margin: 0 auto 40px;
}
.cta-buttons {
justify-content: center;
}
}
@media (max-width: 480px) {
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-stats {
flex-direction: column;
gap: 0;
}
.hero-stats .stat-divider {
width: 100%;
height: 1px;
}
.cta-content .btn {
width: 100%;
justify-content: center;
}
.floating-card {
transform: scale(0.9);
}
.hero-content h1 {
font-size: 2.4rem;
}
.how-it-works h2,
.challenges-section h2,
.benefits-section h2,
.cta-content h2 {
font-size: 2rem;
}
}
/* ============================================================
ANIMATIONS & INTERACTIONS
============================================================ */
/* ── Scroll Animations ────────────────────────────────────── */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Apply animations to elements */
.hero-content,
.how-it-works .section-header,
.step-card,
.challenge-card,
.benefit-item,
.cta-content {
animation-duration: 0.8s;
animation-fill-mode: both;
}
.hero-content {
animation-name: fadeInLeft;
}
.hero-visual {
animation-name: fadeInRight;
animation-duration: 1s;
}
.how-it-works .section-header {
animation-name: fadeInUp;
}
.step-card:nth-child(1) {
animation-name: fadeInUp;
animation-delay: 0.2s;
}
.step-card:nth-child(3) {
animation-name: fadeInUp;
animation-delay: 0.4s;
}
.step-card:nth-child(5) {
animation-name: fadeInUp;
animation-delay: 0.6s;
}
.challenge-card:nth-child(1) {
animation-name: scaleIn;
animation-delay: 0.2s;
}
.challenge-card:nth-child(2) {
animation-name: scaleIn;
animation-delay: 0.4s;
}
.challenge-card:nth-child(3) {
animation-name: scaleIn;
animation-delay: 0.6s;
}
.benefit-item:nth-child(1) {
animation-name: fadeInUp;
animation-delay: 0.2s;
}
.benefit-item:nth-child(2) {
animation-name: fadeInUp;
animation-delay: 0.4s;
}
.benefit-item:nth-child(3) {
animation-name: fadeInUp;
animation-delay: 0.6s;
}
.benefit-item:nth-child(4) {
animation-name: fadeInUp;
animation-delay: 0.8s;
}
.cta-content {
animation-name: fadeInLeft;
}
.cta-visual {
animation-name: fadeInRight;
}
/* ── Scroll Progress Indicator ────────────────────────────── */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gray-200);
z-index: 1001;
opacity: 0;
transition: opacity 0.3s ease;
}
.scroll-progress.active {
opacity: 1;
}
.scroll-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--teal), var(--blue));
width: 0%;
transition: width 0.1s ease;
}
/* ── Smooth Scroll Behavior ───────────────────────────────── */
html {
scroll-behavior: smooth;
}
/* ── Hover Effects Enhancement ───────────────────────────── */
.btn {
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
.btn:hover::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
20% {
transform: scale(25, 25);
opacity: 0.3;
}
100% {
transform: scale(50, 50);
opacity: 0;
}
}
/* ── Loading Animation ───────────────────────────────────── */
.loading-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 3px solid rgba(14, 165, 165, 0.3);
border-radius: 50%;
border-top-color: var(--teal);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ── Card Tilt Effect ────────────────────────────────────── */
.challenge-card,
.step-card,
.benefit-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* ── Parallax Scrolling ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
.challenge-hero::before,
.cta-section::before {
transform: translateZ(-1px) scale(2);
transform-style: preserve-3d;
}
}
/* ── Accessibility Focus Styles ──────────────────────────── */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(14, 165, 165, 0.2);
}
/* ── Reduced Motion Media Query ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
PROGRAMS SECTION — Modern Card Redesign v5
============================================================ */
/* ── Section wrapper ─────────────────────────────────────── */
.programs-section {
background: #f8fafc;
padding: 96px 0 80px;
}
/* ── Section header row ──────────────────────────────────── */
.prog-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 52px;
flex-wrap: wrap;
}
.prog-section-header-left .eyebrow {
display: block;
margin-bottom: 10px;
}
.prog-section-header-left h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 900;
color: var(--navy);
line-height: 1.2;
margin-bottom: 10px;
}
.prog-section-header-left p {
font-size: .9rem;
color: var(--gray-500);
max-width: 420px;
line-height: 1.65;
margin: 0;
}
.btn-view-all {
flex-shrink: 0;
align-self: center;
white-space: nowrap;
}
/* ── Cards grid ──────────────────────────────────────────── */
.prog-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-bottom: 36px;
}
/* ── Individual card ─────────────────────────────────────── */
.prog-card {
background: #ffffff;
border-radius: 24px;
border: 1px solid var(--gray-100);
box-shadow: 0 4px 20px rgba(13, 27, 62, .07);
overflow: visible;
display: flex;
flex-direction: column;
position: relative;
transition: transform .28s ease, box-shadow .28s ease;
}
.prog-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 56px rgba(13, 27, 62, .14);
}
/* top accent bar per variant */
.prog-card--emerald { border-top: 4px solid #10b981; }
.prog-card--blue { border-top: 4px solid #2563eb; }
.prog-card--violet { border-top: 4px solid #7c3aed; }
/* ── Card top gradient area ──────────────────────────────── */
.prog-card__top {
border-radius: 20px 20px 0 0;
padding: 40px 32px 52px;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
/* subtle decorative circle in background */
.prog-card__top-deco {
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
bottom: -60px;
left: -40px;
pointer-events: none;
}
.prog-card__top-deco::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 255, 255, .25);
top: -40px;
right: -50px;
}
/* large emoji in top-right */
.prog-card__emoji {
font-size: 3.6rem;
line-height: 1;
position: relative;
z-index: 2;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
transition: transform .3s ease;
}
.prog-card:hover .prog-card__emoji {
transform: scale(1.12) rotate(-4deg);
}
/* ── Floating icon badge ─────────────────────────────────── */
.prog-card__icon-badge {
position: absolute;
top: calc(/* top-area padding-bottom */ 40px + 52px - 26px); /* centre on the fold */
left: 32px;
width: 56px;
height: 56px;
border-radius: 16px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(13, 27, 62, .14);
z-index: 10;
border: 2px solid rgba(255, 255, 255, .9);
transition: transform .28s ease, box-shadow .28s ease;
}
.prog-card:hover .prog-card__icon-badge {
transform: translateY(-4px) scale(1.06);
box-shadow: 0 14px 32px rgba(13, 27, 62, .18);
}
/* ── Card body ───────────────────────────────────────────── */
.prog-card__body {
padding: 44px 32px 32px; /* top pad gives room for the floating badge */
display: flex;
flex-direction: column;
flex: 1;
}
/* level badge */
.prog-card__level {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 14px;
border: 1.5px solid currentColor;
}
.prog-card--emerald .prog-card__level { color: #10b981; background: #d1fae5; }
.prog-card--blue .prog-card__level { color: #2563eb; background: #dbeafe; }
.prog-card--violet .prog-card__level { color: #7c3aed; background: #ede9fe; }
/* program name */
.prog-card__name {
font-size: 1.15rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 6px;
line-height: 1.3;
}
/* tagline */
.prog-card__tagline {
font-size: .82rem;
font-weight: 700;
font-style: italic;
margin-bottom: 12px;
}
.prog-card--emerald .prog-card__tagline { color: #10b981; }
.prog-card--blue .prog-card__tagline { color: #2563eb; }
.prog-card--violet .prog-card__tagline { color: #7c3aed; }
/* description */
.prog-card__desc {
font-size: .855rem;
color: var(--gray-500);
line-height: 1.65;
margin-bottom: 22px;
flex-grow: 1;
}
/* feature bullets */
.prog-card__feats {
list-style: none;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 8px;
}
.prog-card__feats li {
display: flex;
align-items: center;
gap: 10px;
font-size: .83rem;
color: var(--gray-700);
line-height: 1.4;
}
.prog-card__feat-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
/* CTA button */
.prog-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 22px;
border-radius: 12px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--white);
background: var(--card-accent, #10b981);
border: none;
transition: all .25s ease;
text-decoration: none;
margin-top: auto;
}
.prog-card__btn:hover {
filter: brightness(1.1);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.18);
color: var(--white);
}
.prog-card__btn svg {
transition: transform .25s ease;
flex-shrink: 0;
}
.prog-card__btn:hover svg {
transform: translateX(4px);
}
/* ── Daily Challenge strip ───────────────────────────────── */
.daily-strip {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
border-radius: 20px;
padding: 28px 36px;
box-shadow: 0 12px 36px rgba(13, 27, 62, .18);
}
.daily-strip__left {
flex: 1;
min-width: 220px;
}
.daily-strip__label {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal-light);
margin-bottom: 6px;
padding: 3px 10px;
background: rgba(14, 165, 165, .18);
border-radius: 20px;
}
.daily-strip__q {
font-size: .95rem;
color: rgba(255, 255, 255, .9);
line-height: 1.55;
margin: 0;
}
.daily-strip__q strong {
color: #ffffff;
font-size: 1.02rem;
}
/* option buttons */
.daily-strip__opts {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dcs-btn {
padding: 9px 20px;
border: 1.5px solid rgba(255, 255, 255, .22);
border-radius: 10px;
font-size: .83rem;
font-weight: 600;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .85);
cursor: pointer;
transition: all .2s ease;
font-family: var(--font);
white-space: nowrap;
}
.dcs-btn:hover {
background: rgba(14, 165, 165, .25);
border-color: var(--teal-light);
color: #ffffff;
}
.dcs-btn.correct {
background: rgba(16, 185, 129, .25);
border-color: #6ee7b7;
color: #6ee7b7;
}
.dcs-btn.wrong {
background: rgba(239, 68, 68, .2);
border-color: #fca5a5;
color: #fca5a5;
}
.daily-strip .dc-feedback {
font-size: .82rem;
border-radius: 10px;
padding: 8px 14px;
display: none;
color: #ffffff;
min-width: 160px;
}
.daily-strip .dc-feedback.correct-show {
display: block;
background: rgba(16, 185, 129, .2);
border: 1px solid #6ee7b7;
color: #6ee7b7;
}
.daily-strip .dc-feedback.wrong-show {
display: block;
background: rgba(239, 68, 68, .15);
border: 1px solid #fca5a5;
color: #fca5a5;
}
.daily-strip__cta {
flex-shrink: 0;
white-space: nowrap;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
.prog-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.programs-section { padding: 72px 0 60px; }
.prog-section-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.prog-cards-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.daily-strip {
flex-direction: column;
align-items: flex-start;
padding: 24px 22px;
gap: 18px;
}
.daily-strip__opts { width: 100%; }
.daily-strip__cta { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
.prog-card__top { padding: 32px 24px 44px; }
.prog-card__body { padding: 38px 24px 28px; }
.prog-card__icon-badge { left: 24px; }
}
/* ============================================================
TODAY'S CHALLENGE BLOCK — Redesign
============================================================ */
.dc-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: 28px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(10, 20, 50, .18);
}
/* ── Left panel ──────────────────────────────────────────── */
.dc-block__left {
background: linear-gradient(145deg, #0c1e3c 0%, #0f2a52 55%, #0d2346 100%);
padding: 40px 44px 40px 40px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
overflow: hidden;
}
/* subtle radial glow */
.dc-block__left::before {
content: '';
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(14, 165, 165, .22) 0%, transparent 70%);
top: -80px;
right: -80px;
pointer-events: none;
}
.dc-block__left::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(99, 102, 241, .15) 0%, transparent 70%);
bottom: -60px;
left: -40px;
pointer-events: none;
}
/* badge pill */
.dc-block__badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(14, 165, 165, .18);
border: 1px solid rgba(14, 165, 165, .38);
color: #5eead4;
font-size: .7rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
width: fit-content;
margin-bottom: 18px;
position: relative;
z-index: 2;
}
.dc-block__badge svg {
flex-shrink: 0;
}
/* category label */
.dc-block__category {
font-size: .72rem;
font-weight: 700;
color: rgba(255,255,255,.4);
letter-spacing: .06em;
text-transform: uppercase;
margin: 0 0 10px;
position: relative;
z-index: 2;
}
/* question text */
.dc-block__q {
font-size: 1.3rem;
font-weight: 800;
color: #ffffff;
line-height: 1.35;
margin: 0 0 28px;
position: relative;
z-index: 2;
}
/* sequence bubbles */
.dc-block__seq {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
position: relative;
z-index: 2;
margin-bottom: 24px;
}
.dc-block__seq span {
display: flex;
align-items: center;
justify-content: center;
min-width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(255,255,255,.09);
border: 1.5px solid rgba(255,255,255,.15);
color: #ffffff;
font-size: 1rem;
font-weight: 800;
letter-spacing: -.02em;
transition: background .2s ease;
}
.dc-block__seq-blank {
background: rgba(14, 165, 165, .22) !important;
border-color: rgba(94, 234, 212, .5) !important;
color: #5eead4 !important;
font-size: 1.3rem !important;
}
/* inline feedback */
.dc-block__feedback {
display: none;
align-items: center;
gap: 8px;
font-size: .82rem;
font-weight: 700;
padding: 10px 16px;
border-radius: 10px;
position: relative;
z-index: 2;
margin-top: 4px;
}
.dc-block__feedback.correct-show {
display: flex;
background: rgba(16, 185, 129, .18);
border: 1px solid rgba(110, 231, 183, .4);
color: #6ee7b7;
}
.dc-block__feedback.wrong-show {
display: flex;
background: rgba(239, 68, 68, .15);
border: 1px solid rgba(252, 165, 165, .4);
color: #fca5a5;
}
/* ── Right panel ─────────────────────────────────────────── */
.dc-block__right {
background: #f8fafc;
padding: 40px 40px 40px 44px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
}
.dc-block__hint {
font-size: .72rem;
font-weight: 700;
color: #94a3b8;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 18px;
}
/* option buttons */
.dc-block__opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 28px;
}
.dc-opt {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
background: #ffffff;
border: 2px solid #e2e8f0;
cursor: pointer;
transition: all .2s ease;
font-family: inherit;
text-align: left;
}
.dc-opt:hover {
border-color: #0ea5e9;
background: #f0f9ff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(14, 165, 234, .14);
}
.dc-opt__letter {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: #f1f5f9;
color: #475569;
font-size: .78rem;
font-weight: 800;
flex-shrink: 0;
transition: all .2s ease;
}
.dc-opt:hover .dc-opt__letter {
background: #0ea5e9;
color: #fff;
}
.dc-opt__val {
font-size: .95rem;
font-weight: 700;
color: #1e293b;
}
/* correct state */
.dc-opt.correct {
border-color: #10b981;
background: #ecfdf5;
pointer-events: none;
}
.dc-opt.correct .dc-opt__letter {
background: #10b981;
color: #fff;
}
.dc-opt.correct .dc-opt__val {
color: #065f46;
}
/* wrong state */
.dc-opt.wrong {
border-color: #ef4444;
background: #fef2f2;
pointer-events: none;
opacity: .65;
}
.dc-opt.wrong .dc-opt__letter {
background: #ef4444;
color: #fff;
}
.dc-opt.wrong .dc-opt__val {
color: #991b1b;
}
/* CTA link */
.dc-block__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border-radius: 12px;
background: linear-gradient(135deg, #0c1e3c 0%, #0f3460 100%);
color: #ffffff;
font-size: .8rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease;
align-self: flex-start;
}
.dc-block__cta:hover {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(14, 165, 234, .28);
}
.dc-block__cta svg {
transition: transform .2s ease;
flex-shrink: 0;
}
.dc-block__cta:hover svg {
transform: translateX(4px);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
.dc-block {
grid-template-columns: 1fr;
}
.dc-block__left {
padding: 32px 28px;
}
.dc-block__right {
padding: 32px 28px;
}
}
@media (max-width: 480px) {
.dc-block__opts {
grid-template-columns: 1fr;
}
.dc-block__q {
font-size: 1.1rem;
}
.dc-block__cta {
width: 100%;
justify-content: center;
}
}
/* ============================================================
STUDENTS SHOWCASE — index.php section
============================================================ */
.students-showcase {
padding: 96px 0 80px;
background: #fff;
}
/* ── Header row ──────────────────────────────────────────── */
.ss-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 52px;
flex-wrap: wrap;
}
.ss-header__left .eyebrow { display: block; margin-bottom: 12px; }
.ss-header__left h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 900;
color: #0f172a;
line-height: 1.1;
letter-spacing: -.04em;
margin: 0 0 12px;
}
.ss-header__left p {
font-size: .9rem;
color: #64748b;
line-height: 1.7;
max-width: 440px;
margin: 0;
}
/* stats row */
.ss-header__stats {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-self: flex-start;
margin-top: 8px;
}
.ss-stat {
display: flex;
flex-direction: column;
align-items: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 18px 24px;
min-width: 100px;
text-align: center;
}
.ss-stat__num {
font-size: 1.7rem;
font-weight: 900;
color: #0c1e3c;
line-height: 1;
letter-spacing: -.04em;
margin-bottom: 6px;
}
.ss-stat__num span { font-size: 1rem; color: #0ea5e9; }
.ss-stat__lbl {
font-size: .68rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .07em;
}
/* ── Photo grid ──────────────────────────────────────────── */
.ss-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 18px;
margin-bottom: 40px;
}
/* first card spans full left column (2 rows) */
.ss-card:first-child {
grid-row: span 2;
}
/* ── Card ────────────────────────────────────────────────── */
.ss-card {
border-radius: 20px;
overflow: hidden;
position: relative;
cursor: default;
box-shadow: 0 4px 16px rgba(13,27,62,.07);
transition: transform .3s ease, box-shadow .3s ease;
}
.ss-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(13,27,62,.14); }
.ss-card__img-wrap {
position: relative;
width: 100%;
height: 100%;
min-height: 220px;
overflow: hidden;
}
.ss-card:first-child .ss-card__img-wrap { min-height: 460px; }
/* placeholder gradient images */
.ss-card__img {
width: 100%;
height: 100%;
min-height: inherit;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
transition: transform .45s ease;
}
.ss-card:hover .ss-card__img { transform: scale(1.05); }
.ss-card__img--1 { background: linear-gradient(145deg, #0c1e3c 0%, #1a3a6e 100%); }
.ss-card__img--2 { background: linear-gradient(145deg, #064e3b 0%, #065f46 100%); }
.ss-card__img--3 { background: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 100%); }
.ss-card__img--4 { background: linear-gradient(145deg, #4c1d95 0%, #6d28d9 100%); }
.ss-card__img--5 { background: linear-gradient(145deg, #7c2d12 0%, #c2410c 100%); }
/* decorative initials / emoji on placeholder */
.ss-card__img--1::after { content: '🎓'; }
.ss-card__img--2::after { content: '⭐'; }
.ss-card__img--3::after { content: '📚'; }
.ss-card__img--4::after { content: '🏆'; }
.ss-card__img--5::after { content: '🚀'; }
/* overlay gradient */
.ss-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(7,12,28,.92) 0%, rgba(7,12,28,.45) 50%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
opacity: 0;
transition: opacity .3s ease;
}
.ss-card:hover .ss-card__overlay { opacity: 1; }
/* always visible for featured */
.ss-card:first-child .ss-card__overlay {
opacity: 1;
background: linear-gradient(to top, rgba(7,12,28,.95) 0%, rgba(7,12,28,.5) 55%, transparent 100%);
}
.ss-card__school {
display: block;
font-size: .68rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.6);
margin-bottom: 6px;
}
.ss-card__name {
font-size: 1.1rem;
font-weight: 800;
color: #fff;
margin: 0 0 8px;
line-height: 1.2;
}
.ss-card:first-child .ss-card__name { font-size: 1.4rem; }
.ss-card__quote {
font-size: .78rem;
color: rgba(255,255,255,.75);
line-height: 1.55;
margin: 0 0 14px;
font-style: italic;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ss-card:first-child .ss-card__quote {
font-size: .85rem;
-webkit-line-clamp: 3;
}
/* result badge */
.ss-card__badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .65rem;
font-weight: 800;
padding: 4px 12px;
border-radius: 999px;
width: fit-content;
}
.ss-card__badge--gold { background: rgba(253,230,138,.2); color: #fde68a; border: 1px solid rgba(253,230,138,.35); }
.ss-card__badge--teal { background: rgba(94,234,212,.15); color: #5eead4; border: 1px solid rgba(94,234,212,.3); }
.ss-card__badge--blue { background: rgba(147,197,253,.15); color: #93c5fd; border: 1px solid rgba(147,197,253,.3); }
/* ── CTA row ─────────────────────────────────────────────── */
.ss-cta {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.ss-cta__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 12px;
background: linear-gradient(135deg, #0c1e3c, #0f3460);
color: #fff;
font-size: .82rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
transition: all .25s ease;
flex-shrink: 0;
}
.ss-cta__btn:hover {
background: linear-gradient(135deg, #0ea5e9, #6366f1);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(14,165,234,.28);
}
.ss-cta__btn svg { transition: transform .2s ease; }
.ss-cta__btn:hover svg { transform: translateX(4px); }
.ss-cta__sub {
font-size: .85rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
.ss-grid {
grid-template-columns: repeat(2, 1fr);
}
.ss-card:first-child { grid-row: span 1; grid-column: span 2; }
.ss-card:first-child .ss-card__img-wrap { min-height: 280px; }
}
@media (max-width: 640px) {
.students-showcase { padding: 72px 0 60px; }
.ss-header { flex-direction: column; align-items: flex-start; gap: 24px; }
.ss-grid {
grid-template-columns: 1fr;
}
.ss-card:first-child { grid-column: span 1; }
.ss-card:first-child .ss-card__overlay { opacity: 1; }
.ss-cta { flex-direction: column; align-items: flex-start; }
.ss-cta__btn { width: 100%; justify-content: center; }
}
/* ============================================================
CHALLENGE START HERO — Redesign v2
============================================================ */
.csh-hero {
background: linear-gradient(135deg, #08152e 0%, #0c1e3c 50%, #0f2a52 100%);
padding: 110px 0 80px;
margin-top: var(--navbar-h);
position: relative;
overflow: hidden;
}
/* background glows */
.csh-hero::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(14,165,165,.18) 0%, transparent 70%);
top: -140px; right: -80px;
pointer-events: none;
}
.csh-hero::after {
content: '';
position: absolute;
width: 340px; height: 340px;
border-radius: 50%;
background: radial-gradient(circle, rgba(99,102,241,.13) 0%, transparent 70%);
bottom: -100px; left: -60px;
pointer-events: none;
}
/* ── Inner grid ──────────────────────────────────────────── */
.csh-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
position: relative;
z-index: 2;
}
/* ── LEFT ────────────────────────────────────────────────── */
.csh-left { display: flex; flex-direction: column; gap: 0; }
/* eyebrow badge */
.csh-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(14,165,165,.18);
border: 1px solid rgba(94,234,212,.32);
color: #5eead4;
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
width: fit-content;
margin-bottom: 22px;
}
/* title */
.csh-title {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900;
color: #ffffff;
line-height: 1.1;
letter-spacing: -.045em;
margin: 0 0 14px;
}
/* tagline */
.csh-tagline {
font-size: 1rem;
font-weight: 500;
color: rgba(255,255,255,.7);
line-height: 1.65;
margin: 0 0 36px;
max-width: 460px;
}
/* stats row */
.csh-stats {
display: flex;
align-items: stretch;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.11);
border-radius: 16px;
backdrop-filter: blur(12px);
overflow: hidden;
max-width: 360px;
margin-bottom: 28px;
}
.csh-stat {
flex: 1;
text-align: center;
padding: 20px 14px;
}
.csh-stat__num {
display: block;
font-size: 2.2rem;
font-weight: 900;
color: #5eead4;
line-height: 1;
letter-spacing: -.04em;
margin-bottom: 5px;
}
.csh-stat__lbl {
display: block;
font-size: .68rem;
font-weight: 700;
color: rgba(255,255,255,.5);
text-transform: uppercase;
letter-spacing: .1em;
}
.csh-stat-sep {
width: 1px;
background: rgba(255,255,255,.1);
align-self: stretch;
}
/* feature badges */
.csh-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.csh-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.13);
color: rgba(255,255,255,.75);
font-size: .72rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
backdrop-filter: blur(6px);
}
/* ── RIGHT — Visual card ─────────────────────────────────── */
.csh-right {
display: flex;
align-items: center;
justify-content: center;
}
.csh-visual-card {
position: relative;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: 28px;
backdrop-filter: blur(20px);
padding: 48px 40px 40px;
text-align: center;
width: 100%;
max-width: 320px;
box-shadow: 0 24px 60px rgba(0,0,0,.3);
overflow: hidden;
}
/* subtle inner top glow */
.csh-visual-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(94,234,212,.4), transparent);
}
/* icon ring */
.csh-icon-ring {
width: 100px; height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 28px;
position: relative;
z-index: 2;
}
.csh-icon-ring--green { background: linear-gradient(135deg, rgba(16,185,129,.25), rgba(5,150,105,.15)); border: 2px solid rgba(110,231,183,.3); }
.csh-icon-ring--blue { background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(37,99,235,.15)); border: 2px solid rgba(147,197,253,.3); }
.csh-icon-ring--purple { background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(109,40,217,.15)); border: 2px solid rgba(196,181,253,.3); }
.csh-icon-emoji { font-size: 3rem; line-height: 1; }
/* card body */
.csh-vc-body { position: relative; z-index: 2; }
.csh-vc-label {
font-size: .65rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
margin: 0 0 6px;
}
.csh-vc-name {
font-size: 1.05rem;
font-weight: 800;
color: #ffffff;
line-height: 1.3;
margin: 0 0 20px;
}
.csh-vc-divider {
height: 1px;
background: rgba(255,255,255,.1);
margin-bottom: 20px;
}
.csh-vc-stats {
display: flex;
justify-content: space-around;
gap: 8px;
}
.csh-vc-stat { text-align: center; }
.csh-vc-num {
display: block;
font-size: 1.6rem;
font-weight: 900;
color: #5eead4;
letter-spacing: -.03em;
line-height: 1;
margin-bottom: 4px;
}
.csh-vc-lbl {
font-size: .65rem;
font-weight: 700;
color: rgba(255,255,255,.45);
text-transform: uppercase;
letter-spacing: .08em;
}
/* floating dots */
.csh-dot {
position: absolute;
border-radius: 50%;
animation: cshDotFloat 4s ease-in-out infinite;
}
.csh-dot-1 { width: 12px; height: 12px; background: rgba(94,234,212,.5); top: 24px; right: 36px; }
.csh-dot-2 { width: 8px; height: 8px; background: rgba(147,197,253,.5); bottom: 48px; left: 28px; animation-delay: 1.4s; }
.csh-dot-3 { width: 10px; height: 10px; background: rgba(196,181,253,.5); top: 50%; right: 20px; animation-delay: 2.6s; }
@keyframes cshDotFloat {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-12px) scale(1.15); }
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
.csh-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.csh-right { order: -1; }
.csh-visual-card { max-width: 360px; padding: 36px 32px 32px; }
.csh-stats { max-width: 100%; }
}
@media (max-width: 540px) {
.csh-hero { padding: 80px 0 60px; }
.csh-title { font-size: 1.8rem; }
.csh-badges { gap: 7px; }
}
/* ============================================================
CSH HERO — Photo Right Panel
============================================================ */
/* ── Photo wrap — positioning context ───────────────────── */
.csh-photo-wrap {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
height: 480px;
}
/* ── Photo frame ─────────────────────────────────────────── */
.csh-photo-frame {
position: relative;
width: 100%;
max-width: 340px;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.csh-student-photo {
display: block;
width: auto;
height: 100%;
max-width: 100%;
max-height: 480px;
object-fit: contain;
object-position: center bottom;
position: relative;
z-index: 2;
filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
/* decorative colour ring behind photo */
.csh-photo-ring {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 280px;
border-radius: 50%;
z-index: 1;
opacity: .18;
}
.csh-photo-ring--green { background: radial-gradient(circle, #10b981, transparent 70%); }
.csh-photo-ring--blue { background: radial-gradient(circle, #3b82f6, transparent 70%); }
.csh-photo-ring--purple { background: radial-gradient(circle, #8b5cf6, transparent 70%); }
/* ── Floating badge — program name (top-left) ────────────── */
.csh-float-badge {
position: absolute;
top: 28px;
left: -12px;
z-index: 10;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(16px);
border-radius: 14px;
padding: 10px 16px;
min-width: 180px;
box-shadow: 0 8px 28px rgba(0,0,0,.28);
animation: cshFloatY 5s ease-in-out infinite;
}
.csh-float-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
}
.csh-float-badge .csh-float-label {
display: block;
font-size: .62rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin-bottom: 2px;
}
.csh-float-badge .csh-float-val {
display: block;
font-size: .82rem;
font-weight: 800;
color: #ffffff;
line-height: 1.25;
}
/* ── Floating stats card (bottom-right) ──────────────────── */
.csh-float-stats {
position: absolute;
bottom: 32px;
right: -16px;
z-index: 10;
display: flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(16px);
border-radius: 14px;
padding: 14px 18px;
box-shadow: 0 10px 30px rgba(0,0,0,.3);
animation: cshFloatY 5s ease-in-out infinite 1.2s;
}
.csh-fs-item {
text-align: center;
padding: 0 14px;
}
.csh-fs-num {
display: block;
font-size: 1.5rem;
font-weight: 900;
color: #5eead4;
letter-spacing: -.03em;
line-height: 1;
margin-bottom: 3px;
}
.csh-fs-lbl {
display: block;
font-size: .62rem;
font-weight: 700;
color: rgba(255,255,255,.5);
text-transform: uppercase;
letter-spacing: .08em;
}
.csh-fs-sep {
width: 1px;
height: 32px;
background: rgba(255,255,255,.14);
flex-shrink: 0;
}
/* ── Floating pill (right side) ──────────────────────────── */
.csh-float-pill {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
align-items: center;
gap: 6px;
background: rgba(16,185,129,.22);
border: 1px solid rgba(110,231,183,.35);
color: #6ee7b7;
font-size: .7rem;
font-weight: 800;
padding: 7px 14px;
border-radius: 999px;
backdrop-filter: blur(10px);
white-space: nowrap;
box-shadow: 0 6px 20px rgba(0,0,0,.2);
animation: cshFloatY 5s ease-in-out infinite 2.4s;
}
/* shared float animation */
@keyframes cshFloatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.csh-float-pill { animation-name: cshFloatYMid; }
@keyframes cshFloatYMid {
0%, 100% { transform: translateY(-50%); }
50% { transform: translateY(calc(-50% - 8px)); }
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
.csh-photo-wrap { height: 360px; }
.csh-student-photo { max-height: 360px; }
.csh-float-badge { left: 0; top: 16px; min-width: 160px; }
.csh-float-stats { right: 0; bottom: 16px; }
.csh-float-pill { right: 0; }
}
@media (max-width: 540px) {
.csh-photo-wrap { height: 300px; }
.csh-student-photo{ max-height: 300px; }
.csh-float-badge { display: none; } /* terlalu sempit di mobile kecil */
}
/* ── CSH Hero — full-width single column override ─────────── */
.csh-inner {
grid-template-columns: 1fr !important;
max-width: 760px;
margin: 0 auto;
}
.csh-right { display: none !important; }
.csh-left { align-items: center; text-align: center; }
.csh-tagline { margin-left: auto; margin-right: auto; }
.csh-stats { margin-left: auto; margin-right: auto; }
.csh-badges { justify-content: center; }
.csh-eyebrow { margin-left: auto; margin-right: auto; }
/* ============================================================
CSH HERO v3 — Full-width bold centered layout
============================================================ */
.csh2-hero {
position: relative;
padding: 120px 0 100px;
margin-top: var(--navbar-h);
background: #06101f;
overflow: hidden;
text-align: center;
}
/* ── Animated mesh grid ──────────────────────────────────── */
.csh2-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 1;
}
/* ── Glow orbs ───────────────────────────────────────────── */
.csh2-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 2;
}
.csh2-orb-1 {
width: 600px; height: 600px;
top: -200px; left: 50%;
transform: translateX(-50%);
opacity: .7;
}
.csh2-orb-2 {
width: 400px; height: 400px;
background: rgba(99,102,241,.15);
bottom: -100px; right: -80px;
}
/* ── Topbar breadcrumb ───────────────────────────────────── */
.csh2-topbar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
font-size: .78rem;
font-weight: 700;
color: rgba(255,255,255,.4);
}
.csh2-back {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255,255,255,.5);
text-decoration: none;
transition: color .2s;
}
.csh2-back:hover { color: rgba(255,255,255,.9); }
.csh2-breadcrumb-sep { color: rgba(255,255,255,.2); }
.csh2-breadcrumb-cur { color: rgba(255,255,255,.7); }
/* ── Body ────────────────────────────────────────────────── */
.csh2-body {
position: relative;
z-index: 3;
max-width: 860px;
margin: 0 auto;
}
/* ── Eyebrow ─────────────────────────────────────────────── */
.csh2-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.65);
font-size: .72rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 999px;
margin-bottom: 28px;
}
.csh2-eyebrow__dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
animation: csh2Pulse 2s ease-in-out infinite;
}
@keyframes csh2Pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.4); }
}
/* ── Title ───────────────────────────────────────────────── */
.csh2-title {
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 900;
color: #ffffff;
line-height: 1.05;
letter-spacing: -.055em;
margin: 0 0 18px;
}
/* ── Tagline ─────────────────────────────────────────────── */
.csh2-tagline {
font-size: clamp(.95rem, 2vw, 1.15rem);
color: rgba(255,255,255,.6);
line-height: 1.7;
margin: 0 auto 52px;
max-width: 580px;
}
/* ── Stat tiles ──────────────────────────────────────────── */
.csh2-tiles {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.csh2-tile {
display: flex;
align-items: center;
gap: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
padding: 18px 24px;
backdrop-filter: blur(10px);
transition: background .2s, transform .2s;
min-width: 150px;
}
.csh2-tile:hover {
background: rgba(255,255,255,.10);
transform: translateY(-3px);
}
.csh2-tile__icon {
width: 46px; height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.csh2-tile__num {
display: block;
font-size: 1.8rem;
font-weight: 900;
color: #ffffff;
letter-spacing: -.04em;
line-height: 1;
}
.csh2-tile__lbl {
display: block;
font-size: .68rem;
font-weight: 700;
color: rgba(255,255,255,.45);
text-transform: uppercase;
letter-spacing: .08em;
margin-top: 3px;
}
/* ── Subject chips ───────────────────────────────────────── */
.csh2-subjects {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 44px;
}
.csh2-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: rgba(255,255,255,.65);
font-size: .78rem;
font-weight: 700;
padding: 6px 16px;
border-radius: 999px;
backdrop-filter: blur(6px);
transition: all .2s;
}
.csh2-chip:hover {
background: rgba(255,255,255,.12);
color: #fff;
}
/* ── CTA row ─────────────────────────────────────────────── */
.csh2-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.csh2-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 17px 40px;
border-radius: 14px;
color: #ffffff;
font-size: .95rem;
font-weight: 800;
letter-spacing: .02em;
text-decoration: none;
transition: filter .2s, transform .2s;
}
.csh2-btn-primary:hover {
filter: brightness(1.12);
transform: translateY(-2px);
color: #fff;
}
.csh2-btn-primary svg { flex-shrink: 0; transition: transform .2s; }
.csh2-btn-primary:hover svg { transform: translateX(4px); }
/* trust pills */
.csh2-trust {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.csh2-trust span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .75rem;
font-weight: 700;
color: rgba(255,255,255,.45);
}
/* ── Wave divider ────────────────────────────────────────── */
.csh2-wave {
position: absolute;
bottom: -1px; left: 0; right: 0;
line-height: 0;
z-index: 4;
}
.csh2-wave svg { width: 100%; height: 72px; }
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
.csh2-hero { padding: 90px 0 80px; }
.csh2-tiles { gap: 10px; }
.csh2-tile { min-width: 130px; padding: 14px 16px; }
.csh2-title { letter-spacing: -.04em; }
}
@media (max-width: 480px) {
.csh2-tiles { flex-direction: column; align-items: center; }
.csh2-tile { width: 100%; max-width: 300px; }
}
/* ── Footer responsive ──────────────────────────────────── */
@media (max-width: 1100px) {
.sf-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.sf-brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.sf-tagline { max-width: 100%; margin-bottom: 0; }
.sf-socials { align-self: flex-start; margin-top: 4px; }
}
@media (max-width: 768px) {
.sf-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.sf-brand { grid-column: 1 / -1; flex-direction: column; gap: 0; }
.sf-tagline { max-width: 100%; }
}
@media (max-width: 480px) {
.sf-grid { grid-template-columns: 1fr; gap: 24px; }
.sf-brand { grid-column: auto; }
.sf-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ── Navbar mobile — HP kecil ───────────────────────────── */
@media (max-width: 480px) {
:root { --navbar-h: 60px; }
.nav-logo img { height: 40px; max-width: 130px; }
}