/* ============================================================
My Class Library — Joyful Mission Design
Option 4 · Baloo 2 + Lato · Cream / Yellow / Green
============================================================ */
/* Google Fonts — add this to your :
*/
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.mcl-site {
font-family: 'Lato', sans-serif;
background: #FFFDF7;
color: #2C1A00;
}
/* ── Colour Tokens ── */
:root {
--mcl-cream: #FFFDF7;
--mcl-yellow: #E8956D;
--mcl-yellow-lt: #F5EDE0;
--mcl-yellow-bd: #F7E6B8;
--mcl-green: #6BAFA8;
--mcl-green-lt: #B8DDD6;
--mcl-orange: #E8956D;
--mcl-navy: #2D3047;
--mcl-brown-dk: #2C1A00;
--mcl-brown-md: #6B4A1A;
--mcl-brown-lt: #854F0B;
--mcl-brown-xlt: #633806;
--mcl-brown-bg: #C4A882;
--mcl-nav-dark: #1E1200;
--mcl-cta-dark: #2C1A00;
--mcl-font-h: 'Baloo 2', cursive;
--mcl-font-b: 'Lato', sans-serif;
--mcl-radius-sm: 8px;
--mcl-radius-md: 16px;
--mcl-radius-lg: 24px;
--mcl-radius-pill: 32px;
}
/* ────────────────────────────────────────────────
NAV
──────────────────────────────────────────────── */
.mcl-nav {
background: var(--mcl-cream);
border-bottom: 2px solid var(--mcl-yellow-bd);
padding: 12px 48px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.mcl-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.mcl-logo img {
width: 102px;
height: 102px;
border-radius: 50%;
object-fit: cover;
}
.mcl-wordmark {
font-family: 'Fredoka One', cursive;
font-size: 26px;
font-weight: 400;
color: var(--mcl-navy);
line-height: 1.1;
white-space: nowrap;
}
.mcl-wordmark span {
color: var(--mcl-green);
}
.mcl-nav-links {
display: flex;
gap: 30px;
align-items: center;
list-style: none;
}
.mcl-nav-links a {
font-size: 14px;
color: var(--mcl-brown-md);
text-decoration: none;
font-weight: 700;
transition: color 0.2s;
}
.mcl-nav-links a:hover { color: var(--mcl-green); }
.mcl-btn-nav {
background: var(--mcl-orange);
color: #fff !important;
padding: 9px 22px;
border-radius: var(--mcl-radius-pill);
font-family: var(--mcl-font-h) !important;
font-weight: 700 !important;
box-shadow: 0 4px 0 #C06F48, 0 6px 12px rgba(0,0,0,0.12);
transition: transform 0.1s, box-shadow 0.1s;
cursor: pointer;
}
.mcl-btn-nav:hover { transform: translateY(1px); box-shadow: 0 3px 0 #C06F48, 0 4px 8px rgba(0,0,0,0.10); }
.mcl-btn-nav:active { transform: translateY(4px); box-shadow: 0 0 0 #C06F48, 0 1px 4px rgba(0,0,0,0.08); }
/* ────────────────────────────────────────────────
HERO
──────────────────────────────────────────────── */
.mcl-hero {
background: var(--mcl-cream);
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 580px;
align-items: center;
gap: 40px;
}
.mcl-hero-left { padding: 48px 0; }
.mcl-ribbon {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--mcl-yellow-lt);
border: 1.5px solid var(--mcl-yellow);
color: var(--mcl-brown-lt);
font-size: 12px;
font-weight: 700;
padding: 7px 16px;
border-radius: var(--mcl-radius-pill);
margin-bottom: 28px;
font-family: var(--mcl-font-h);
}
.mcl-hero h1 {
font-family: var(--mcl-font-h);
font-size: 50px;
font-weight: 800;
color: var(--mcl-brown-dk);
line-height: 1.1;
margin-bottom: 20px;
}
.mcl-hero h1 .mcl-accent-yellow { color: var(--mcl-yellow); }
.mcl-hero h1 .mcl-accent-green { color: var(--mcl-green); }
.mcl-hero-p {
font-size: 16px;
color: var(--mcl-brown-md);
line-height: 1.8;
max-width: 460px;
margin-bottom: 16px;
}
.mcl-manifesto {
background: var(--mcl-yellow-lt);
border-left: 4px solid var(--mcl-yellow);
border-radius: 0 12px 12px 0;
padding: 16px 20px;
margin-bottom: 32px;
font-size: 14px;
color: var(--mcl-brown-xlt);
line-height: 1.7;
font-style: italic;
}
.mcl-hero-btns {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 36px;
}
.mcl-btn-primary {
background: var(--mcl-orange);
color: #fff;
padding: 15px 30px;
border-radius: var(--mcl-radius-pill);
font-family: var(--mcl-font-h);
font-size: 16px;
font-weight: 800;
text-decoration: none;
display: inline-block;
box-shadow: 0 5px 0 #C06F48, 0 7px 14px rgba(0,0,0,0.12);
transition: transform 0.1s, box-shadow 0.1s;
cursor: pointer;
}
.mcl-btn-primary:hover { transform: translateY(2px); box-shadow: 0 3px 0 #C06F48, 0 4px 8px rgba(0,0,0,0.10); }
.mcl-btn-primary:active { transform: translateY(5px); box-shadow: 0 0 0 #C06F48, 0 1px 4px rgba(0,0,0,0.08); }
.mcl-btn-ghost {
color: var(--mcl-green);
font-size: 14px;
font-weight: 700;
text-decoration: none;
font-family: var(--mcl-font-h);
display: flex;
align-items: center;
gap: 6px;
}
.mcl-trust {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.mcl-trust-item {
font-size: 12px;
color: var(--mcl-brown-lt);
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.mcl-trust-dot {
width: 6px;
height: 6px;
background: var(--mcl-green);
border-radius: 50%;
flex-shrink: 0;
}
/* Phone mockup */
.mcl-hero-right {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 480px;
}
.mcl-sun-bg {
position: absolute;
width: 340px;
height: 340px;
border-radius: 50%;
background: #FFF8DC;
}
.mcl-phone {
position: relative;
z-index: 2;
background: #fff;
width: 270px;
border-radius: var(--mcl-radius-lg);
border: 3px solid var(--mcl-yellow-bd);
overflow: hidden;
box-shadow: 0 8px 32px rgba(44, 26, 0, 0.10);
}
.mcl-phone-head {
background: var(--mcl-green);
padding: 14px 18px 12px;
}
.mcl-phone-logo-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.mcl-phone-logo {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
background: #fff;
}
.mcl-phone-logo img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
.mcl-phone-title {
font-family: var(--mcl-font-h);
font-size: 14px;
font-weight: 800;
color: #fff;
}
.mcl-phone-search {
background: rgba(255,255,255,0.2);
border-radius: 10px;
padding: 7px 12px;
font-size: 11px;
color: rgba(255,255,255,0.85);
display: flex;
align-items: center;
gap: 6px;
}
.mcl-phone-body {
padding: 12px 16px;
background: var(--mcl-cream);
}
.mcl-phone-section {
font-size: 10px;
font-weight: 700;
color: var(--mcl-brown-lt);
margin-bottom: 8px;
font-family: var(--mcl-font-h);
}
.mcl-book-card {
background: #fff;
border: 1.5px solid var(--mcl-yellow-bd);
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 8px;
display: flex;
gap: 10px;
align-items: center;
}
.mcl-book-spine {
width: 26px;
height: 36px;
border-radius: 4px;
flex-shrink: 0;
}
.mcl-book-title {
font-size: 10px;
font-weight: 700;
color: var(--mcl-brown-dk);
font-family: var(--mcl-font-h);
}
.mcl-book-meta { font-size: 9px; color: var(--mcl-brown-md); }
.mcl-book-tag {
font-size: 8px;
background: var(--mcl-yellow-lt);
color: var(--mcl-brown-lt);
font-weight: 700;
padding: 2px 7px;
border-radius: 8px;
margin-top: 3px;
display: inline-block;
}
.mcl-phone-more {
margin-top: 10px;
text-align: center;
font-size: 10px;
color: var(--mcl-green);
font-weight: 700;
font-family: var(--mcl-font-h);
}
/* ────────────────────────────────────────────────
MISSION BAND
──────────────────────────────────────────────── */
.mcl-mission {
background: var(--mcl-green);
padding: 72px 48px;
text-align: center;
}
.mcl-mission-eyebrow {
font-size: 12px;
font-weight: 700;
color: var(--mcl-green-lt);
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--mcl-font-h);
margin-bottom: 16px;
}
.mcl-mission-headline {
font-family: var(--mcl-font-h);
font-size: 44px;
font-weight: 800;
color: #fff;
line-height: 1.15;
max-width: 780px;
margin: 0 auto 20px;
}
.mcl-mission-sub {
font-size: 16px;
color: var(--mcl-green-lt);
line-height: 1.8;
max-width: 620px;
margin: 0 auto 56px;
}
.mcl-feat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.mcl-feat-card {
background: rgba(255,255,255,0.1);
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: 20px;
padding: 28px 22px;
text-align: left;
}
.mcl-feat-icon {
width: 44px;
height: 44px;
background: rgba(255,255,255,0.15);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.mcl-feat-title {
font-family: var(--mcl-font-h);
font-size: 16px;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
}
.mcl-feat-desc {
font-size: 13px;
color: var(--mcl-green-lt);
line-height: 1.65;
}
/* ────────────────────────────────────────────────
TESTIMONIALS
──────────────────────────────────────────────── */
.mcl-spark {
background: var(--mcl-cream);
padding: 72px 48px;
}
.mcl-spark-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 48px;
}
.mcl-spark-headline {
font-family: var(--mcl-font-h);
font-size: 40px;
font-weight: 800;
color: var(--mcl-brown-dk);
line-height: 1.15;
}
.mcl-spark-headline .mcl-accent-yellow { color: var(--mcl-yellow); }
.mcl-spark-body {
font-size: 15px;
color: var(--mcl-brown-md);
line-height: 1.8;
}
.mcl-testi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.mcl-testi {
background: #fff;
border: 2px solid var(--mcl-yellow-bd);
border-radius: 20px;
padding: 28px 24px;
}
.mcl-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
}
.mcl-testi-quote {
font-size: 14px;
color: var(--mcl-brown-dk);
line-height: 1.75;
margin-bottom: 16px;
font-style: italic;
}
.mcl-testi-author {
display: flex;
align-items: center;
gap: 10px;
}
.mcl-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mcl-font-h);
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
}
.mcl-author-name {
font-size: 13px;
font-weight: 700;
color: var(--mcl-brown-dk);
font-family: var(--mcl-font-h);
}
.mcl-author-role {
font-size: 11px;
color: var(--mcl-brown-lt);
}
/* ────────────────────────────────────────────────
CTA
──────────────────────────────────────────────── */
.mcl-cta {
background: var(--mcl-cta-dark);
padding: 72px 48px;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.mcl-cta h2 {
font-family: var(--mcl-font-h);
font-size: 40px;
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: 12px;
}
.mcl-cta h2 .mcl-accent-yellow { color: var(--mcl-yellow); }
.mcl-cta-p {
font-size: 15px;
color: var(--mcl-brown-bg);
line-height: 1.7;
}
.mcl-cta-btns {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-end;
}
.mcl-btn-cta-primary {
background: var(--mcl-orange);
color: #fff;
padding: 15px 30px;
border-radius: var(--mcl-radius-pill);
font-family: var(--mcl-font-h);
font-size: 15px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
text-align: center;
box-shadow: 0 5px 0 #C06F48, 0 7px 14px rgba(0,0,0,0.12);
transition: transform 0.1s, box-shadow 0.1s;
cursor: pointer;
}
.mcl-btn-cta-primary:hover { transform: translateY(2px); box-shadow: 0 3px 0 #C06F48, 0 4px 8px rgba(0,0,0,0.10); }
.mcl-btn-cta-primary:active { transform: translateY(5px); box-shadow: 0 0 0 #C06F48, 0 1px 4px rgba(0,0,0,0.08); }
.mcl-btn-cta-secondary {
background: rgba(255,255,255,0.07);
color: #fff;
padding: 15px 30px;
border-radius: var(--mcl-radius-pill);
font-family: var(--mcl-font-h);
font-size: 15px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
text-align: center;
box-shadow: 0 5px 0 rgba(255,255,255,0.1), 0 7px 14px rgba(0,0,0,0.15);
transition: transform 0.1s, box-shadow 0.1s;
cursor: pointer;
}
.mcl-btn-cta-secondary:hover { transform: translateY(2px); box-shadow: 0 3px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.12); }
.mcl-btn-cta-secondary:active { transform: translateY(5px); box-shadow: 0 0 0 rgba(255,255,255,0.1), 0 1px 4px rgba(0,0,0,0.08); }
/* ────────────────────────────────────────────────
FOOTER
──────────────────────────────────────────────── */
.mcl-footer {
background: var(--mcl-nav-dark);
padding: 28px 48px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.mcl-footer-copy {
font-size: 12px;
color: var(--mcl-brown-md);
}
.mcl-footer-links {
display: flex;
gap: 24px;
list-style: none;
}
.mcl-footer-links a {
font-size: 12px;
color: var(--mcl-brown-md);
text-decoration: none;
transition: color 0.2s;
}
.mcl-footer-links a:hover { color: var(--mcl-yellow); }
/* ────────────────────────────────────────────────
APP DEMO CAROUSEL
──────────────────────────────────────────────── */
.mcl-demo {
background: var(--mcl-yellow-lt);
padding: 72px 48px;
text-align: center;
overflow: hidden;
}
.mcl-demo-eyebrow {
font-size: 12px;
font-weight: 700;
color: var(--mcl-brown-lt);
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--mcl-font-h);
margin-bottom: 12px;
}
.mcl-demo-headline {
font-family: var(--mcl-font-h);
font-size: 40px;
font-weight: 800;
color: var(--mcl-brown-dk);
line-height: 1.15;
margin-bottom: 48px;
}
.mcl-demo-carousel {
position: relative;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.mcl-demo-track {
display: flex;
gap: 24px;
width: max-content;
animation: mcl-scroll 30s linear infinite;
}
.mcl-demo-carousel:hover .mcl-demo-track {
animation-play-state: paused;
}
.mcl-demo-slide {
flex-shrink: 0;
width: 210px;
}
.mcl-demo-slide img {
width: 100%;
height: auto;
border-radius: 18px;
border: 3px solid var(--mcl-yellow-bd);
box-shadow: 0 8px 32px rgba(44, 26, 0, 0.10);
display: block;
}
.mcl-demo-caption {
font-family: var(--mcl-font-h);
font-size: 13px;
font-weight: 700;
color: var(--mcl-brown-md);
margin-top: 12px;
text-align: center;
}
/* Infinite horizontal scroll: 6 original slides + 6 duplicates.
Translate by exactly the width of the 6 originals (6 × 210px + 6 × 24px gap = 1404px). */
@keyframes mcl-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-1404px); }
}
/* ────────────────────────────────────────────────
RESPONSIVE
──────────────────────────────────────────────── */
@media (max-width: 900px) {
.mcl-nav { padding: 0 24px; }
.mcl-nav-links { gap: 16px; }
.mcl-hero {
grid-template-columns: 1fr;
padding: 40px 24px;
min-height: unset;
}
.mcl-hero h1 { font-size: 36px; }
.mcl-hero-right { display: none; }
.mcl-mission { padding: 48px 24px; }
.mcl-mission-headline { font-size: 30px; }
.mcl-feat-grid { grid-template-columns: 1fr; }
.mcl-spark { padding: 48px 24px; }
.mcl-spark-top { grid-template-columns: 1fr; gap: 20px; }
.mcl-testi-grid { grid-template-columns: 1fr; }
.mcl-cta {
grid-template-columns: 1fr;
padding: 48px 24px;
text-align: center;
}
.mcl-cta-btns { align-items: center; }
.mcl-demo { padding: 48px 24px; }
.mcl-demo-headline { font-size: 28px; }
.mcl-footer { padding: 24px; flex-direction: column; text-align: center; }
}