/* ============================================================
LevelED Landing Page
============================================================ */
/* ============================================================
LevelED — Colors & Type
Derived from the LevelED MVP codebase (frontend/leveled-pixi/src/ui/tokens.ts)
and the Figma design spec (docs/design-spec.md).
------------------------------------------------------------ */
/* Nunito — primary game font (Black 900 / ExtraBold 800 / Bold 700 /
SemiBold 600 / Regular 400). Loaded from Google Fonts for offline-safe use. */
/* latin-ext */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/nunito-400-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/nunito-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/nunito-600-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/nunito-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("assets/fonts/nunito-700-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("assets/fonts/nunito-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("assets/fonts/nunito-800-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("assets/fonts/nunito-800-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("assets/fonts/nunito-900-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("assets/fonts/nunito-900-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic (Bulgarian page) — one variable font file covers every weight 400–900 */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("assets/fonts/nunito-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
/* ───────────────── Brand / Primary ───────────────── */
--color-primary-blue: #3A7BD5; /* CTAs, links, active nav */
--color-primary-blue-dark: #1565C0; /* pressed / shadow */
--color-primary-blue-deep: #1A6FA8; /* H1 hero text on light bg */
--color-primary-yellow: #F5C518; /* yellow CTA (default game button) */
--color-primary-orange: #F5A623; /* primary registration CTA */
--color-primary-orange-dark: #E8921A; /* orange gradient end */
--color-primary-gold: #E8B400; /* yellow gradient end */
--color-primary-gold-deep: #c28507; /* drop shadow under yellow buttons */
/* ───────────────── Semantic ───────────────── */
--color-success: #66BB6A;
--color-success-dark: #388E3C;
--color-warning: #FF9800;
--color-warning-dark: #E65100;
--color-error: #EF5350;
--color-error-dark: #B71C1C;
--color-info: #29B6F6;
/* ───────────────── Spin-wheel segments ───────────────── */
--color-wheel-blue: #4FC3F7;
--color-wheel-sky: #29B6F6;
--color-wheel-red: #EF5350;
--color-wheel-teal: #26C6DA;
--color-wheel-green: #66BB6A;
--color-wheel-purple: #AB47BC;
--color-wheel-yellow: #F5C518;
--color-wheel-orange: #FF9800;
--color-wheel-red-orange: #FF7043;
/* ───────────────── Arena stat bars ───────────────── */
--color-stat-care: #F48FB1; /* pink */
--color-stat-style: #CE93D8; /* purple */
--color-stat-popularity: #FFE082; /* yellow */
--color-stat-discipline: #90CAF9; /* blue */
--color-stat-confidence: #A5D6A7; /* green */
/* ───────────────── Surfaces ───────────────── */
--color-bg-sky-from: #87CEEB;
--color-bg-sky-to: #E0F4FF;
--color-bg-sky: linear-gradient(180deg, #87CEEB 0%, #E0F4FF 100%);
--color-surface-frosted: rgba(255, 255, 255, 0.75);
--color-surface-frosted-strong: rgba(255, 255, 255, 0.88);
--color-surface-card: #FFFFFF;
--color-surface-input: #EAF4FE; /* pale blue input fill */
--color-surface-cream: #FFF8E1; /* tooltip / best-answer cream */
--color-surface-overlay: rgba(0, 0, 0, 0.40);
--color-border-white: rgba(255, 255, 255, 0.60);
--color-border-gold: #F5C518;
--color-border-input: rgba(58, 123, 213, 0.15);
/* ───────────────── Text ───────────────── */
--color-text-primary: #1A1A2E;
--color-text-secondary: #5C6B7A;
--color-text-placeholder: #9E9E9E;
--color-text-on-primary: #FFFFFF;
--color-text-on-yellow: #3D2800; /* dark brown on yellow pills */
--color-text-link: #3A7BD5;
--color-text-gold: #B8860B;
/* ───────────────── Teacher portal palette ───────────────── */
--color-teacher-bg: #F0F0F8;
--color-teacher-surface: #FFFFFF;
--color-teacher-border: #E0E0EE;
--color-teacher-accent: #3A7BD5;
--color-teacher-text: #2C2C4E;
--color-teacher-row-alt: #F5F5FF;
/* ───────────────── Type — base ───────────────── */
--font-family: 'Nunito', system-ui, -apple-system, sans-serif;
--font-display: 'Nunito', system-ui, sans-serif;
/* Weights */
--weight-black: 900;
--weight-extrabold: 800;
--weight-bold: 700;
--weight-semibold: 600;
--weight-regular: 400;
/* Type scale — matches docs/design-spec.md 3.2 */
--font-hero-size: 64px; --font-hero-lh: 1.1;
--font-title-lg-size: 48px; --font-title-lg-lh: 1.2;
--font-title-md-size: 36px; --font-title-md-lh: 1.2;
--font-title-sm-size: 26px; --font-title-sm-lh: 1.3;
--font-body-lg-size: 20px; --font-body-lg-lh: 1.5;
--font-body-md-size: 18px; --font-body-md-lh: 1.5;
--font-body-sm-size: 15px; --font-body-sm-lh: 1.4;
--font-button-size: 20px; --font-button-lh: 1;
--font-nav-size: 14px; --font-nav-lh: 1;
--font-tooltip-size: 20px; --font-tooltip-lh: 1.4;
/* ───────────────── Spacing ───────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 80px;
/* ───────────────── Radii ───────────────── */
--radius-sm: 8px;
--radius-card: 20px;
--radius-card-lg: 30px;
--radius-pill: 50px;
--radius-circle: 50%;
/* ───────────────── Shadows / glow ───────────────── */
--shadow-card: 0 4px 16px rgba(0,0,0,0.12);
--shadow-modal: 0 8px 32px rgba(0,0,0,0.24);
--shadow-button: 0 2px 8px rgba(0,0,0,0.20);
--shadow-button-yellow: 0 5px 0 var(--color-primary-gold-deep), 0 8px 20px rgba(245,197,24,0.45);
--shadow-button-orange: 0 4px 14px rgba(245,166,35,0.38);
--shadow-glow-gold: 0 0 24px rgba(245,197,24,0.6);
--shadow-glow-blue: 0 0 16px rgba(58,123,213,0.5);
--shadow-frosted: 0 8px 40px rgba(0,0,0,0.18);
}
/* ============================================================
Semantic type roles — apply these to elements directly.
------------------------------------------------------------ */
html, body {
font-family: var(--font-family);
color: var(--color-text-primary);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.lvl-hero,
h1.lvl-display {
font-family: var(--font-display);
font-weight: var(--weight-black);
font-size: var(--font-hero-size);
line-height: var(--font-hero-lh);
letter-spacing: -0.01em;
color: var(--color-primary-blue-deep);
text-shadow: 0 2px 0 rgba(255,255,255,0.8);
margin: 0;
}
.lvl-title-lg, h1 {
font-family: var(--font-display);
font-weight: var(--weight-black);
font-size: var(--font-title-lg-size);
line-height: var(--font-title-lg-lh);
color: var(--color-primary-blue-deep);
margin: 0;
}
.lvl-title-md, h2 {
font-family: var(--font-display);
font-weight: var(--weight-extrabold);
font-size: var(--font-title-md-size);
line-height: var(--font-title-md-lh);
color: var(--color-text-primary);
margin: 0;
}
.lvl-title-sm, h3 {
font-family: var(--font-display);
font-weight: var(--weight-extrabold);
font-size: var(--font-title-sm-size);
line-height: var(--font-title-sm-lh);
color: var(--color-text-primary);
margin: 0;
}
.lvl-body-lg {
font-family: var(--font-family);
font-weight: var(--weight-semibold);
font-size: var(--font-body-lg-size);
line-height: var(--font-body-lg-lh);
color: var(--color-text-primary);
}
.lvl-body, p {
font-family: var(--font-family);
font-weight: var(--weight-regular);
font-size: var(--font-body-md-size);
line-height: var(--font-body-md-lh);
color: var(--color-text-primary);
}
.lvl-caption, small {
font-family: var(--font-family);
font-weight: var(--weight-regular);
font-size: var(--font-body-sm-size);
line-height: var(--font-body-sm-lh);
color: var(--color-text-secondary);
}
.lvl-button-label {
font-family: var(--font-family);
font-weight: var(--weight-extrabold);
font-size: var(--font-button-size);
line-height: var(--font-button-lh);
letter-spacing: 0.01em;
}
.lvl-nav-label {
font-family: var(--font-family);
font-weight: var(--weight-semibold);
font-size: var(--font-nav-size);
line-height: var(--font-nav-lh);
text-transform: none;
}
.lvl-tooltip {
font-family: var(--font-family);
font-weight: var(--weight-semibold);
font-size: var(--font-tooltip-size);
line-height: var(--font-tooltip-lh);
color: var(--color-text-primary);
}
.lvl-link {
color: var(--color-text-link);
font-weight: var(--weight-bold);
text-decoration: none;
}
.lvl-link:hover { text-decoration: underline; }
/* Helper used across preview cards */
.lvl-bg-sky { background: var(--color-bg-sky); }
.lvl-frosted {
background: var(--color-surface-frosted-strong);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 2px solid var(--color-border-white);
border-radius: var(--radius-card-lg);
box-shadow: var(--shadow-frosted);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* Horizontal overflow is clipped on (see `html { overflow-x: hidden }`).
Keep overflow visible — `overflow-x:hidden` here forces computed
`overflow-y:auto`, making a scroll container that breaks every
`position: sticky` descendant (e.g. the "How it works" gap visual). */
background: #FBFCFF;
}
img { display: block; max-width: 100%; }
/* ───────────────── Reveal animation ───────────────── */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in {
opacity: 1;
transform: none;
}
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
/* ───────────────── Nav ───────────────── */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 40px;
background: rgba(255,255,255,0.78);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(58,123,213,0.08);
}
.nav-logo img { height: 42px; }
.nav-links {
display: flex;
gap: 36px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
text-decoration: none;
font-weight: 700;
color: var(--color-text-primary);
font-size: 15px;
transition: color .2s;
}
.nav-links a:hover { color: var(--color-primary-blue); }
.nav-actions {
display: flex;
gap: 12px;
align-items: center;
}
/* Language switch — pill segmented control (BG | EN) */
.lang-switch {
display: inline-flex;
padding: 3px;
border-radius: 50px;
background: rgba(58,123,213,0.08);
border: 1px solid rgba(58,123,213,0.18);
}
.lang-switch a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 32px;
padding: 0 10px;
border-radius: 50px;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.04em;
text-decoration: none;
color: var(--color-primary-blue-deep);
transition: background .2s, color .2s;
}
.lang-switch a:hover { color: var(--color-primary-blue); }
.lang-switch a[aria-current="page"] {
background: var(--color-primary-blue);
color: #fff;
box-shadow: 0 2px 6px rgba(58,123,213,0.35);
}
/* ───────────────── Buttons ───────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
border-radius: 50px;
border: none;
font-family: var(--font-family);
font-weight: 800;
font-size: 16px;
cursor: pointer;
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease;
letter-spacing: 0.01em;
white-space: nowrap;
}
.btn-yellow {
background: linear-gradient(135deg, #F5C518, #E8B400);
color: var(--color-text-on-yellow);
box-shadow: 0 5px 0 var(--color-primary-gold-deep), 0 8px 20px rgba(245,197,24,0.45);
}
.btn-yellow:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--color-primary-gold-deep), 0 10px 22px rgba(245,197,24,0.5); }
.btn-yellow:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--color-primary-gold-deep), 0 4px 12px rgba(245,197,24,0.4); }
.btn-orange {
background: linear-gradient(135deg, #F5A623, #E8921A);
color: white;
box-shadow: 0 5px 0 #b96f10, 0 8px 20px rgba(245,166,35,0.4);
}
.btn-orange:hover { transform: translateY(-1px); }
.btn-orange:active { transform: translateY(3px); box-shadow: 0 2px 0 #b96f10; }
.btn-blue {
background: var(--color-primary-blue);
color: white;
box-shadow: 0 4px 0 var(--color-primary-blue-dark), 0 6px 18px rgba(58,123,213,0.3);
}
.btn-blue:hover { transform: translateY(-1px); }
.btn-blue:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-primary-blue-dark); }
.btn-outline {
background: transparent;
color: var(--color-primary-blue);
border: 2px solid var(--color-primary-blue);
box-shadow: none;
}
.btn-outline:hover { background: rgba(58,123,213,0.08); }
.btn-lg { padding: 18px 36px; font-size: 18px; }
.btn-xl { padding: 22px 44px; font-size: 20px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
/* ───────────────── Hero ───────────────── */
.hero {
position: relative;
min-height: 100vh;
padding: 60px 40px 100px;
overflow: hidden;
background:
radial-gradient(ellipse 1100px 600px at 50% -10%, rgba(255,237,180,0.55), transparent 60%),
linear-gradient(180deg, #87CEEB 0%, #B5DCEF 45%, #E0F4FF 100%);
}
.hero-bg-img {
position: absolute;
inset: 0;
background-image: url("assets/img-01.webp");
background-size: cover;
background-position: center bottom;
opacity: 0.3;
pointer-events: none;
}
.hero-clouds {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.cloud {
position: absolute;
background: rgba(255,255,255,0.9);
border-radius: 100px;
filter: blur(2px);
animation: drift 60s linear infinite;
}
.cloud::before, .cloud::after {
content: "";
position: absolute;
background: rgba(255,255,255,0.9);
border-radius: 100px;
}
.cloud.c1 { width: 180px; height: 40px; top: 12%; left: -200px; animation-duration: 80s; }
.cloud.c1::before { width: 90px; height: 70px; top: -28px; left: 40px; }
.cloud.c2 { width: 240px; height: 50px; top: 22%; left: -300px; animation-duration: 110s; animation-delay: -30s; opacity: 0.7; }
.cloud.c2::before { width: 120px; height: 90px; top: -40px; left: 60px; }
.cloud.c3 { width: 140px; height: 36px; top: 6%; left: -160px; animation-duration: 95s; animation-delay: -50s; opacity: 0.8; }
.cloud.c3::before { width: 70px; height: 55px; top: -22px; left: 30px; }
@keyframes drift {
to { transform: translateX(calc(100vw + 400px)); }
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 60px;
align-items: center;
min-height: calc(100vh - 200px);
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 8px;
background: white;
border-radius: 50px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
font-size: 13px;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 28px;
}
.hero-eyebrow .pill {
background: linear-gradient(135deg, #F5C518, #E8B400);
color: var(--color-text-on-yellow);
padding: 4px 12px;
border-radius: 50px;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.04em;
}
.hero h1 {
font-size: 72px; /* desktop default (was an inline style on the element) */
font-weight: 900;
line-height: 0.96;
color: var(--color-primary-blue-deep);
margin: 0 0 24px;
text-shadow: 0 2px 0 rgba(255,255,255,0.85);
letter-spacing: -0.02em;
}
.hero h1 .accent {
background: linear-gradient(135deg, #F5A623, #F5C518);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
display: inline-block;
}
.hero h1 .accent::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 8px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 100% 100%;
}
.hero p.lead {
font-size: 20px;
font-weight: 700;
color: var(--color-text-primary);
text-shadow: 0 1px 2px rgba(255,255,255,0.85);
line-height: 1.5;
margin: 0 0 36px;
max-width: 540px;
}
.hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
}
.hero-trust {
margin-top: 32px;
display: flex;
align-items: center;
gap: 16px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-secondary);
}
.avatar-stack {
display: flex;
}
.avatar-stack span {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid white;
margin-left: -10px;
background-size: cover;
background-position: center;
display: inline-block;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
padding: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.avatar-stack span img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.avatar-stack span:first-child { margin-left: 0; }
.avatar-stack .a1 { background: linear-gradient(135deg,#F5A623,#E8921A); }
.avatar-stack .a2 { background: linear-gradient(135deg,#66BB6A,#388E3C); }
.avatar-stack .a3 { background: linear-gradient(135deg,#3A7BD5,#1565C0); }
.avatar-stack .a4 { background: linear-gradient(135deg,#AB47BC,#7B1FA2); }
.avatar-stack .a5 { background: linear-gradient(135deg,#F5C518,#E8B400); }
.hero-trust .stars { color: #F5C518; letter-spacing: 2px; font-size: 16px; }
/* ───────────────── Hero — visual side ───────────────── */
.hero-visual {
position: relative;
height: 620px;
align-self: end;
}
/* Stage = a clean canvas for the mascot */
.hero-stage {
position: absolute;
inset: 0;
overflow: visible;
}
/* Soft ground line / horizon — gives a sense of perspective for the walk */
.mascot-ground {
display: none;
position: absolute;
left: -5%;
right: -5%;
bottom: 30px;
height: 60px;
background:
radial-gradient(ellipse 70% 100% at 50% 50%, rgba(58,123,213,0.10), transparent 70%);
pointer-events: none;
}
/* Wrapper plants the mascot on the ground at the bottom of the hero scene */
.mascot-wrap {
position: absolute;
top: auto;
bottom: 30px;
left: 50%;
width: 440px;
max-width: 92%;
height: auto;
transform: translateX(-50%);
opacity: 1;
z-index: 5;
}
/* Gentle breathing only — no swing, no rotation */
.hero-mascot {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(58,123,213,0.25));
transform-origin: 50% 92%;
animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.015); }
}
/* Image has its own baked ground shadow */
.mascot-shadow {
display: none;
}
/* Mascot-initiated speech bubble — pops in after the walk-in completes */
.mascot-bubble {
position: absolute;
top: auto;
bottom: 482px;
left: 50%;
transform: translateX(-50%) translateY(20px) scale(0.6);
background: white;
border: 2px solid rgba(255,255,255,0.7);
padding: 20px 28px;
border-radius: 26px;
box-shadow: 0 12px 36px rgba(0,0,0,0.18);
font-weight: 800;
font-size: 20px;
color: var(--color-text-primary);
z-index: 8;
max-width: 340px;
text-align: left;
cursor: pointer;
opacity: 0;
pointer-events: none;
font-family: var(--font-family);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mascot-bubble.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
animation: bubble-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mascot-bubble:hover {
transform: translateX(-50%) translateY(-2px) scale(1);
box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}
.mascot-bubble:active {
transform: translateX(-50%) translateY(1px) scale(0.98);
}
@keyframes bubble-pop {
0% { transform: translateX(-50%) translateY(20px) scale(0.6); opacity: 0; }
60% { transform: translateX(-50%) translateY(-4px) scale(1.05); opacity: 1; }
100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
.mascot-bubble .bub-tail {
position: absolute;
left: 50%;
bottom: -10px;
width: 18px;
height: 18px;
margin-left: -9px;
background: white;
border-right: 2px solid rgba(255,255,255,0.7);
border-bottom: 2px solid rgba(255,255,255,0.7);
transform: rotate(45deg);
border-bottom-right-radius: 4px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.04);
}
.mascot-bubble .bub-text {
display: block;
line-height: 1.35;
}
.mascot-bubble .bub-cta {
display: block;
margin-top: 8px;
font-size: 13px;
font-weight: 800;
color: var(--color-primary-blue);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ───────────────── Trust strip ───────────────── */
.trust-strip {
background: white;
border-top: 1px solid rgba(0,0,0,0.04);
border-bottom: 1px solid rgba(0,0,0,0.04);
padding: 28px 40px;
}
.trust-strip-inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
align-items: center;
}
.trust-item {
display: flex;
align-items: center;
gap: 14px;
}
.trust-item .num {
font-size: 36px;
font-weight: 900;
color: var(--color-primary-blue-deep);
line-height: 1;
}
.trust-item .lbl {
font-size: 13px;
color: var(--color-text-secondary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ───────────────── Section base ───────────────── */
section.block {
position: relative;
padding: 120px 40px;
}
.container {
max-width: 1240px;
margin: 0 auto;
position: relative;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-surface-cream);
border: 2px solid var(--color-border-gold);
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 900;
color: var(--color-text-gold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 20px;
}
.section-title {
font-size: clamp(36px, 4.6vw, 60px);
font-weight: 900;
color: var(--color-primary-blue-deep);
line-height: 1.05;
margin: 0 0 18px;
letter-spacing: -0.02em;
text-shadow: 0 2px 0 rgba(255,255,255,0.5);
}
.section-lead {
font-size: 20px;
font-weight: 600;
color: var(--color-text-secondary);
max-width: 640px;
margin: 0 0 60px;
line-height: 1.5;
}
/* ───────────────── Sticky gap-based reveal ───────────────── */
.gap-section {
/* start where the problem section ends (#F7FAFF) so the boundary is seamless */
background: linear-gradient(180deg, #F7FAFF 0%, #F4F8FF 100%);
}
/* Tighten the problem→how transition (override section.block's 120px padding) */
.block.problem-section { padding-bottom: 36px; }
.block.gap-section { padding-top: 44px; }
@media (max-width: 767px) {
.block.problem-section { padding-bottom: 16px; }
.block.gap-section { padding-top: 28px; }
.problem-bridge { margin-top: 40px; }
}
.gap-sticky {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: stretch;
}
.gap-text-col {
position: relative;
}
.gap-step {
padding: 80px 0;
border-left: 3px solid rgba(58,123,213,0.15);
padding-left: 36px;
position: relative;
opacity: 0.35;
transition: opacity .5s ease;
}
.gap-step.active { opacity: 1; }
.gap-step::before {
content: attr(data-num);
position: absolute;
left: -22px;
top: 80px;
width: 40px;
height: 40px;
background: var(--color-primary-blue);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 18px;
box-shadow: 0 4px 12px rgba(58,123,213,0.4);
transition: transform .3s ease;
}
.gap-step.active::before {
background: linear-gradient(135deg,#F5C518,#E8B400);
color: var(--color-text-on-yellow);
transform: scale(1.15);
box-shadow: 0 6px 18px rgba(245,197,24,0.5);
}
.gap-step h3 {
font-size: 32px;
font-weight: 900;
color: var(--color-primary-blue-deep);
margin: 0 0 12px;
}
.gap-step p {
font-size: 17px;
color: var(--color-text-secondary);
font-weight: 500;
margin: 0;
line-height: 1.55;
}
.gap-visual-col {
position: relative;
height: 100%;
}
.gap-visual {
/* The card itself is the sticky element so it stays vertically centred in the
viewport beside every step. Pinned inside the full-height column, its sticky
range covers the whole text column (steps 1–4) instead of releasing early. */
position: sticky;
top: calc((100vh - 580px) / 2);
width: 100%;
height: 580px;
border-radius: 30px;
background: linear-gradient(180deg, #87CEEB 0%, #E0F4FF 100%);
overflow: hidden;
box-shadow: 0 20px 60px rgba(58,123,213,0.25);
border: 2px solid white;
}
.gap-visual-bg {
position: absolute;
inset: 0;
background-image: url("assets/img-01.webp");
background-size: cover;
background-position: center;
opacity: 0.7;
}
.gap-frame {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .6s ease, transform .6s ease;
transform: scale(0.96);
padding: 30px;
}
.gap-frame.show { opacity: 1; transform: scale(1); }
/* Frame 1 — Diagnostic */
.diag-card {
background: white;
border-radius: 20px;
padding: 28px 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
width: 100%;
max-width: 420px;
}
.diag-card .qhead {
font-size: 13px;
font-weight: 800;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.diag-card .qbody {
font-size: 30px;
font-weight: 900;
color: var(--color-text-primary);
margin-bottom: 24px;
}
.diag-opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.diag-opt {
background: #EAF4FE;
border: 2px solid transparent;
padding: 18px;
border-radius: 14px;
font-weight: 800;
font-size: 22px;
text-align: center;
color: var(--color-text-primary);
position: relative;
}
.diag-opt.correct { background: #E8F5E9; border-color: var(--color-success); color: var(--color-success-dark); }
.diag-opt.wrong { background: #FFEBEE; border-color: var(--color-error); color: var(--color-error-dark); }
.diag-opt.correct::after { content: "✓"; position: absolute; top: 6px; right: 10px; font-size: 14px; }
.diag-opt.wrong::after { content: "✗"; position: absolute; top: 6px; right: 10px; font-size: 14px; }
/* Frame 2 — Maya's Brain Map (image) */
.brain-map-img {
width: 100%;
max-width: 100%;
max-height: 100%;
height: auto;
object-fit: contain;
border-radius: 20px;
box-shadow: 0 14px 40px rgba(58,123,213,0.22);
border: 2px solid rgba(255,255,255,0.7);
background: white;
}
/* Frame 3 — Practice */
.practice-card {
background: white;
border-radius: 20px;
padding: 28px 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
width: 100%;
max-width: 440px;
}
.practice-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; }
.practice-head .lvl-tag { background: var(--color-primary-blue); color: white; padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 900; }
.practice-head .xp { color: var(--color-text-gold); font-weight: 900; font-size: 14px; }
.problem {
font-size: 44px;
font-weight: 900;
text-align: center;
color: var(--color-primary-blue-deep);
padding: 20px 0;
background: #EAF4FE;
border-radius: 14px;
margin-bottom: 16px;
}
.your-answer {
background: white;
border: 2px solid var(--color-primary-blue);
padding: 14px;
border-radius: 12px;
font-size: 24px;
font-weight: 900;
text-align: center;
color: var(--color-primary-blue-deep);
margin-bottom: 14px;
}
.hint-row {
background: var(--color-surface-cream);
border: 2px solid var(--color-border-gold);
border-radius: 12px;
padding: 12px 14px;
font-size: 13px;
font-weight: 700;
color: var(--color-text-on-yellow);
display: flex;
gap: 8px;
}
/* Frame 4 — Reward */
.reward-burst {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
}
.reward-burst .chest-img {
width: 200px;
filter: drop-shadow(0 18px 36px rgba(245,197,24,0.5));
animation: chest-pulse 2.4s ease-in-out infinite;
}
@keyframes chest-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.reward-burst::before {
content: "";
position: absolute;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(245,197,24,0.55), transparent 70%);
z-index: -1;
animation: glow-pulse 2.4s ease-in-out infinite;
}
@keyframes glow-pulse {
0%, 100% { opacity: .65; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.05); }
}
.reward-burst h4 {
font-size: 32px;
font-weight: 900;
color: white;
margin: 0;
text-shadow: 0 4px 0 rgba(0,0,0,0.18), 0 0 24px rgba(255,255,255,0.6);
}
.reward-burst .reward-chips {
display: flex;
gap: 10px;
}
.reward-chip {
background: white;
padding: 8px 14px;
border-radius: 50px;
font-weight: 900;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
color: var(--color-text-primary);
}
.reward-chip img { width: 20px; height: 20px; }
.sparkle {
position: absolute;
width: 18px;
height: 18px;
background: white;
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
animation: spark 2s ease-in-out infinite;
}
@keyframes spark {
0%, 100% { opacity: 0; transform: scale(0.6); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ───────────────── Progress section ───────────────── */
.progress-section {
background:
radial-gradient(ellipse 800px 500px at 90% 20%, rgba(245,197,24,0.18), transparent),
radial-gradient(ellipse 800px 500px at 10% 80%, rgba(58,123,213,0.12), transparent),
#FCFDFF;
}
.dashboard-mock {
background: white;
border-radius: 30px;
box-shadow: 0 30px 80px rgba(58,123,213,0.2);
overflow: hidden;
border: 1px solid rgba(58,123,213,0.08);
transform: perspective(1800px) rotateX(2deg);
}
.dash-image {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
box-shadow: 0 30px 80px rgba(58,123,213,0.2);
}
.dash-head {
background: linear-gradient(180deg, #F4F8FF, #FFFFFF);
padding: 18px 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.dash-head .dots { display: flex; gap: 6px; }
.dash-head .dots span { width: 10px; height: 10px; border-radius: 50%; background: #E0E0EE; }
.dash-head .dots span:first-child { background: #EF5350; }
.dash-head .dots span:nth-child(2) { background: #F5C518; }
.dash-head .dots span:nth-child(3) { background: #66BB6A; }
.dash-head .tabbar { display: flex; gap: 8px; }
.dash-head .tab {
font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 50px;
background: #F4F8FF; color: var(--color-text-secondary);
}
.dash-head .tab.active { background: var(--color-primary-blue); color: white; }
.dash-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
}
.dash-side {
background: #FAFBFF;
padding: 24px 18px;
border-right: 1px solid rgba(0,0,0,0.04);
}
.dash-kid {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.dash-kid .av {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #F5A623, #E8921A);
display: flex; align-items: center; justify-content: center;
font-weight: 900; color: white;
}
.dash-kid .n { font-weight: 900; font-size: 15px; }
.dash-kid .lvl { font-size: 11px; color: var(--color-text-secondary); font-weight: 700; }
.dash-menu { display: flex; flex-direction: column; gap: 4px; }
.dash-menu .item {
padding: 10px 12px; border-radius: 12px;
font-size: 13px; font-weight: 700; color: var(--color-text-secondary);
display: flex; align-items: center; gap: 8px;
}
.dash-menu .item.active { background: white; color: var(--color-primary-blue); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dash-menu .item .ico { width: 18px; height: 18px; border-radius: 4px; background: #E0E0EE; display:inline-block; }
.dash-menu .item.active .ico { background: var(--color-primary-blue); }
.dash-main {
padding: 24px 26px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.dash-card {
background: white;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 16px;
padding: 16px;
}
.dash-card.span4 { grid-column: span 4; }
.dash-card.span6 { grid-column: span 6; }
.dash-card.span8 { grid-column: span 8; }
.dash-card.span12 { grid-column: span 12; }
.dash-card .ctitle {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
font-weight: 800;
margin-bottom: 8px;
}
.dash-card .cval {
font-size: 26px;
font-weight: 900;
color: var(--color-primary-blue-deep);
}
.dash-card .ctrend {
font-size: 12px;
font-weight: 800;
color: var(--color-success-dark);
margin-top: 4px;
}
.dash-card .ctrend.down { color: var(--color-error-dark); }
.chart-bars {
display: flex;
gap: 6px;
align-items: flex-end;
height: 130px;
padding-top: 8px;
}
.chart-bars .bar {
flex: 1;
background: linear-gradient(180deg, #87CEEB, #3A7BD5);
border-radius: 6px 6px 0 0;
position: relative;
}
.chart-bars .bar.gap-bar { background: linear-gradient(180deg, #FFB59E, #EF5350); }
.chart-bars .bar.win-bar { background: linear-gradient(180deg, #FFE082, #F5C518); }
.chart-labels { display: flex; gap: 6px; margin-top: 6px; }
.chart-labels span { flex: 1; text-align: center; font-size: 10px; font-weight: 700; color: var(--color-text-secondary); }
.skills-mini { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.skills-mini .row { display: grid; grid-template-columns: 1fr 110px 36px; gap: 10px; align-items: center; }
.skills-mini .row .name { font-size: 13px; font-weight: 800; }
.skills-mini .row .pbar { height: 8px; background: #EAF4FE; border-radius: 50px; overflow: hidden; }
.skills-mini .row .pbar .pf { height: 100%; background: linear-gradient(90deg, #66BB6A, #388E3C); border-radius: 50px; }
.skills-mini .row .pbar .pf.warn { background: linear-gradient(90deg, #FF9800, #F5C518); }
.skills-mini .row .pbar .pf.bad { background: linear-gradient(90deg, #EF5350, #FF7043); }
.skills-mini .row .pct { font-size: 12px; font-weight: 800; text-align: right; }
.heat {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 3px;
margin-top: 6px;
}
.heat span {
aspect-ratio: 1;
border-radius: 3px;
background: #EAF4FE;
}
.heat span.l1 { background: rgba(58,123,213,0.25); }
.heat span.l2 { background: rgba(58,123,213,0.5); }
.heat span.l3 { background: rgba(58,123,213,0.75); }
.heat span.l4 { background: var(--color-primary-blue); }
.heat span.l5 { background: #F5C518; }
/* Dashboard floating annotations */
.dash-wrap {
position: relative;
}
.dash-annot {
position: absolute;
background: white;
border-radius: 16px;
padding: 12px 16px;
font-weight: 800;
font-size: 13px;
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
display: flex;
align-items: center;
gap: 10px;
z-index: 4;
}
.dash-annot::before {
content: "";
position: absolute;
width: 32px;
height: 2px;
background: var(--color-primary-blue);
}
.dash-annot .dot {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg,#F5C518,#E8B400);
color: var(--color-text-on-yellow);
display: flex; align-items: center; justify-content: center;
font-weight: 900; font-size: 14px;
flex-shrink: 0;
}
.dash-annot.a-left { top: 200px; left: -40px; transform: rotate(-2deg); }
.dash-annot.a-left::before { right: -30px; top: 50%; }
.dash-annot.a-right { top: 380px; right: -50px; transform: rotate(2deg); }
.dash-annot.a-right::before { left: -30px; top: 50%; }
.dash-annot.a-topright { top: 60px; right: -30px; transform: rotate(3deg); }
/* ───────────────── Game-loop features ───────────────── */
.features-section {
background: linear-gradient(180deg, #FFFFFF 0%, #E0F4FF 100%);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.feat-card {
background: white;
border-radius: 28px;
padding: 32px;
box-shadow: 0 8px 28px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.feat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.feat-card h3 {
font-size: 26px;
font-weight: 900;
color: var(--color-primary-blue-deep);
margin: 0 0 10px;
}
.feat-card p {
font-size: 16px;
font-weight: 500;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
.feat-card .feat-icon {
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
}
.feat-card.f-streak { grid-column: span 6; background: linear-gradient(135deg, #FF7043 0%, #F5A623 100%); color: white; min-height: 360px; }
.feat-card.f-streak h3, .feat-card.f-streak p { color: white; }
.feat-card.f-streak p { color: rgba(255,255,255,0.92); }
.feat-card.f-streak .feat-icon { color: rgba(255,255,255,0.85); }
.feat-card.f-streak .visual {
position: absolute;
bottom: -20px;
right: -20px;
width: 240px;
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}
.feat-card.f-streak .big-num {
font-size: 96px;
font-weight: 900;
line-height: 1;
margin: 18px 0 6px;
}
.feat-card.f-spin { grid-column: span 6; background: linear-gradient(135deg, #3A7BD5 0%, #1A6FA8 100%); color: white; min-height: 360px; }
.feat-card.f-spin h3, .feat-card.f-spin p { color: white; }
.feat-card.f-spin p { color: rgba(255,255,255,0.92); }
.feat-card.f-spin .feat-icon { color: rgba(255,255,255,0.85); }
.feat-card.f-spin .visual {
position: absolute;
bottom: -40px;
right: -40px;
width: 280px;
animation: spin 22s linear infinite;
filter: drop-shadow(0 14px 24px rgba(0,0,0,0.2));
}
@keyframes spin { to { transform: rotate(360deg); } }
.feat-card.f-market { grid-column: span 4; }
.feat-card.f-missions { grid-column: span 4; }
.feat-card.f-arena { grid-column: span 4; background: #FFFFFF; color: var(--color-text-primary); }
.feat-card.f-arena h3 { color: var(--color-text-primary); }
.feat-card.f-arena p { color: var(--color-text-secondary); }
.feat-card.f-arena .feat-icon { color: #AB47BC; }
.feat-card.f-forum { grid-column: span 6; }
.feat-card.f-camera { grid-column: span 6; }
.feat-visual-row {
margin-top: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.mission-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 12px;
background: #F4F8FF;
margin-top: 10px;
font-size: 14px;
font-weight: 700;
}
.mission-row .check {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--color-primary-blue);
flex-shrink: 0;
}
.mission-row.done .check { background: var(--color-success); border-color: var(--color-success); position: relative;}
.mission-row.done .check::after { content: "✓"; position: absolute; inset: 0; color: white; display:flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 900;}
.mission-row .grow { flex: 1; }
.mission-row .xp-chip {
background: var(--color-primary-yellow);
color: var(--color-text-on-yellow);
padding: 3px 10px;
border-radius: 50px;
font-size: 11px;
font-weight: 900;
}
.mission-row.done { opacity: 0.55; }
.market-items {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.learning-path-img {
width: 100%;
height: auto;
margin-top: 16px;
border-radius: 16px;
border: 2px solid rgba(255,255,255,0.7);
box-shadow: 0 10px 28px rgba(58,123,213,0.18);
}
.market-item {
aspect-ratio: 1;
background: #F4F8FF;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 32px;
position: relative;
border: 2px solid transparent;
}
.market-item.featured { border-color: var(--color-border-gold); background: var(--color-surface-cream); }
.market-item .tag {
position: absolute;
bottom: 4px;
background: white;
padding: 2px 8px;
border-radius: 50px;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
gap: 3px;
}
.forum-thread {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.forum-thread:last-child { border-bottom: none; }
.forum-thread .av {
width: 36px; height: 36px;
border-radius: 50%;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 900;
color: white;
font-size: 14px;
}
.forum-thread .body { flex: 1; }
.forum-thread .who { font-size: 13px; font-weight: 800; }
.forum-thread .msg { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; margin-top: 2px; }
.forum-thread .meta { font-size: 11px; color: var(--color-text-placeholder); margin-top: 4px; font-weight: 700; }
.arena-bars {
margin-top: 18px;
}
.arena-row {
display: grid;
grid-template-columns: 90px 1fr 36px;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 12px;
font-weight: 800;
color: var(--color-text-primary);
}
.arena-row .lbl { color: var(--color-text-secondary); }
.arena-row .pbar {
position: relative;
height: 14px;
background: #ECECEC;
border-radius: 50px;
}
.arena-row .pf {
display: block;
height: 100%;
border-radius: 50px;
background: linear-gradient(135deg, var(--color-primary-yellow), var(--color-primary-gold-deep));
}
.arena-row .val {
text-align: right;
color: var(--color-text-primary);
}
/* Camera card */
.camera-card .photo {
background: #1A1A2E;
border-radius: 14px;
height: 160px;
margin-top: 14px;
position: relative;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6);
font-size: 36px;
overflow: hidden;
}
.camera-card .photo::before {
content: "";
position: absolute; inset: 16px;
border: 3px dashed rgba(255,255,255,0.35);
border-radius: 12px;
}
.scan-line {
position: absolute;
left: 16px; right: 16px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--color-primary-yellow), transparent);
animation: scan 2.4s ease-in-out infinite;
border-radius: 50px;
box-shadow: 0 0 18px var(--color-primary-yellow);
}
@keyframes scan {
0% { top: 24px; opacity: 1; }
50% { top: calc(100% - 24px); opacity: 1; }
100% { top: 24px; opacity: 1; }
}
.grade-result {
margin-top: 12px;
display: flex;
gap: 8px;
align-items: center;
}
.grade-result .grade-pill {
background: var(--color-success);
color: white;
padding: 6px 14px;
border-radius: 50px;
font-size: 13px;
font-weight: 900;
}
.grade-result .grade-note { font-size: 13px; color: var(--color-text-secondary); font-weight: 600; }
/* ───────────────── For audience ───────────────── */
.audience-section {
background: white;
}
.aud-tabs {
display: flex;
gap: 8px;
background: #F4F8FF;
padding: 6px;
border-radius: 50px;
margin-bottom: 48px;
width: fit-content;
}
.aud-tab {
padding: 12px 28px;
border-radius: 50px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
color: var(--color-text-secondary);
border: none;
background: transparent;
transition: all .25s ease;
}
.aud-tab.active {
background: white;
color: var(--color-primary-blue);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.aud-pane { display: none; }
.aud-pane.active { display: grid; }
.aud-pane {
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.aud-pane h3 {
font-size: 44px;
font-weight: 900;
color: var(--color-primary-blue-deep);
margin: 0 0 20px;
line-height: 1.05;
letter-spacing: -0.01em;
}
.aud-pane > div > p {
font-size: 18px;
color: var(--color-text-secondary);
font-weight: 500;
margin: 0 0 28px;
line-height: 1.55;
}
.aud-bullets {
list-style: none;
padding: 0;
margin: 0 0 32px;
}
.aud-bullets li {
padding: 10px 0 10px 36px;
font-size: 16px;
font-weight: 700;
color: var(--color-text-primary);
position: relative;
}
.aud-bullets li::before {
content: "";
position: absolute;
left: 0; top: 12px;
width: 24px; height: 24px;
background: var(--color-success);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 18px;
background-repeat: no-repeat;
background-position: center;
}
.aud-visual {
background: var(--color-bg-sky);
border-radius: 30px;
padding: 40px;
position: relative;
overflow: hidden;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.aud-visual::before {
content: "";
position: absolute; inset: 0;
background: url("assets/img-01.webp") center/cover;
opacity: 0.5;
}
.aud-visual > * { position: relative; z-index: 2; }
/* ── Student app — game-map mock ── */
.kid-map {
position: relative;
width: 100%;
max-width: 560px;
aspect-ratio: 1539 / 1037;
border-radius: 26px;
border: 5px solid rgba(255,255,255,0.9);
background: url("assets/img-01.webp") center/cover;
box-shadow: 0 30px 60px rgba(0,0,0,0.28);
overflow: hidden;
font-family: var(--font-family);
transform-origin: top center; /* JS scales it to fit on phones (see script.js) */
}
.kid-map .km-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* Frosted pills + cards */
.km-pill, .km-card {
background: rgba(255,255,255,0.94);
box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}
.km-hud {
position: absolute;
top: 3.5%; left: 3%; right: 3%;
display: flex;
align-items: center;
gap: 2.5%;
z-index: 6;
}
.km-pill { border-radius: 50px; padding: 5px 10px; display: flex; align-items: center; gap: 6px; font-weight: 900; }
.km-profile { font-size: 12px; color: var(--color-text-primary); }
.km-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg,#F5A623,#E8921A); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; }
.km-lv { background: var(--color-primary-yellow); color: var(--color-text-on-yellow); padding: 1px 7px; border-radius: 50px; font-size: 10px; }
.km-xp { flex: 1; }
.km-xp img { width: 20px; height: 20px; flex: none; }
.km-xpbar { flex: 1; height: 8px; border-radius: 50px; background: #E3EAF2; overflow: hidden; }
.km-xpbar i { display: block; height: 100%; background: linear-gradient(90deg,#7BC950,#5BA730); border-radius: 50px; }
.km-xpval { font-size: 10px; color: var(--color-text-secondary); white-space: nowrap; }
.km-cur { gap: 9px; font-size: 11px; color: var(--color-text-primary); }
.km-cur span { display: flex; align-items: center; gap: 3px; }
.km-cur img { width: 15px; height: 15px; }
.km-card { position: absolute; border-radius: 16px; padding: 8px 11px; z-index: 6; }
.km-streak { top: 17%; left: 3%; display: flex; align-items: center; gap: 8px; }
.km-streak > img { width: 26px; height: 26px; }
.km-streak-txt { display: flex; flex-direction: column; line-height: 1; }
.km-streak-txt b { font-size: 19px; font-weight: 900; color: var(--color-text-primary); }
.km-streak-txt span { font-size: 9px; font-weight: 800; color: var(--color-text-secondary); }
.km-week { display: flex; gap: 3px; margin-left: 4px; }
.km-week .d { width: 15px; height: 15px; border-radius: 50%; background: #5BA730; color: #fff; font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.km-week .d.today { background: var(--color-primary-yellow); color: var(--color-text-on-yellow); }
.km-mission { top: 18%; right: 3%; width: 33%; min-width: 168px; }
.km-mtop { display: flex; align-items: flex-start; gap: 8px; }
.km-mtitle { font-size: 12px; font-weight: 900; color: var(--color-text-primary); }
.km-mdesc { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); margin-top: 1px; }
.km-gift { font-size: 20px; margin-left: auto; }
.km-mrow { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.km-mbar { flex: 1; height: 8px; border-radius: 50px; background: #E3EAF2; overflow: hidden; }
.km-mbar i { display: block; height: 100%; background: linear-gradient(90deg,#7BC950,#5BA730); border-radius: 50px; }
.km-mval { font-size: 10px; font-weight: 900; color: var(--color-text-secondary); }
/* Level nodes */
.km-node {
position: absolute;
width: 9%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 3px solid #fff;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 900; font-size: clamp(13px, 3.2cqw, 18px);
box-shadow: 0 4px 0 rgba(0,0,0,0.18), 0 7px 12px rgba(0,0,0,0.28);
z-index: 4;
}
.kid-map { container-type: inline-size; }
.km-node.done { background: linear-gradient(180deg,#86D257,#5BA730); }
.km-node.active { background: linear-gradient(180deg,#5BA0EA,#2E6FD0); }
.km-node.lock { background: linear-gradient(180deg,#BBC0CC,#8A8F9E); font-size: 14px; }
.km-node i { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: -1px; color: var(--color-primary-yellow); -webkit-text-stroke: 0.4px rgba(0,0,0,0.25); white-space: nowrap; }
/* Reward chest */
.km-chest { position: absolute; transform: translate(-50%, -50%); z-index: 5; text-align: center; }
.km-chest img { width: 74px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3)); display: block; }
.km-rwd { display: inline-block; background: #fff; color: var(--color-text-primary); font-size: 10px; font-weight: 900; padding: 3px 9px; border-radius: 50px; box-shadow: 0 3px 10px rgba(0,0,0,0.18); margin-bottom: 2px; }
/* Mascot + bubble */
.km-mascot { position: absolute; left: -3%; bottom: 4%; width: 24%; z-index: 5; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25)); }
.km-mbubble {
position: absolute; left: 16%; top: 41%; z-index: 6;
background: #fff; color: var(--color-text-primary);
font-size: 11px; font-weight: 900; line-height: 1.2;
padding: 8px 12px; border-radius: 14px 14px 14px 3px;
box-shadow: 0 5px 14px rgba(0,0,0,0.18);
}
.km-mbubble span { font-weight: 700; color: var(--color-text-secondary); }
/* Bottom nav */
.km-nav {
position: absolute; left: 4%; right: 4%; bottom: 3.5%;
background: rgba(255,255,255,0.96);
border-radius: 50px; padding: 7px 6px;
display: flex; justify-content: space-around; align-items: center;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
z-index: 6;
}
.km-nav span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-secondary); }
.km-nav span b { font-weight: 800; }
.km-nav span.on { color: var(--color-primary-blue); }
.teacher-screen {
width: 100%;
background: white;
border-radius: 16px;
box-shadow: 0 30px 60px rgba(0,0,0,0.18);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.06);
}
.teacher-screen .ts-head {
background: #F0F0F8;
padding: 12px 16px;
display: flex;
gap: 8px;
align-items: center;
border-bottom: 1px solid #E0E0EE;
}
.teacher-screen .ts-head .tabs {
display: flex; gap: 14px; font-size: 12px; font-weight: 800; color: var(--color-text-secondary);
}
.teacher-screen .ts-head .tabs .t.on { color: var(--color-primary-blue); }
.teacher-screen .ts-body {
padding: 18px;
}
.teacher-screen h4 {
font-size: 15px; font-weight: 900; margin: 0 0 12px;
color: var(--color-teacher-text);
}
.teacher-screen table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.teacher-screen th {
text-align: left;
font-weight: 800;
color: var(--color-text-secondary);
padding: 6px 8px;
border-bottom: 1px solid #E0E0EE;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
}
.teacher-screen td {
padding: 8px;
font-weight: 700;
border-bottom: 1px solid #F5F5FF;
}
.teacher-screen td .pchip {
display: inline-block;
padding: 2px 8px;
border-radius: 50px;
font-size: 10px;
font-weight: 900;
}
.teacher-screen td .pchip.high { background: #E8F5E9; color: var(--color-success-dark); }
.teacher-screen td .pchip.mid { background: #FFF3E0; color: var(--color-warning-dark); }
.teacher-screen td .pchip.low { background: #FFEBEE; color: var(--color-error-dark); }
.parent-screen {
background: white;
border-radius: 20px;
padding: 22px;
box-shadow: 0 30px 60px rgba(0,0,0,0.18);
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 380px;
}
.parent-screen h4 { font-size: 15px; font-weight: 900; margin: 0; }
.parent-screen .summary {
background: linear-gradient(135deg,#FFE082,#F5C518);
border-radius: 16px;
padding: 14px;
font-size: 13px;
font-weight: 700;
color: var(--color-text-on-yellow);
}
.parent-screen .summary b { font-size: 22px; display: block; font-weight: 900; margin-bottom: 2px;}
.parent-screen .row {
display: flex; justify-content: space-between; align-items: center;
padding: 10px;
background: #F4F8FF;
border-radius: 12px;
font-weight: 800;
font-size: 13px;
}
/* ───────────────── Testimonials ───────────────── */
.testi-section {
background: linear-gradient(180deg, #E0F4FF 0%, #FBFCFF 100%);
overflow: hidden;
padding-bottom: 60px;
}
.marquee {
display: flex;
gap: 24px;
width: max-content;
animation: marquee 60s linear infinite;
margin-top: 40px;
}
.marquee.r2 {
animation-direction: reverse;
animation-duration: 70s;
margin-top: 24px;
}
.marquee:hover { animation-play-state: paused; }
@keyframes marquee {
to { transform: translateX(-50%); }
}
.testi-card {
background: white;
border-radius: 24px;
padding: 26px;
width: 360px;
flex-shrink: 0;
box-shadow: 0 10px 28px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.04);
}
.testi-card .stars { color: #F5C518; letter-spacing: 2px; font-size: 16px; margin-bottom: 12px; }
.testi-card .quote { font-size: 16px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5; margin: 0 0 18px; }
.testi-card .who {
display: flex;
align-items: center;
gap: 10px;
}
.testi-card .av {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 900;
color: white;
font-size: 14px;
flex-shrink: 0;
}
.testi-card .nm { font-size: 14px; font-weight: 900; }
.testi-card .ro { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
/* ───────────────── Pricing ───────────────── */
.pricing-section { background: #FBFCFF; }
.pricing-toggle {
display: inline-flex;
background: #F4F8FF;
padding: 6px;
border-radius: 50px;
margin-bottom: 48px;
gap: 4px;
}
.pricing-toggle button {
border: none;
background: transparent;
padding: 10px 22px;
border-radius: 50px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
color: var(--color-text-secondary);
transition: all .2s;
}
.pricing-toggle button.on {
background: white;
color: var(--color-primary-blue);
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.pricing-toggle .save {
background: var(--color-success);
color: white;
padding: 2px 8px;
border-radius: 50px;
font-size: 10px;
font-weight: 900;
margin-left: 6px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.plan {
background: white;
border-radius: 28px;
padding: 36px 32px;
border: 2px solid rgba(0,0,0,0.05);
position: relative;
display: flex;
flex-direction: column;
}
.plan h3 {
font-size: 22px;
font-weight: 900;
color: var(--color-primary-blue-deep);
margin: 0 0 6px;
}
.plan .desc {
font-size: 14px;
color: var(--color-text-secondary);
margin: 0 0 24px;
font-weight: 600;
}
.plan .price {
font-size: 56px;
font-weight: 900;
color: var(--color-text-primary);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.plan .price small { font-size: 16px; font-weight: 700; color: var(--color-text-secondary); }
.plan .billed { font-size: 13px; color: var(--color-text-placeholder); font-weight: 700; margin-bottom: 24px; }
.plan ul {
list-style: none;
padding: 0;
margin: 0 0 28px;
flex: 1;
}
.plan li {
padding: 8px 0 8px 30px;
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
position: relative;
}
.plan li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 18px; height: 18px;
background: var(--color-success);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}
.plan li.muted { color: var(--color-text-placeholder); }
.plan li.muted::before { background: #E0E0EE; background-image: none; }
.plan.featured {
background: linear-gradient(180deg, #FFFFFF, #FFFBED);
border-color: var(--color-border-gold);
transform: scale(1.04);
box-shadow: 0 30px 60px rgba(245,197,24,0.25);
}
.plan.featured .badge {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg,#F5A623,#E8921A);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.06em;
box-shadow: 0 4px 14px rgba(245,166,35,0.4);
}
/* ───────────────── FAQ ───────────────── */
.faq-section { background: white; }
.faq-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: flex-start;
}
.faq-list { display: flex; flex-direction: column; gap: 12px; }
@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.faq-mascot {
display: block;
width: 420px;
max-width: 100%;
margin: 32px 0 0;
filter: drop-shadow(0 12px 22px rgba(0,0,0,0.16));
}
.faq-item {
background: white;
border: 2px solid #EAF4FE;
border-radius: 16px;
padding: 20px 24px;
cursor: pointer;
transition: all .25s ease;
}
.faq-item[open] {
border-color: var(--color-primary-blue);
background: #FAFCFF;
}
.faq-item summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 800;
font-size: 17px;
color: var(--color-text-primary);
cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-size: 24px;
color: var(--color-primary-blue);
font-weight: 900;
transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
margin: 12px 0 0;
color: var(--color-text-secondary);
font-size: 15px;
font-weight: 500;
line-height: 1.55;
}
/* ───────────────── Contact ───────────────── */
.contact-section {
background: var(--color-bg-sky);
}
.contact-card {
max-width: 720px;
margin: 0 auto;
background: var(--color-surface-card);
border: 2px solid var(--color-border-white);
border-radius: var(--radius-card-lg);
box-shadow: var(--shadow-card);
padding: 56px 56px 48px;
}
.contact-head { text-align: center; margin-bottom: 36px; }
.contact-head .section-title { text-shadow: none; }
.lead-link {
color: var(--color-primary-blue);
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
}
.lead-link:hover { color: var(--color-primary-blue-dark); text-decoration: underline; }
.contact-head .section-lead { margin-left: auto; margin-right: auto; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
font-size: 13px;
font-weight: 800;
color: var(--color-text-secondary);
padding-left: 4px;
}
.field-box {
position: relative;
display: flex;
align-items: center;
}
.field-icon {
position: absolute;
left: 18px;
width: 20px;
height: 20px;
color: var(--color-text-placeholder);
pointer-events: none;
}
.field-icon-area { top: 16px; }
.field-chevron {
position: absolute;
right: 18px;
width: 18px;
height: 18px;
color: var(--color-primary-blue);
pointer-events: none;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
font-family: var(--font-family);
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
background: var(--color-surface-input);
border: 2px solid var(--color-border-input);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.contact-form input,
.contact-form select {
height: 54px;
border-radius: var(--radius-pill);
padding: 0 20px 0 48px;
}
.contact-form select { padding-right: 44px; cursor: pointer; }
.contact-form textarea {
border-radius: var(--radius-card);
padding: 16px 20px 16px 48px;
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--color-text-placeholder); font-weight: 600; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
border-color: var(--color-primary-blue);
box-shadow: 0 0 0 3px rgba(58,123,213,0.15);
}
.contact-submit {
align-self: center;
margin-top: 8px;
min-width: 240px;
font-size: var(--font-button-size);
}
.contact-success[hidden] { display: none !important; }
.contact-success {
display: flex;
align-items: center;
gap: 14px;
background: var(--color-surface-cream);
border: 2px solid var(--color-border-gold);
border-radius: var(--radius-card);
padding: 14px 20px;
margin-top: 4px;
animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contact-success img { width: 52px; height: auto; }
.contact-success b { display: block; font-size: 16px; font-weight: 900; color: var(--color-primary-blue-deep); }
.contact-success span { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
@keyframes pop-in {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@media (max-width: 767px) {
.contact-card { padding: 32px 16px 28px; } /* tighter on phone so the ~300px hCaptcha widget fits */
.contact-row { grid-template-columns: 1fr; }
}
/* ───────────────── Final CTA ───────────────── */
.cta-section {
position: relative;
padding: 140px 40px;
background:
radial-gradient(ellipse 800px 500px at 50% -30%, rgba(245,197,24,0.4), transparent),
linear-gradient(180deg, #87CEEB 0%, #3A7BD5 100%);
overflow: hidden;
text-align: center;
}
.cta-section::before {
content: "";
position: absolute; inset: 0;
background: url("assets/img-01.webp") center bottom/cover;
opacity: 0.35;
}
.cta-section > * { position: relative; z-index: 2; }
.cta-section h2 {
font-size: clamp(40px, 5.6vw, 76px);
font-weight: 900;
color: white;
line-height: 1.02;
margin: 0 0 18px;
text-shadow: 0 4px 0 rgba(0,0,0,0.15), 0 8px 30px rgba(0,0,0,0.25);
letter-spacing: -0.02em;
}
.cta-section p {
font-size: 22px;
font-weight: 700;
color: white;
text-shadow: 0 2px 0 rgba(0,0,0,0.15);
margin: 0 0 40px;
}
.cta-mascot {
width: 380px;
margin: -40px auto 12px;
filter: drop-shadow(0 16px 30px rgba(0,0,0,0.25));
}
.cta-chest {
position: absolute;
z-index: 1;
width: 140px;
filter: drop-shadow(0 18px 36px rgba(245,197,24,0.6));
}
.cta-chest.left { bottom: 80px; left: 8%; transform: rotate(-12deg); animation: float 5s ease-in-out infinite; }
.cta-chest.right { bottom: 120px; right: 8%; transform: rotate(14deg); animation: float 6s ease-in-out infinite; animation-delay: -2s; }
.cta-buttons { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-fineprint {
margin-top: 24px;
font-size: 14px;
color: rgba(255,255,255,0.85);
font-weight: 700;
}
/* ───────────────── Footer ───────────────── */
.footer {
background: #1A1A2E;
color: white;
padding: 64px 40px 32px;
}
.footer-inner {
max-width: 1240px;
margin: 0 auto;
}
.footer-cols {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 44px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand img { height: 40px; margin-bottom: 16px; filter: brightness(1.1); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; max-width: 280px; margin-bottom: 16px; }
.footer-col h5 {
font-size: 13px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: white; text-decoration: none; font-size: 14px; font-weight: 700; }
.footer-col a:hover { color: var(--color-primary-yellow); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
color: rgba(255,255,255,0.5);
font-size: 13px;
font-weight: 600;
}
/* ───────────────── Responsive ───────────────── */
@media (max-width: 1023px) {
.hero-content { grid-template-columns: 1fr; gap: 30px; min-height: auto; }
.hero-visual { height: 480px; }
.gap-sticky { grid-template-columns: 1fr; }
.gap-visual-col { position: relative; top: 0; height: auto; }
.gap-visual { height: 420px; }
.feature-grid > * { grid-column: span 12 !important; }
.aud-pane { grid-template-columns: 1fr; }
.faq-grid { grid-template-columns: 1fr; gap: 36px; }
.pricing-grid { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: 1fr 1fr; }
.trust-strip-inner { grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-body { grid-template-columns: 1fr; }
.dash-side { display: none; }
.dash-annot { display: none; }
}
@media (max-width: 767px) {
.nav { padding: 12px 20px; }
.nav-links { display: none; }
section.block { padding: 80px 20px; }
.hero { padding: 40px 20px 60px; }
.hero-mascot { width: 100%; }
.mascot-wrap { width: 280px; height: 360px; }
.mascot-bubble { font-size: 15px; max-width: 240px; }
.footer-cols { grid-template-columns: 1fr; }
.trust-strip-inner { grid-template-columns: 1fr; }
}
/* Tweaks applied at build time */
#pricing { display: none !important; }
#testimonials { display: none !important; }
#trustStrip { display: none !important; }
.nav-links li:has(a[href="#pricing"]) { display: none !important; }
/* ═══════════════ Waitlist Popup ═══════════════ */
#wl-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.50);
z-index: 9000;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#wl-overlay.wl-open {
display: flex;
animation: wlFadeIn 0.25s ease;
}
@keyframes wlFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#wl-modal {
background: linear-gradient(160deg, #E8F6FF 0%, #FFFFFF 60%);
border-radius: 30px;
padding: 48px 40px 40px;
max-width: 460px;
width: 100%;
position: relative;
box-shadow: 0 24px 64px rgba(58, 123, 213, 0.22), 0 4px 12px rgba(0,0,0,0.10);
animation: wlSlideUp 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
text-align: center;
}
@keyframes wlSlideUp {
from { transform: translateY(32px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
#wl-close {
position: absolute;
top: 16px; right: 18px;
background: rgba(58, 123, 213, 0.10);
border: none;
border-radius: 50%;
width: 44px; height: 44px;
font-size: 18px;
color: #5C6B7A;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
line-height: 1;
}
#wl-close:hover { background: rgba(58, 123, 213, 0.20); }
#wl-emoji {
font-size: 48px;
margin-bottom: 12px;
display: block;
}
#wl-modal h2 {
font-family: 'Nunito', sans-serif;
font-size: 26px;
font-weight: 800;
color: #1A1A2E;
margin: 0 0 10px;
line-height: 1.2;
}
#wl-modal p {
font-family: 'Nunito', sans-serif;
font-size: 16px;
color: #5C6B7A;
margin: 0 0 24px;
line-height: 1.5;
}
#wl-form {
display: flex;
flex-direction: column;
gap: 12px;
}
#wl-email {
font-family: 'Nunito', sans-serif;
font-size: 15px;
padding: 14px 20px;
border-radius: 50px;
border: 1.5px solid rgba(58, 123, 213, 0.20);
background: #EAF4FE;
color: #1A1A2E;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
box-sizing: border-box;
}
#wl-email::placeholder { color: #9E9E9E; }
#wl-email:focus {
border-color: #3A7BD5;
box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.15);
}
#wl-submit {
font-family: 'Nunito', sans-serif;
font-size: 16px;
font-weight: 800;
padding: 14px 28px;
border-radius: 50px;
border: none;
background: linear-gradient(135deg, #F5C518, #E8B400);
color: #3D2800;
cursor: pointer;
box-shadow: 0 5px 0 #c28507, 0 8px 20px rgba(245, 197, 24, 0.40);
transition: transform 0.10s, box-shadow 0.10s;
width: 100%;
}
#wl-submit:hover {
transform: translateY(-2px);
box-shadow: 0 7px 0 #c28507, 0 10px 24px rgba(245, 197, 24, 0.45);
}
#wl-submit:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #c28507, 0 4px 10px rgba(245, 197, 24, 0.30);
}
#wl-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
#wl-error {
font-family: 'Nunito', sans-serif;
font-size: 13px;
color: #EF5350;
display: none;
margin-top: -4px;
}
#wl-success {
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 8px 0 4px;
}
#wl-success .wl-success-icon { font-size: 52px; }
#wl-success h3 {
font-family: 'Nunito', sans-serif;
font-size: 22px;
font-weight: 800;
color: #1A1A2E;
margin: 0;
}
#wl-success p {
font-size: 16px;
color: #5C6B7A;
margin: 0;
}
@media (max-width: 480px) {
#wl-modal { padding: 40px 24px 32px; }
#wl-modal h2 { font-size: 22px; }
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE LAYER — added on top of the desktop-first CSS above.
Tiers: Tablet ≤1023px · Phone ≤767px. Desktop (≥1024px) untouched.
════════════════════════════════════════════════════════════════════════ */
/* ── Accessibility: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ── Visible keyboard focus everywhere ── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
outline: 3px solid var(--color-primary-blue, #3A7BD5);
outline-offset: 2px;
}
/* ── Hamburger button: hidden on desktop, shown ≤767 ── */
.nav-toggle {
display: none;
flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; padding: 10px;
background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span {
display: block; width: 100%; height: 3px; border-radius: 3px;
background: var(--color-primary-blue-deep, #1b3a6b);
transition: transform .2s ease, opacity .2s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ── Sticky bottom CTA (thumb zone) — phone only ── */
.mobile-cta-bar { display: none; }
/* ───────────────────── TABLET (≤1023px) ───────────────────── */
@media (max-width: 1023px) {
.hero h1 { font-size: 56px; }
}
/* ───────────────────── PHONE (≤767px) ───────────────────── */
@media (max-width: 767px) {
/* Typography down-scale */
.hero h1 { font-size: 34px; line-height: 1.05; }
.section-title { font-size: 30px; }
.lead { font-size: 17px; }
/* Mobile nav: logo + hamburger; links become a dropdown panel */
.nav { padding: 12px 18px; }
.nav-toggle { display: flex; }
.nav-actions { margin-left: auto; margin-right: 6px; } /* keep the language switch beside the hamburger */
.nav-actions .btn { display: none; } /* CTA lives in the bottom bar instead */
.lang-switch a { min-height: 38px; }
.nav-links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; gap: 0; margin: 0; padding: 6px 0;
background: #fff;
box-shadow: 0 12px 24px rgba(0,0,0,.12);
border-top: 1px solid rgba(0,0,0,.06);
display: none;
}
.nav.open .nav-links { display: flex; }
.nav-links li { width: 100%; }
.nav-links a { display: flex; align-items: center; min-height: 44px; padding: 12px 24px; font-size: 16px; }
/* Full-width primary CTAs */
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; }
.cta-buttons { display: flex; flex-direction: column; width: 100%; }
.cta-buttons .btn { width: 100%; }
/* Forms: 16px stops iOS zoom-on-focus; full-width submit */
.contact-form input, .contact-form select, .contact-form textarea,
#wl-email { font-size: 16px; }
.contact-submit, #wl-submit { width: 100%; min-height: 50px; }
/* Sticky bottom CTA in the thumb zone */
.mobile-cta-bar {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 -4px 16px rgba(0,0,0,.10);
}
.mobile-cta-bar .btn { width: 100%; min-height: 50px; }
body { padding-bottom: 78px; } /* clear space so the bar never covers the footer */
}
/* ════════════════════════════════════════════════════════════════════════
MOBILE MOCKUP MODE: [A] SCALE ◀──────── SWITCH POINT
The kid-map / diagnostic visuals are pixel-built for desktop. On phones we
KEEP them, shrunk to fit. If they look too cramped, switch to [B] HIDE:
comment out the [A] block below and uncomment the [B] block beneath it.
════════════════════════════════════════════════════════════════════════ */
/* [A] SCALE — keep the visuals, fit to viewport */
@media (max-width: 767px) {
/* The kid-map is pixel-built for desktop (fixed-px cards/pills), so just
capping its width made the cards overlap. JS instead scales it as ONE unit
to fit the column (see the "fit kid-map" block in script.js); here we give
the panel less padding and let it collapse to the scaled map. */
.aud-visual { padding: 16px; min-height: 0; }
.gap-visual { height: 360px; }
}
/* [B] HIDE — alternative (uncomment this, and comment out [A] above)
@media (max-width: 767px) {
.aud-visual, .gap-visual-col { display: none !important; }
}
*/
/* ── Mascot + speech bubble: natural flow on tablet/phone ──────────────────
On desktop the bubble is absolutely positioned over a fixed-height "stage".
On ≤1023 that left it floating above the hero text. Here we turn the stage
into a centered flex column so the bubble sits directly above the mascot at
ANY size — no magic offsets. Desktop (≥1024) keeps the original layout.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
.hero-visual { height: auto; }
.hero-stage {
position: static;
display: flex;
flex-direction: column-reverse; /* DOM = mascot → bubble; reverse puts bubble on top */
align-items: center;
gap: 12px;
}
.mascot-wrap {
position: relative; /* keep .mascot-shadow attached */
inset: auto;
width: 240px; max-width: 72%; height: auto;
/* breathe animation (scale only) is harmless and stays */
}
.mascot-bubble {
position: relative; /* keep .bub-tail attached */
inset: auto;
transform: none !important; /* beat .show / :hover / bubble-pop translateX(-50%) */
animation: none !important;
margin: 0;
max-width: 280px;
}
}
/* ── "How it works" gap section: centered cards + per-step visual on ≤1023 ───
Desktop keeps the two-column sticky-swap. On tablet/phone the steps become
centered cards, and JS moves each step's visual (.gap-frame) inline beneath
it (see script.js). The `.gap-interleaved` class is added by that JS, so if
JS is unavailable the layout safely falls back to the original. ─────────── */
@media (max-width: 1023px) {
.gap-step {
border-left: none;
padding: 24px 0 8px; /* was 80px 0 — far less dead space */
text-align: center;
opacity: 1 !important; /* each card stands alone; no scroll dimming */
}
.gap-step::before { /* number: centered above the text, not hanging left */
position: static;
left: auto; top: auto;
margin: 0 auto 14px;
}
}
/* Applied only once JS has moved the frames into the steps */
.gap-sticky.gap-interleaved .gap-visual-col { display: none; }
.gap-sticky.gap-interleaved .gap-step .gap-frame {
position: relative; /* was absolute inside the sticky stage */
inset: auto;
opacity: 1; /* override the .show toggle — always visible */
transform: none;
width: 100%;
max-width: 360px;
margin: 20px auto 0;
border-radius: 20px;
overflow: hidden;
}
/* The CSS-built mockups (diagnostic / practice / reward) need room for their
absolutely-positioned pieces; the brain-map (.f2) is a plain image, so it
sizes itself. Heights are tunable. */
.gap-sticky.gap-interleaved .gap-step .gap-frame.f1,
.gap-sticky.gap-interleaved .gap-step .gap-frame.f3,
.gap-sticky.gap-interleaved .gap-step .gap-frame.f4 { min-height: 300px; }
/* ── QA quick-wins (MOBILE_QA_FINDINGS.md) ────────────────────────────────── */
/* F9 — in-page anchors shouldn't land under the sticky nav */
section[id] { scroll-margin-top: 72px; }
/* F7 — waitlist CTA inside the mobile hamburger menu (hidden on desktop) */
.nav-cta-mobile { display: none; }
@media (max-width: 767px) {
.nav-cta-mobile { display: block; }
.nav-cta-mobile a {
margin: 8px 24px 6px;
padding: 12px 16px;
background: var(--color-primary-yellow, #F5C518);
color: var(--color-text-on-yellow, #1A1A2E);
border-radius: var(--radius-pill, 999px);
font-weight: 800;
justify-content: center;
min-height: 44px;
}
}
/* F3 — bottom CTA bar: room for the dismiss button + a dismiss control */
@media (max-width: 767px) {
.mobile-cta-bar { display: flex; align-items: center; gap: 10px; }
.mobile-cta-bar.dismissed { display: none; }
.mobile-cta-bar .btn { flex: 1; }
/* When the hamburger menu is open, hide the bar: it otherwise renders over
the open dropdown (z 800 > nav 100) AND shows a 2nd identical CTA at once.
The menu's own "Join the waitlist" item covers the action while open. */
body:has(.nav.open) .mobile-cta-bar { display: none; }
}
.mobile-cta-dismiss {
flex: 0 0 auto;
width: 44px; height: 44px;
border: 0; border-radius: 12px;
background: rgba(0,0,0,0.06);
color: #5C6B7A; font-size: 18px; line-height: 1;
cursor: pointer;
}
/* F13 — use the small-viewport unit on phones so the mobile browser chrome
doesn't make the hero taller than the visible screen */
@media (max-width: 1023px) {
.hero { min-height: 100svh; }
}
/* ── Phone hero: peeking squirrel (top-right of title) + bubble (left) ───────
Replaces the full standing mascot on phones (≤767). Tablet (768–1023) and
desktop keep the full mascot. Overlap offsets/sizes are tunable. ────────── */
.hero-peek { display: none; }
@media (max-width: 767px) {
.hero-visual { display: none; } /* drop the full-mascot block on phone */
/* Phone: Nutsy peeks over the primary CTA button. The button is a solid,
full-width ledge, so the squirrel's paws grip a real edge instead of
clutching open sky above the title. The unit sits in normal flow right
above the CTA; a negative bottom margin dips it onto the button's top edge.
Squirrel on the left, bubble to its right. Sizes/overlap are tunable. */
.hero-peek {
display: flex;
align-items: flex-end; /* squirrel paws + bubble sit on the button line */
justify-content: flex-end; /* squirrel hugs the right of the button */
gap: 6px;
position: relative;
z-index: 3; /* above the button → reads as peeking over it */
margin: 0 0 -4px; /* rest on the button's top edge, above its face (not sunk in) */
padding-right: 6px;
pointer-events: none; /* decorative — taps pass through to the button */
}
.hero-peek-bubble {
order: 1; /* bubble to the LEFT of the squirrel */
position: relative;
z-index: 3;
transform: translateY(-20px); /* lift above the button so the white never covers the yellow */
max-width: min(48%, 150px); /* clamp so it never overflows at 360px */
background: #fff;
border-radius: 13px;
padding: 7px 11px;
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
font-weight: 700;
font-size: 12px;
line-height: 1.18;
color: var(--color-primary-blue-deep, #1A1A2E);
}
.hero-peek-tail { /* diamond on the bubble's right, lower-middle → points at the squirrel's face */
position: absolute; right: -3.1px; left: auto; top: 77%; bottom: auto;
width: 11px; height: 11px; background: #fff;
transform: translateY(-50%) rotate(45deg);
}
.hero-peek-squirrel {
order: 2; /* squirrel on the RIGHT, gripping the button edge */
position: relative;
z-index: 3;
width: clamp(116px, 34vw, 150px); /* scales with screen, never overflows */
height: auto; flex: 0 0 auto;
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18));
}
}
/* ── Horizontal-overflow fixes (no sideways swipe at 375px) ────────────────── */
/* iOS still scrolls if only clips; clip too. */
html { overflow-x: hidden; }
@media (max-width: 767px) {
/* Audience switcher: the 3 pills were 392px wide → caused the swipe. Make
them 3 equal tabs on one row that always fits the viewport. */
.aud-tabs { max-width: 100%; gap: 4px; }
.aud-tab { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 13px; text-align: center; white-space: nowrap; }
/* Contain the kid-map's peeking pills so they don't push past the screen. */
.kid-map { overflow: hidden; }
}
/* ═══════════════ PROBLEM (why math gets harder) ═══════════════
A deliberately quieter, slightly desaturated section so the bright
"How it works" solution lands with more contrast right after it. */
.problem-section {
background: linear-gradient(180deg, #ffffff 0%, #F7FAFF 100%);
padding-top: 96px;
padding-bottom: 84px;
}
.problem-head { max-width: 720px; }
.problem-head .section-lead { margin-bottom: 44px; }
/* Eyebrow recoloured from gold "win" to a muted slate — signals "problem" */
.problem-eyebrow {
background: rgba(58,123,213,0.06);
border-color: rgba(58,123,213,0.18);
color: var(--color-text-secondary);
}
.problem-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.problem-card {
background: var(--color-surface-card);
border: 1px solid rgba(20,40,80,0.07);
border-radius: var(--radius-card);
padding: 26px 26px 28px;
box-shadow: 0 3px 14px rgba(30,50,90,0.05);
}
.problem-card h3 {
font-size: 19px;
font-weight: 800;
color: var(--color-text-primary);
margin: 0 0 8px;
}
.problem-card p {
font-size: 15.5px;
font-weight: 600;
line-height: 1.5;
color: var(--color-text-secondary);
margin: 0;
}
/* ── Stat visual (shared) — sits tight against its caption so the number
and its explanation read as ONE unit ── */
.pstat {
display: flex;
align-items: center;
margin: 14px 0 8px;
}
.pstat-cap {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700;
line-height: 1.45;
color: var(--color-text-secondary);
}
.pstat-cap strong { color: var(--color-primary-orange-dark); font-weight: 900; }
/* Card 1 — isotype pictograph: 1 filled of 3, with a big "1 in 3".
Figures + number stack vertically and run large so this visual carries the
same weight as the bar/tower visuals in cards 2 & 3. */
.pstat--picto { flex-direction: column; align-items: flex-start; gap: 16px; }
.picto-figs { display: flex; gap: 12px; }
.picto-fig {
width: 44px; height: auto;
fill: rgba(20,40,80,0.13); /* muted "everyone else" */
transform-origin: bottom center;
}
.picto-fig.is-on {
fill: var(--color-primary-orange); /* the 1 highlighted student */
filter: drop-shadow(0 3px 6px rgba(245,166,35,0.40));
}
/* Sequence: the muted figures fade up first, then the orange "1" pops last */
.reveal.in .picto-fig:not(.is-on) { animation: pstat-fadein 0.5s ease both; }
.reveal.in .picto-fig:nth-child(2) { animation-delay: 0.10s; }
.reveal.in .picto-fig:nth-child(3) { animation-delay: 0.20s; }
.reveal.in .picto-fig.is-on { animation: pstat-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.40s both; }
@keyframes pstat-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pstat-figure {
font-size: 46px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
color: var(--color-primary-orange-dark);
}
/* Card 2 — "one pace fits no one": a single fixed grey classroom-pace bar,
then five blue student bars of very different lengths → everyone learns at
a different speed. No axes, no numbers — reads instantly. */
.pstat--pace { flex-direction: column; align-items: stretch; width: 100%; gap: 16px; }
.pace-label {
display: block;
font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--color-text-placeholder);
margin-bottom: 6px;
}
.pace-bar {
display: block; height: 9px; border-radius: 50px;
width: calc(var(--len) * 1%);
transform: scaleX(0); transform-origin: left center; /* grows in on reveal */
transition: transform 0.8s cubic-bezier(0.4,0,0.2,1) 0.1s;
}
.pace-bar--class { background: rgba(20,40,80,0.18); } /* the one fixed "classroom pace" */
.pace-kids { display: flex; flex-direction: column; gap: 8px; }
.pace-kids .pace-bar {
background: linear-gradient(90deg, var(--color-primary-blue), var(--color-primary-blue-deep));
}
.reveal.in .pace-bar { transform: scaleX(1); }
.reveal.in .pace-kids .pace-bar:nth-child(1) { transition-delay: 0.20s; }
.reveal.in .pace-kids .pace-bar:nth-child(2) { transition-delay: 0.30s; }
.reveal.in .pace-kids .pace-bar:nth-child(3) { transition-delay: 0.40s; }
.reveal.in .pace-kids .pace-bar:nth-child(4) { transition-delay: 0.50s; }
.reveal.in .pace-kids .pace-bar:nth-child(5) { transition-delay: 0.60s; }
/* Card 3 — skill tower: amber blocks stacked into a pyramid with ONE missing
foundation block (empty outline) in the lower-middle row. The tower still
stands → the weakness stays hidden beneath later progress. */
.pstat--tower { flex-direction: column; align-items: center; width: 100%; padding: 2px 0; }
.tower { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tower-row { display: flex; gap: 6px; }
.blk {
width: 28px; height: 28px; border-radius: 6px;
background: linear-gradient(160deg, var(--color-primary-gold), var(--color-primary-orange));
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08), 0 2px 5px rgba(245,166,35,0.28);
transform: scale(0); transform-origin: center bottom; /* pop in on reveal */
transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.blk--missing {
background: none;
box-shadow: none;
border: 2px dashed var(--color-primary-orange); /* obvious empty slot */
animation: blk-gap 2s ease-in-out infinite; /* gentle pulse keeps the gap noticeable */
}
.reveal.in .blk { transform: scale(1); }
/* build bottom-up: base row first, apex last */
.reveal.in .tower-row:nth-child(4) .blk { transition-delay: 0.10s; }
.reveal.in .tower-row:nth-child(3) .blk { transition-delay: 0.22s; }
.reveal.in .tower-row:nth-child(2) .blk { transition-delay: 0.34s; }
.reveal.in .tower-row:nth-child(1) .blk { transition-delay: 0.46s; }
@keyframes blk-gap {
0%, 100% { border-color: rgba(245,166,35,0.55); }
50% { border-color: var(--color-primary-orange-dark); }
}
@keyframes pstat-pop {
0% { transform: translateY(0) scale(1); }
45% { transform: translateY(-4px) scale(1.12); }
100% { transform: translateY(0) scale(1); }
}
/* Bridge line into the solution */
.problem-bridge {
margin-top: 64px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.problem-bridge-line {
margin: 0;
max-width: 720px;
font-size: clamp(24px, 3vw, 34px);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--color-primary-blue-deep);
text-shadow: 0 2px 0 rgba(255,255,255,0.6);
text-wrap: balance;
}
.problem-bridge-line em {
font-style: normal;
font-weight: 900;
color: var(--color-primary-orange);
position: relative;
padding: 0 2px;
}
/* Hand-drawn orange underline that sweeps in when the bridge reveals */
.problem-bridge-line em::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 5px;
border-radius: 4px;
background: linear-gradient(90deg, var(--color-primary-orange), var(--color-primary-gold));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
.reveal.in .problem-bridge-line em::after { transform: scaleX(1); }
.problem-bridge-arrow {
display: inline-block;
margin-top: 18px;
font-size: 22px;
font-weight: 900;
color: var(--color-primary-blue);
animation: problem-nudge 1.8s ease-in-out infinite;
}
@keyframes problem-nudge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* Stack the cards on tablet/phone */
@media (max-width: 1023px) {
.problem-cards { grid-template-columns: 1fr; }
}