/**
* ================================================================
* All English 4U â WordPress Premium CSS v5.0
* Injected via header template-part (link tag, priority load)
* Design: SVG icons · Real animations · No emoji decorations
* ================================================================
*/
/* Fonts loaded via preconnect in header template for better performance */
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
1. DESIGN TOKENS
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root {
--c-navy: #050E20;
--c-dark: #0A1628;
--c-blue-900: #0D2352;
--c-blue-700: #1245A8;
--c-blue-500: #2563EB;
--c-blue-400: #3B82F6;
--c-blue-200: #93C5FD;
--c-blue-100: #DBEAFE;
--c-blue-50: #EFF6FF;
--c-indigo: #6366F1;
--c-cyan: #06B6D4;
--c-teal: #0D9488;
--c-green-500: #10B981;
--c-green-700: #047857;
--c-green-50: #ECFDF5;
--c-green-100: #D1FAE5;
--c-orange-500: #F97316;
--c-orange-700: #C2410C;
--c-orange-50: #FFF7ED;
--c-orange-100: #FED7AA;
--c-purple-500: #8B5CF6;
--c-purple-700: #6D28D9;
--c-purple-50: #F5F3FF;
--c-purple-100: #DDD6FE;
--c-rose: #F43F5E;
--c-text: #0F172A;
--c-muted: #475569;
--c-subtle: #94A3B8;
--c-border: #E2E8F0;
--c-bg: #F0F7FF;
--c-bg-2: #F8FAFF;
--c-white: #FFFFFF;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 22px;
--r-2xl: 32px;
--sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--sh-md: 0 4px 16px rgba(0,0,0,.08);
--sh-lg: 0 12px 40px rgba(0,0,0,.12);
--sh-blue: 0 8px 24px rgba(37,99,235,.3);
--sh-card: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
--font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-serif: 'Fraunces', Georgia, serif;
--t: 160ms ease;
--t-md: 280ms cubic-bezier(.4,0,.2,1);
--t-spring: 400ms cubic-bezier(.34,1.56,.64,1);
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
2. KEYFRAME ANIMATIONS
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
@keyframes fadeUp {
from { opacity:0; transform:translateY(28px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
@keyframes slideRight {
from { opacity:0; transform:translateX(-20px); }
to { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
from { opacity:0; transform:scale(.94); }
to { opacity:1; transform:scale(1); }
}
@keyframes float {
0%,100% { transform:translateY(0) rotate(0deg); }
50% { transform:translateY(-14px) rotate(3deg); }
}
@keyframes floatAlt {
0%,100% { transform:translateY(0) rotate(0deg); }
50% { transform:translateY(-10px) rotate(-4deg); }
}
@keyframes shimmer {
0% { background-position:-200% center; }
100% { background-position:200% center; }
}
@keyframes gradientMove {
0% { background-position:0% 50%; }
50% { background-position:100% 50%; }
100% { background-position:0% 50%; }
}
@keyframes pulse {
0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,0); }
50% { box-shadow:0 0 0 10px rgba(37,99,235,.12); }
}
@keyframes spin {
to { transform:rotate(360deg); }
}
@keyframes countUp {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
@keyframes borderGlow {
0%,100% { border-color:rgba(59,130,246,.3); }
50% { border-color:rgba(99,102,241,.6); }
}
@keyframes revealBar {
from { width:0; }
to { width:100%; }
}
/* Scroll-reveal class added by JS */
.ae4u-reveal {
opacity:0;
transform:translateY(24px);
transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.ae4u-reveal.ae4u-visible {
opacity:1;
transform:translateY(0);
}
.ae4u-reveal-delay-1 { transition-delay:.12s; }
.ae4u-reveal-delay-2 { transition-delay:.22s; }
.ae4u-reveal-delay-3 { transition-delay:.34s; }
.ae4u-reveal-delay-4 { transition-delay:.46s; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
3. GLOBAL BASE
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
*, *::before, *::after { box-sizing:border-box; }
body {
font-family: var(--font) !important;
color: var(--c-text) !important;
background: var(--c-white) !important;
-webkit-font-smoothing: antialiased !important;
margin: 0 !important;
}
a { transition:color var(--t); text-decoration:none; }
img { max-width:100%; }
/* Remove default WP post padding for our custom pages */
.wp-block-post-content { padding:0 !important; }
.entry-content,
.wp-block-post-content > * { max-width:none !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
4. CUSTOM HEADER (ae4u-hdr)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* Hide old WP header blocks injected by theme */
.wp-block-template-part[data-slug="header"] { background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; position:static !important; }
.wp-block-template-part[data-slug="header"] .wp-block-group,
.wp-block-template-part[data-slug="header"] .wp-block-navigation,
.wp-block-template-part[data-slug="header"] .wp-block-site-logo,
.wp-block-template-part[data-slug="header"] .wp-block-site-title { display:none !important; }
/* Hide auto-inserted post/page title block */
.wp-block-post-title { display:none !important; }
.has-tertiary-background-color.wp-block-group:not(.ae4u-keep) { display:none !important; }
/* Our custom header */
.ae4u-hdr {
position:fixed !important;
top:0 !important; left:0 !important; right:0 !important;
z-index:1000 !important;
background:rgba(255,255,255,.97) !important;
backdrop-filter:blur(24px) !important;
-webkit-backdrop-filter:blur(24px) !important;
border-bottom:1px solid var(--c-border) !important;
box-shadow:0 1px 0 rgba(0,0,0,.05) !important;
transition:box-shadow .3s, background .3s !important;
font-family:var(--font) !important;
}
.ae4u-hdr--scrolled {
box-shadow:0 4px 20px rgba(0,0,0,.09) !important;
background:rgba(255,255,255,.99) !important;
}
.ae4u-hdr__inner {
max-width:1200px !important;
margin:0 auto !important;
padding:0 5% !important;
height:68px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
}
/* Brand */
.ae4u-hdr__brand {
display:flex !important; align-items:center !important; gap:10px !important;
text-decoration:none !important; margin-right:auto !important;
}
.ae4u-hdr__logo {
width:40px !important; height:40px !important;
border-radius:50% !important; object-fit:cover !important;
box-shadow:0 2px 10px rgba(37,99,235,.2) !important;
flex-shrink:0 !important;
}
.ae4u-hdr__name {
font-size:15px !important; font-weight:800 !important;
color:var(--c-dark) !important; letter-spacing:-.3px !important;
white-space:nowrap !important;
}
/* Nav links */
.ae4u-hdr__nav {
display:flex !important; align-items:center !important; gap:2px !important;
}
.ae4u-hdr__link {
font-size:14px !important; font-weight:600 !important;
color:var(--c-muted) !important; text-decoration:none !important;
padding:7px 14px !important; border-radius:var(--r-md) !important;
transition:color .15s, background .15s !important;
white-space:nowrap !important;
}
.ae4u-hdr__link:hover, .ae4u-hdr__link--active {
color:var(--c-blue-500) !important; background:var(--c-blue-50) !important;
}
/* CTA button */
.ae4u-hdr__cta {
display:inline-flex !important; align-items:center !important; gap:7px !important;
font-size:13px !important; font-weight:700 !important;
color:#fff !important; background:var(--c-blue-500) !important;
padding:8px 18px !important; border-radius:99px !important;
text-decoration:none !important; white-space:nowrap !important;
margin-left:10px !important;
transition:background .2s, transform .2s !important;
box-shadow:0 4px 14px rgba(37,99,235,.35) !important;
}
.ae4u-hdr__cta:hover { background:var(--c-blue-700) !important; color:#fff !important; transform:translateY(-1px) !important; }
.ae4u-hdr__cta svg { width:14px !important; height:14px !important; }
/* Hamburger */
.ae4u-hdr__burger {
display:none !important;
background:none !important; border:none !important; cursor:pointer !important;
padding:8px !important; border-radius:var(--r-md) !important;
color:var(--c-muted) !important;
transition:background .15s !important;
margin-left:8px !important;
flex-shrink:0 !important;
}
.ae4u-hdr__burger:hover { background:var(--c-bg) !important; }
.ae4u-hdr__burger-icon { display:flex !important; align-items:center !important; justify-content:center !important; }
.ae4u-hdr__burger-icon--close { display:none !important; }
.ae4u-hdr--open .ae4u-hdr__burger-icon--open { display:none !important; }
.ae4u-hdr--open .ae4u-hdr__burger-icon--close { display:flex !important; }
/* Mobile drawer */
.ae4u-hdr__drawer {
display:none !important;
position:fixed !important;
top:68px !important; left:0 !important; right:0 !important;
background:#fff !important;
border-top:1px solid var(--c-border) !important;
box-shadow:0 20px 40px rgba(0,0,0,.12) !important;
padding:16px 5% 24px !important;
flex-direction:column !important; gap:4px !important;
z-index:999 !important;
animation:fadeUp .25s cubic-bezier(.22,1,.36,1) !important;
}
.ae4u-hdr--open .ae4u-hdr__drawer { display:flex !important; }
.ae4u-hdr__drawer-link {
font-size:16px !important; font-weight:600 !important;
color:var(--c-text) !important; text-decoration:none !important;
padding:12px 14px !important; border-radius:var(--r-md) !important;
transition:background .15s, color .15s !important;
}
.ae4u-hdr__drawer-link:hover { background:var(--c-bg) !important; color:var(--c-blue-500) !important; }
.ae4u-hdr__drawer-cta {
display:inline-flex !important; align-items:center !important;
justify-content:center !important;
font-size:15px !important; font-weight:700 !important;
color:#fff !important; background:var(--c-blue-500) !important;
padding:13px !important; border-radius:var(--r-lg) !important;
text-decoration:none !important; margin-top:10px !important;
box-shadow:var(--sh-blue) !important;
}
/* Mobile overlay */
.ae4u-hdr__overlay {
display:none !important; position:fixed !important; inset:0 !important;
background:rgba(0,0,0,.4) !important; z-index:998 !important;
backdrop-filter:blur(2px) !important;
}
.ae4u-hdr__overlay--show { display:block !important; }
/* Offset page body so fixed header doesn't overlap */
body { padding-top:68px !important; }
/* ââ CUSTOM FOOTER (ae4u-ftr) âââââââââââââââââââââââââââââââââââ */
.wp-block-template-part[data-slug="footer"] { padding:0 !important; background:none !important; }
.ae4u-ftr {
background:var(--c-navy) !important;
border-top:1px solid rgba(255,255,255,.04) !important;
font-family:var(--font) !important;
padding:60px 5% 28px !important;
}
.ae4u-ftr__inner {
max-width:1200px !important; margin:0 auto 44px !important;
display:grid !important;
grid-template-columns:2fr 1fr 1fr 1fr !important;
gap:40px !important;
}
.ae4u-ftr__brand-top {
display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:14px !important;
}
.ae4u-ftr__logo {
width:36px !important; height:36px !important;
border-radius:50% !important; object-fit:cover !important;
}
.ae4u-ftr__brand-name {
font-size:15px !important; font-weight:800 !important;
color:#fff !important; letter-spacing:-.3px !important;
}
.ae4u-ftr__desc {
font-size:13px !important; color:rgba(255,255,255,.38) !important;
line-height:1.65 !important; margin:0 0 18px !important;
}
.ae4u-ftr__yt {
display:inline-flex !important; align-items:center !important; gap:8px !important;
font-size:12px !important; font-weight:700 !important;
color:rgba(255,255,255,.55) !important;
border:1px solid rgba(255,255,255,.12) !important; border-radius:99px !important;
padding:7px 16px !important; text-decoration:none !important;
transition:color .2s, border-color .2s !important;
}
.ae4u-ftr__yt:hover { color:#FF4444 !important; border-color:rgba(255,68,68,.4) !important; }
.ae4u-ftr__yt svg { width:14px !important; height:14px !important; }
.ae4u-ftr__col { display:flex !important; flex-direction:column !important; gap:10px !important; }
.ae4u-ftr__col-hd {
font-size:10px !important; font-weight:700 !important;
letter-spacing:.12em !important; text-transform:uppercase !important;
color:rgba(255,255,255,.3) !important; margin-bottom:6px !important;
}
.ae4u-ftr__col a {
font-size:13px !important; color:rgba(255,255,255,.54) !important;
text-decoration:none !important; font-weight:500 !important;
transition:color .15s !important;
}
.ae4u-ftr__col a:hover { color:#fff !important; }
.ae4u-ftr__bottom {
max-width:1200px !important; margin:0 auto !important;
padding-top:22px !important;
border-top:1px solid rgba(255,255,255,.06) !important;
display:flex !important; align-items:center !important;
justify-content:space-between !important; flex-wrap:wrap !important; gap:8px !important;
font-size:12px !important; color:rgba(255,255,255,.24) !important;
}
/* Responsive header */
@media (max-width:860px) {
.ae4u-hdr__nav { display:none !important; }
.ae4u-hdr__cta { display:none !important; }
.ae4u-hdr__burger { display:flex !important; }
}
@media (max-width:600px) {
.ae4u-ftr__inner { grid-template-columns:1fr 1fr !important; gap:28px !important; }
}
@media (max-width:420px) {
.ae4u-ftr__inner { grid-template-columns:1fr !important; }
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
5. HOMEPAGE â HERO (v6 · Light Sky Theme)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-hero {
background:linear-gradient(150deg, #EBF8FF 0%, #DBEAFE 45%, #E0F2FE 80%, #F0FDF9 100%) !important;
padding:90px 5% 80px !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
/* Full-width breakout */
width:100vw !important;
margin-left:50% !important;
transform:translateX(-50%) !important;
max-width:none !important;
border-bottom:1px solid rgba(37,99,235,.10) !important;
}
/* Animated mesh circles (CSS only, no emoji) */
.ae4u-hero__bg {
position:absolute !important; inset:0 !important;
pointer-events:none !important; overflow:hidden !important;
}
.ae4u-hero__orb {
position:absolute !important;
border-radius:50% !important;
filter:blur(60px) !important;
animation:float 8s ease-in-out infinite !important;
}
.ae4u-hero__orb--1 {
width:560px !important; height:560px !important;
background:rgba(37,99,235,.08) !important;
top:-140px !important; left:-100px !important;
animation-duration:9s !important;
}
.ae4u-hero__orb--2 {
width:440px !important; height:440px !important;
background:rgba(6,182,212,.09) !important;
top:30px !important; right:-80px !important;
animation-duration:7s !important; animation-delay:-3s !important;
}
.ae4u-hero__orb--3 {
width:340px !important; height:340px !important;
background:rgba(16,185,129,.07) !important;
bottom:-80px !important; left:40% !important;
animation-duration:11s !important; animation-delay:-6s !important;
}
/* Animated shimmer line at bottom */
.ae4u-hero::after {
content:'' !important;
position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important;
height:3px !important;
background:linear-gradient(90deg, transparent, var(--c-blue-400), var(--c-cyan), var(--c-teal), var(--c-blue-500), transparent) !important;
background-size:200% !important;
animation:shimmer 3s linear infinite !important;
opacity:.8 !important;
}
.ae4u-hero__inner {
position:relative !important; z-index:2 !important;
max-width:820px !important; margin:0 auto !important;
animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both;
}
/* Eyebrow tag */
.ae4u-hero__eyebrow {
display:inline-flex !important; align-items:center !important; gap:10px !important;
font-size:11px !important; font-weight:700 !important;
letter-spacing:.12em !important; text-transform:uppercase !important;
color:var(--c-blue-700, #1245A8) !important;
background:rgba(37,99,235,.08) !important;
border:1.5px solid rgba(37,99,235,.2) !important;
border-radius:99px !important; padding:7px 18px !important;
margin-bottom:28px !important;
}
.ae4u-hero__eyebrow::before {
content:'' !important;
display:inline-block !important;
width:6px !important; height:6px !important;
border-radius:50% !important;
background:var(--c-blue-500) !important;
animation:pulse 2s ease infinite !important;
}
/* Main title */
.ae4u-hero__title {
font-family:var(--font) !important;
font-size:clamp(38px, 6.5vw, 76px) !important;
font-weight:800 !important; line-height:1.04 !important;
letter-spacing:-2px !important; color:var(--c-dark) !important;
margin:0 0 24px !important;
animation:fadeUp .85s cubic-bezier(.22,1,.36,1) .1s both;
}
.ae4u-hero__title em {
font-style:normal !important;
background:linear-gradient(90deg, var(--c-blue-500) 0%, var(--c-cyan) 50%, var(--c-teal) 100%) !important;
background-size:200% !important;
-webkit-background-clip:text !important;
-webkit-text-fill-color:transparent !important;
background-clip:text !important;
animation:shimmer 4s linear infinite !important;
}
/* Subtitle */
.ae4u-hero__sub {
font-size:clamp(14px, 1.8vw, 18px) !important;
color:var(--c-muted) !important;
line-height:1.75 !important; max-width:560px !important;
margin:0 auto 40px !important; font-weight:400 !important;
animation:fadeUp .85s cubic-bezier(.22,1,.36,1) .2s both;
}
/* CTA buttons */
.ae4u-hero__ctas {
display:flex !important; align-items:center !important;
justify-content:center !important; gap:14px !important;
flex-wrap:wrap !important; margin-bottom:56px !important;
animation:fadeUp .85s cubic-bezier(.22,1,.36,1) .3s both;
}
.ae4u-hero__btn {
display:inline-flex !important; align-items:center !important;
gap:10px !important; font-family:var(--font) !important;
font-size:15px !important; font-weight:700 !important;
padding:14px 32px !important; border-radius:99px !important;
text-decoration:none !important;
transition:transform var(--t-spring), box-shadow .25s !important;
}
.ae4u-hero__btn--primary {
background:linear-gradient(135deg, var(--c-blue-500), var(--c-indigo)) !important;
color:#fff !important;
box-shadow:0 8px 32px rgba(37,99,235,.45) !important;
}
.ae4u-hero__btn--primary:hover {
transform:translateY(-3px) scale(1.02) !important;
box-shadow:0 16px 40px rgba(37,99,235,.55) !important;
color:#fff !important;
}
.ae4u-hero__btn--outline {
background:rgba(255,255,255,.80) !important;
color:var(--c-blue-700) !important;
border:1.5px solid var(--c-blue-200) !important;
backdrop-filter:blur(8px) !important;
}
.ae4u-hero__btn--outline:hover {
background:#fff !important;
color:var(--c-blue-500) !important;
border-color:var(--c-blue-400) !important;
transform:translateY(-2px) !important;
box-shadow:0 8px 24px rgba(37,99,235,.15) !important;
}
/* Icon inside button â SVG wrapper */
.ae4u-btn-icon {
width:18px !important; height:18px !important;
display:inline-flex !important; align-items:center !important;
justify-content:center !important; flex-shrink:0 !important;
}
.ae4u-btn-icon svg { width:18px !important; height:18px !important; }
/* Stats row */
.ae4u-hero__stats {
display:flex !important; align-items:center !important;
justify-content:center !important;
gap:0 !important; flex-wrap:wrap !important;
background:#fff !important;
border:1.5px solid var(--c-border) !important;
border-radius:var(--r-xl) !important;
padding:20px 32px !important;
max-width:640px !important; margin:0 auto !important;
box-shadow:0 4px 24px rgba(37,99,235,.1) !important;
animation:fadeUp .85s cubic-bezier(.22,1,.36,1) .4s both;
}
.ae4u-hero__stat {
display:flex !important; flex-direction:column !important;
align-items:center !important; flex:1 !important; min-width:80px !important;
}
.ae4u-hero__stat-n {
font-size:26px !important; font-weight:800 !important;
color:var(--c-blue-500) !important; line-height:1 !important; margin-bottom:5px !important;
}
.ae4u-hero__stat-l {
font-size:11px !important; color:var(--c-muted) !important;
font-weight:600 !important; letter-spacing:.05em !important; text-align:center !important;
}
.ae4u-hero__stat-div {
width:1px !important; height:36px !important;
background:var(--c-border) !important;
flex-shrink:0 !important; margin:0 4px !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
6. PROGRAMS SECTION (homepage)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-programs {
padding:80px 5% 60px !important;
max-width:1120px !important; margin:0 auto !important;
}
.ae4u-programs__header {
text-align:center !important; margin-bottom:48px !important;
}
.ae4u-programs__overline {
display:inline-block !important;
font-size:11px !important; font-weight:700 !important;
letter-spacing:.14em !important; text-transform:uppercase !important;
color:var(--c-blue-500) !important; margin-bottom:14px !important;
}
.ae4u-programs__title {
font-family:var(--font) !important;
font-size:clamp(24px, 3.5vw, 40px) !important;
font-weight:800 !important; color:var(--c-dark) !important;
letter-spacing:-1px !important; margin:0 0 12px !important;
line-height:1.15 !important;
}
.ae4u-programs__sub {
font-size:16px !important; color:var(--c-muted) !important;
margin:0 !important; max-width:500px !important;
margin:0 auto !important; line-height:1.7 !important;
}
/* Program card grid */
.ae4u-programs__grid {
display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:20px !important;
}
@media (max-width:680px) {
.ae4u-programs__grid { grid-template-columns:1fr !important; }
}
/* Individual program card */
.ae4u-pcard {
background:var(--c-white) !important;
border:1.5px solid var(--c-border) !important;
border-radius:20px !important;
padding:32px !important;
text-decoration:none !important;
color:var(--c-text) !important;
display:flex !important; align-items:flex-start !important; gap:22px !important;
position:relative !important; overflow:hidden !important;
transition:transform var(--t-md), box-shadow var(--t-md), border-color var(--t-md) !important;
box-shadow:var(--sh-card) !important;
}
.ae4u-pcard::before {
content:'' !important;
position:absolute !important; inset:0 !important;
border-radius:20px !important;
opacity:0 !important;
transition:opacity .35s !important;
}
.ae4u-pcard:hover::before { opacity:1 !important; }
.ae4u-pcard:hover {
transform:translateY(-6px) !important;
box-shadow:0 24px 60px -12px rgba(0,0,0,.16) !important;
border-color:transparent !important;
color:var(--c-text) !important;
}
/* Color variants via ::before background */
.ae4u-pcard--green::before { background:linear-gradient(145deg, #F0FDF4, #DCFCE7) !important; }
.ae4u-pcard--blue::before { background:linear-gradient(145deg, #EFF6FF, #DBEAFE) !important; }
.ae4u-pcard--orange::before { background:linear-gradient(145deg, #FFF7ED, #FED7AA) !important; }
.ae4u-pcard--purple::before { background:linear-gradient(145deg, #F5F3FF, #DDD6FE) !important; }
/* Card icon circle */
.ae4u-pcard__icon {
width:56px !important; height:56px !important;
border-radius:16px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
flex-shrink:0 !important;
position:relative !important; z-index:1 !important;
}
.ae4u-pcard--green .ae4u-pcard__icon { background:linear-gradient(135deg, #10B981, #059669) !important; }
.ae4u-pcard--blue .ae4u-pcard__icon { background:linear-gradient(135deg, #3B82F6, #2563EB) !important; }
.ae4u-pcard--orange .ae4u-pcard__icon { background:linear-gradient(135deg, #F97316, #EA580C) !important; }
.ae4u-pcard--purple .ae4u-pcard__icon { background:linear-gradient(135deg, #8B5CF6, #7C3AED) !important; }
.ae4u-pcard__icon svg { width:28px !important; height:28px !important; color:#fff !important; }
/* Card body */
.ae4u-pcard__body { flex:1 !important; position:relative !important; z-index:1 !important; }
.ae4u-pcard__title {
font-size:19px !important; font-weight:800 !important;
color:var(--c-dark) !important; margin:0 0 8px !important;
letter-spacing:-.3px !important; line-height:1.2 !important;
}
.ae4u-pcard__desc {
font-size:13px !important; color:var(--c-muted) !important;
line-height:1.65 !important; margin:0 0 16px !important; font-weight:400 !important;
}
.ae4u-pcard__meta {
display:flex !important; align-items:center !important;
gap:8px !important; flex-wrap:wrap !important;
}
.ae4u-pcard__badge {
font-size:11px !important; font-weight:700 !important;
padding:3px 10px !important; border-radius:99px !important;
background:rgba(0,0,0,.05) !important; color:var(--c-muted) !important;
}
.ae4u-pcard__live { color:var(--c-green-500) !important; font-size:11px !important; font-weight:700 !important; }
.ae4u-pcard__soon { color:var(--c-orange-500) !important; font-size:11px !important; font-weight:700 !important; }
.ae4u-pcard__live::before, .ae4u-pcard__soon::before {
content:'' !important; display:inline-block !important;
width:6px !important; height:6px !important; border-radius:50% !important;
margin-right:5px !important; vertical-align:middle !important;
}
.ae4u-pcard__live::before { background:var(--c-green-500) !important; animation:pulse 2s ease infinite !important; }
.ae4u-pcard__soon::before { background:var(--c-orange-500) !important; }
/* Card arrow */
.ae4u-pcard__arrow {
position:relative !important; z-index:1 !important;
align-self:center !important;
width:36px !important; height:36px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
border-radius:50% !important; border:1.5px solid var(--c-border) !important;
color:var(--c-subtle) !important;
transition:background var(--t), border-color var(--t), color var(--t), transform var(--t-spring) !important;
flex-shrink:0 !important;
}
.ae4u-pcard__arrow svg { width:16px !important; height:16px !important; }
.ae4u-pcard:hover .ae4u-pcard__arrow {
background:var(--c-blue-500) !important;
border-color:var(--c-blue-500) !important;
color:#fff !important;
transform:translateX(4px) !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
7. WHY CHOOSE US SECTION
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-features {
background:linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%) !important;
width:100vw !important; margin-left:50% !important; transform:translateX(-50%) !important;
max-width:none !important; padding:72px 5% !important;
border-top:1px solid rgba(37,99,235,.08) !important;
border-bottom:1px solid rgba(37,99,235,.06) !important;
}
.ae4u-features__inner {
max-width:1120px !important; margin:0 auto !important;
display:grid !important;
grid-template-columns:1fr 1fr 1fr !important;
gap:28px !important;
}
@media (max-width:900px) {
.ae4u-features__inner { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:560px) {
.ae4u-features__inner { grid-template-columns:1fr !important; }
}
.ae4u-feature {
background:var(--c-white) !important;
border-radius:var(--r-xl) !important;
padding:28px !important;
box-shadow:var(--sh-sm) !important;
border:1px solid var(--c-border) !important;
}
.ae4u-feature__icon {
width:48px !important; height:48px !important;
border-radius:12px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
margin-bottom:18px !important;
}
.ae4u-feature__icon--blue { background:var(--c-blue-50) !important; color:var(--c-blue-500) !important; }
.ae4u-feature__icon--green { background:var(--c-green-50) !important; color:var(--c-green-500) !important; }
.ae4u-feature__icon--purple { background:var(--c-purple-50) !important; color:var(--c-purple-500) !important; }
.ae4u-feature__icon--orange { background:var(--c-orange-50) !important; color:var(--c-orange-500) !important; }
.ae4u-feature__icon--cyan { background:#ECFEFF !important; color:var(--c-cyan) !important; }
.ae4u-feature__icon svg { width:24px !important; height:24px !important; }
.ae4u-feature__title {
font-size:15px !important; font-weight:800 !important;
color:var(--c-dark) !important; margin:0 0 8px !important;
}
.ae4u-feature__desc {
font-size:13px !important; color:var(--c-muted) !important;
line-height:1.65 !important; margin:0 !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
8. YOUTUBE CTA BANNER
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-yt-banner {
background:linear-gradient(135deg, #1E40AF 0%, #1D4ED8 45%, #0369A1 100%) !important;
width:100vw !important; margin-left:50% !important; transform:translateX(-50%) !important;
max-width:none !important; padding:60px 5% !important;
position:relative !important; overflow:hidden !important;
}
.ae4u-yt-banner::before {
content:'' !important; position:absolute !important;
inset:0 !important; pointer-events:none !important;
background:radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.08) 0%, transparent 65%) !important;
}
.ae4u-yt-banner__inner {
max-width:1120px !important; margin:0 auto !important;
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:40px !important; flex-wrap:wrap !important;
position:relative !important; z-index:1 !important;
}
.ae4u-yt-banner__text { flex:1 !important; min-width:220px !important; }
.ae4u-yt-banner__title {
font-size:clamp(20px, 3vw, 30px) !important;
font-weight:800 !important; color:#fff !important;
margin:0 0 10px !important; letter-spacing:-.5px !important;
}
.ae4u-yt-banner__sub {
font-size:14px !important; color:rgba(255,255,255,.5) !important;
line-height:1.7 !important; margin:0 !important;
}
.ae4u-yt-btn {
display:inline-flex !important; align-items:center !important; gap:10px !important;
background:#FF0000 !important; color:#fff !important;
font-family:var(--font) !important; font-size:14px !important; font-weight:700 !important;
padding:13px 28px !important; border-radius:99px !important;
text-decoration:none !important; flex-shrink:0 !important;
transition:background .2s, transform var(--t-spring) !important;
box-shadow:0 6px 24px rgba(255,0,0,.38) !important;
}
.ae4u-yt-btn svg { width:20px !important; height:20px !important; }
.ae4u-yt-btn:hover { background:#CC0000 !important; transform:translateY(-3px) scale(1.02) !important; color:#fff !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
9. PAGE HEADER (index pages)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-page-header {
padding:56px 5% 48px !important;
position:relative !important; overflow:hidden !important;
width:100vw !important; margin-left:50% !important;
transform:translateX(-50%) !important; max-width:none !important;
}
.ae4u-page-header--default { background:linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 60%, #E0F2FE 100%) !important; border-bottom:1px solid rgba(37,99,235,.12) !important; }
.ae4u-page-header--green { background:linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 60%, #CCFBF1 100%) !important; border-bottom:1px solid rgba(16,185,129,.15) !important; }
.ae4u-page-header--blue { background:linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 60%, #E0F2FE 100%) !important; border-bottom:1px solid rgba(37,99,235,.12) !important; }
.ae4u-page-header--orange { background:linear-gradient(135deg, #FFF7ED 0%, #FED7AA 60%, #FFEDD5 100%) !important; border-bottom:1px solid rgba(249,115,22,.15) !important; }
.ae4u-page-header--purple { background:linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 60%, #DDD6FE 100%) !important; border-bottom:1px solid rgba(139,92,246,.15) !important; }
/* Bottom accent line */
.ae4u-page-header::after {
content:'' !important; position:absolute !important;
bottom:0 !important; left:0 !important; right:0 !important; height:3px !important;
}
.ae4u-page-header--green::after { background:linear-gradient(90deg, var(--c-teal), var(--c-green-500), transparent) !important; }
.ae4u-page-header--blue::after { background:linear-gradient(90deg, var(--c-blue-500), var(--c-cyan), transparent) !important; }
.ae4u-page-header--orange::after { background:linear-gradient(90deg, var(--c-orange-500), #FBBF24, transparent) !important; }
.ae4u-page-header--purple::after { background:linear-gradient(90deg, var(--c-purple-500), var(--c-indigo), transparent) !important; }
.ae4u-page-header--default::after { background:linear-gradient(90deg, var(--c-blue-500), var(--c-cyan), var(--c-teal), transparent) !important; }
.ae4u-page-header__inner {
max-width:1120px !important; margin:0 auto !important;
animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;
}
.ae4u-page-header__breadcrumb {
display:flex !important; align-items:center !important; gap:6px !important;
font-size:12px !important; color:var(--c-muted) !important;
margin-bottom:16px !important; font-weight:500 !important;
}
.ae4u-page-header__breadcrumb a { color:var(--c-muted) !important; transition:color .15s !important; }
.ae4u-page-header__breadcrumb a:hover { color:var(--c-blue-500) !important; }
.ae4u-page-header__breadcrumb span { color:var(--c-subtle) !important; }
.ae4u-page-header__tag {
display:inline-block !important;
font-size:10px !important; font-weight:700 !important;
letter-spacing:.12em !important; text-transform:uppercase !important;
color:var(--c-blue-500) !important; margin-bottom:12px !important;
}
.ae4u-page-header--green .ae4u-page-header__tag { color:var(--c-green-700) !important; }
.ae4u-page-header--orange .ae4u-page-header__tag { color:var(--c-orange-700) !important; }
.ae4u-page-header--purple .ae4u-page-header__tag { color:var(--c-purple-700) !important; }
.ae4u-page-header__title {
font-family:var(--font) !important;
font-size:clamp(26px, 4.5vw, 52px) !important;
font-weight:800 !important; color:var(--c-dark) !important;
line-height:1.1 !important; letter-spacing:-1px !important;
margin:0 0 16px !important;
}
.ae4u-page-header__desc {
font-size:clamp(13px, 1.5vw, 16px) !important;
color:var(--c-muted) !important;
max-width:620px !important; line-height:1.7 !important; margin:0 !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
10. INDEX PAGE LAYOUT
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-index {
max-width:1120px !important; margin:0 auto !important;
padding:48px 5% 80px !important;
}
/* Stat bar */
.ae4u-stat-bar {
display:flex !important; align-items:center !important;
gap:0 !important; flex-wrap:wrap !important;
padding:22px 28px !important;
border-radius:var(--r-xl) !important;
background:var(--c-white) !important;
box-shadow:var(--sh-sm) !important;
border:1.5px solid var(--c-border) !important;
border-left:4px solid var(--c-blue-500) !important;
margin-bottom:52px !important;
}
.ae4u-stat-bar--green { border-left-color:var(--c-green-500) !important; }
.ae4u-stat-bar--blue { border-left-color:var(--c-blue-500) !important; }
.ae4u-stat-bar--orange { border-left-color:var(--c-orange-500) !important; }
.ae4u-stat-bar--purple { border-left-color:var(--c-purple-500) !important; }
.ae4u-stat {
display:flex !important; flex-direction:column !important;
align-items:center !important; flex:1 !important; min-width:80px !important;
}
.ae4u-stat__n {
font-size:28px !important; font-weight:800 !important;
color:var(--c-dark) !important; line-height:1 !important; margin-bottom:4px !important;
}
.ae4u-stat__l {
font-size:11px !important; color:var(--c-muted) !important;
font-weight:600 !important; text-align:center !important; letter-spacing:.04em !important;
}
.ae4u-stat--green .ae4u-stat__n { color:var(--c-green-500) !important; }
.ae4u-stat--blue .ae4u-stat__n { color:var(--c-blue-500) !important; }
.ae4u-stat--orange .ae4u-stat__n { color:var(--c-orange-500) !important; }
.ae4u-stat--purple .ae4u-stat__n { color:var(--c-purple-500) !important; }
.ae4u-stat-divider {
width:1px !important; height:40px !important;
background:var(--c-border) !important;
margin:0 8px !important; flex-shrink:0 !important;
}
/* Sections */
.ae4u-section { margin-bottom:68px !important; }
.ae4u-section-hd {
display:flex !important; align-items:flex-start !important;
justify-content:space-between !important; gap:16px !important; flex-wrap:wrap !important;
padding-bottom:20px !important; margin-bottom:28px !important;
border-bottom:2px solid var(--c-border) !important;
}
.ae4u-section-hd--green { border-bottom-color:var(--c-green-100) !important; }
.ae4u-section-hd--blue { border-bottom-color:var(--c-blue-100) !important; }
.ae4u-section-hd--orange { border-bottom-color:var(--c-orange-100) !important; }
.ae4u-section-hd--purple { border-bottom-color:var(--c-purple-100) !important; }
.ae4u-section-title {
font-size:22px !important; font-weight:800 !important;
color:var(--c-dark) !important; margin:0 0 5px !important; letter-spacing:-.3px !important;
}
.ae4u-section-sub {
font-size:13px !important; color:var(--c-muted) !important;
font-weight:500 !important; margin:0 !important; line-height:1.6 !important;
}
.ae4u-section-badge {
display:inline-flex !important; align-items:center !important;
font-size:10px !important; font-weight:700 !important; letter-spacing:.08em !important;
padding:5px 14px !important; border-radius:99px !important;
text-transform:uppercase !important; white-space:nowrap !important; flex-shrink:0 !important;
background:var(--c-blue-50) !important; color:var(--c-blue-500) !important;
}
.ae4u-section-badge--green { background:var(--c-green-50) !important; color:var(--c-green-700) !important; }
.ae4u-section-badge--purple { background:var(--c-purple-50) !important; color:var(--c-purple-700) !important; }
.ae4u-section-badge--orange { background:var(--c-orange-50) !important; color:var(--c-orange-700) !important; }
/* Book block */
.ae4u-book-block { margin-bottom:32px !important; }
.ae4u-book-label {
display:inline-flex !important; align-items:center !important;
gap:8px !important; font-size:11px !important; font-weight:700 !important;
color:var(--c-muted) !important; text-transform:uppercase !important;
letter-spacing:.09em !important; margin-bottom:14px !important;
padding:5px 14px 5px 6px !important;
background:var(--c-bg) !important; border-radius:99px !important;
border:1px solid var(--c-border) !important;
}
.ae4u-book-icon {
width:24px !important; height:24px !important;
background:#fff !important; border-radius:50% !important;
display:flex !important; align-items:center !important; justify-content:center !important;
font-size:13px !important;
box-shadow:0 1px 4px rgba(0,0,0,.1) !important;
}
.ae4u-book-label--blue { color:var(--c-blue-500) !important; background:var(--c-blue-50) !important; border-color:var(--c-blue-100) !important; }
.ae4u-book-label--purple { color:var(--c-purple-700) !important; background:var(--c-purple-50) !important; border-color:var(--c-purple-100) !important; }
/* Card grid */
.ae4u-grid {
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(185px, 1fr)) !important;
gap:14px !important;
}
/* Lesson card */
.ae4u-card {
background:var(--c-white) !important;
border:1.5px solid var(--c-border) !important;
border-radius:var(--r-lg) !important;
padding:18px 16px !important;
position:relative !important; overflow:hidden !important;
text-decoration:none !important; color:var(--c-text) !important;
display:flex !important; flex-direction:column !important; gap:6px !important;
transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, border-color .28s !important;
box-shadow:var(--sh-card) !important;
}
.ae4u-card::after {
content:'' !important;
position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
height:3px !important;
background:linear-gradient(90deg, var(--c-blue-500), var(--c-cyan)) !important;
opacity:0 !important; transition:opacity .28s !important;
}
.ae4u-card--live:hover::after { opacity:1 !important; }
.ae4u-card--live:hover {
transform:translateY(-5px) !important;
box-shadow:0 16px 40px -6px rgba(0,0,0,.12) !important;
border-color:transparent !important;
}
.ae4u-card--blue::after { background:linear-gradient(90deg, var(--c-blue-500), var(--c-indigo)) !important; }
.ae4u-card--purple::after { background:linear-gradient(90deg, var(--c-purple-500), var(--c-indigo)) !important; }
.ae4u-card--green::after { background:linear-gradient(90deg, var(--c-green-500), var(--c-teal)) !important; }
.ae4u-card--soon {
opacity:.5 !important; cursor:default !important;
pointer-events:none !important;
background:var(--c-bg) !important; border-style:dashed !important;
}
.ae4u-card__label {
font-size:10px !important; font-weight:700 !important;
color:var(--c-subtle) !important; text-transform:uppercase !important; letter-spacing:.09em !important;
}
.ae4u-card--blue .ae4u-card__label { color:var(--c-blue-500) !important; }
.ae4u-card--purple .ae4u-card__label { color:var(--c-purple-500) !important; }
.ae4u-card__title {
font-size:13px !important; font-weight:700 !important;
color:var(--c-text) !important; line-height:1.4 !important;
flex:1 !important; margin:0 !important;
}
.ae4u-card__badges {
display:flex !important; flex-wrap:wrap !important; gap:5px !important;
margin-top:8px !important; padding-top:8px !important;
border-top:1px solid var(--c-border) !important;
}
.ae4u-badge {
display:inline-flex !important; align-items:center !important;
font-size:10px !important; font-weight:700 !important;
padding:3px 9px !important; border-radius:99px !important;
letter-spacing:.02em !important; white-space:nowrap !important;
}
.ae4u-badge--video { background:var(--c-blue-50) !important; color:var(--c-blue-500) !important; }
.ae4u-badge--ex { background:var(--c-green-50) !important; color:var(--c-green-700) !important; }
.ae4u-badge--mcq { background:var(--c-orange-50) !important; color:var(--c-orange-700) !important; }
.ae4u-badge--fill { background:var(--c-purple-50) !important; color:var(--c-purple-700) !important; }
.ae4u-badge--drag { background:#EEF2FF !important; color:#3730A3 !important; }
.ae4u-badge--soon { background:var(--c-bg) !important; color:var(--c-subtle) !important; border:1px solid var(--c-border) !important; }
/* Coming soon box */
.ae4u-coming-box {
background:var(--c-bg) !important;
border:1.5px dashed var(--c-border) !important;
border-radius:var(--r-xl) !important;
padding:36px 32px !important;
display:flex !important; align-items:center !important;
gap:24px !important; flex-wrap:wrap !important;
}
.ae4u-coming-box__icon {
width:52px !important; height:52px !important;
border-radius:14px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:var(--c-white) !important;
box-shadow:var(--sh-sm) !important; flex-shrink:0 !important;
}
.ae4u-coming-box__icon svg { width:26px !important; height:26px !important; color:var(--c-muted) !important; }
.ae4u-coming-box__body { flex:1 !important; }
.ae4u-coming-box__title {
font-size:16px !important; font-weight:800 !important;
color:var(--c-text) !important; margin:0 0 6px !important;
}
.ae4u-coming-box__desc {
font-size:13px !important; color:var(--c-muted) !important;
line-height:1.65 !important; margin:0 !important;
}
/* YouTube CTA (inline, within sections) */
.ae4u-yt-cta {
display:flex !important; align-items:center !important; gap:20px !important;
flex-wrap:wrap !important;
background:linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%) !important;
border-radius:var(--r-xl) !important; padding:26px 30px !important;
margin-top:32px !important;
box-shadow:0 8px 32px -4px rgba(37,99,235,.28) !important;
}
.ae4u-yt-cta__body { flex:1 !important; min-width:180px !important; }
.ae4u-yt-cta__title { font-size:15px !important; font-weight:800 !important; color:#fff !important; margin:0 0 4px !important; }
.ae4u-yt-cta__desc { font-size:13px !important; color:rgba(255,255,255,.5) !important; margin:0 !important; line-height:1.55 !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
11. LESSON PAGE
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.lesson-page, .single-post .wp-block-post-content {
max-width:820px !important; margin:0 auto !important;
padding:36px 5% 80px !important;
}
.ae4u-lesson-chips, .lesson-tags {
display:flex !important; align-items:center !important;
gap:8px !important; flex-wrap:wrap !important;
margin-bottom:22px !important;
animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .15s both;
}
.ae4u-chip, .lesson-tag {
display:inline-flex !important; align-items:center !important;
font-family:var(--font) !important; font-size:11px !important; font-weight:700 !important;
padding:5px 13px !important; border-radius:99px !important;
background:var(--c-bg) !important; border:1px solid var(--c-border) !important;
color:var(--c-muted) !important; white-space:nowrap !important; letter-spacing:.03em !important;
}
.ae4u-chip--green, .lesson-tag--green {
background:var(--c-green-50) !important; border-color:var(--c-green-100) !important; color:var(--c-green-700) !important;
}
.ae4u-chip--blue { background:var(--c-blue-50) !important; border-color:var(--c-blue-100) !important; color:var(--c-blue-500) !important; }
.ae4u-chip--purple { background:var(--c-purple-50) !important; border-color:var(--c-purple-100) !important; color:var(--c-purple-700) !important; }
.lesson-title, .lesson-header h1 {
font-family:var(--font) !important;
font-size:clamp(22px, 3vw, 36px) !important;
font-weight:800 !important; color:var(--c-dark) !important;
line-height:1.2 !important; letter-spacing:-.5px !important;
margin:0 0 14px !important;
animation:fadeUp .6s cubic-bezier(.22,1,.36,1) .2s both;
}
.lesson-meta {
display:flex !important; align-items:center !important;
gap:10px !important; flex-wrap:wrap !important;
margin-bottom:28px !important; font-size:13px !important; color:var(--c-muted) !important;
animation:fadeUp .5s cubic-bezier(.22,1,.36,1) .25s both;
}
.lesson-meta span {
display:inline-flex !important; align-items:center !important; gap:5px !important;
font-weight:600 !important; padding:4px 12px !important;
border-radius:99px !important;
background:var(--c-bg) !important; border:1px solid var(--c-border) !important;
}
/* Video embed */
.wp-block-embed-youtube, .lesson-video-wrap {
border-radius:20px !important; overflow:hidden !important;
box-shadow:0 20px 60px -10px rgba(0,0,0,.2) !important;
margin-bottom:32px !important;
transition:transform var(--t-md), box-shadow var(--t-md) !important;
animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .3s both;
background:#000 !important;
}
.wp-block-embed-youtube:hover, .lesson-video-wrap:hover {
transform:translateY(-4px) !important;
box-shadow:0 30px 70px -12px rgba(0,0,0,.26) !important;
}
.wp-block-embed__wrapper {
position:relative !important; padding-bottom:56.25% !important; height:0 !important;
}
.wp-block-embed__wrapper iframe, .lesson-video-wrap iframe {
position:absolute !important; top:0 !important; left:0 !important;
width:100% !important; height:100% !important; border:none !important;
}
/* Exercise section */
.lesson-exercise {
background:linear-gradient(135deg, #EFF6FF 0%, #fff 100%) !important;
border:1.5px solid var(--c-blue-100) !important;
border-radius:20px !important; padding:32px !important;
margin-top:8px !important;
animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .4s both;
position:relative !important; overflow:hidden !important;
}
.lesson-exercise::before {
content:'' !important; position:absolute !important;
top:0 !important; left:0 !important; right:0 !important; height:3px !important;
background:linear-gradient(90deg, var(--c-blue-500), var(--c-indigo)) !important;
}
.lesson-exercise-header { display:flex !important; align-items:flex-start !important; gap:16px !important; margin-bottom:24px !important; }
.lesson-exercise-icon { font-size:28px !important; flex-shrink:0 !important; line-height:1 !important; }
.lesson-exercise-title {
font-size:19px !important; font-weight:800 !important; color:var(--c-dark) !important; margin:0 0 5px !important;
}
.lesson-exercise-desc { font-size:13px !important; color:var(--c-muted) !important; margin:0 !important; line-height:1.6 !important; }
/* Lesson nav */
.lesson-nav, .ae4u-lesson-nav {
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:12px !important;
margin-top:48px !important; padding-top:28px !important;
border-top:1px solid var(--c-border) !important;
animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .5s both;
}
.lesson-nav-btn, .ae4u-lesson-nav a, .ae4u-lesson-nav span {
display:inline-flex !important; align-items:center !important; gap:8px !important;
font-family:var(--font) !important; font-size:14px !important; font-weight:700 !important;
padding:11px 22px !important; border-radius:var(--r-lg) !important;
text-decoration:none !important; transition:all var(--t-md) !important;
}
.lesson-nav-prev { background:var(--c-bg) !important; color:var(--c-muted) !important; border:1px solid var(--c-border) !important; }
.lesson-nav-prev:hover { background:var(--c-blue-50) !important; color:var(--c-blue-500) !important; }
.lesson-nav-next, .ae4u-lesson-nav__next {
background:linear-gradient(135deg, var(--c-blue-500), var(--c-indigo)) !important;
color:#fff !important; box-shadow:var(--sh-blue) !important; margin-left:auto !important;
}
.lesson-nav-next:hover { transform:translateY(-2px) !important; box-shadow:0 14px 36px rgba(37,99,235,.4) !important; color:#fff !important; }
.lesson-nav-disabled { opacity:.38 !important; cursor:default !important; pointer-events:none !important; }
/* Breadcrumb */
.lesson-breadcrumb {
display:flex !important; align-items:center !important; gap:6px !important;
font-size:13px !important; font-weight:500 !important; color:var(--c-muted) !important;
margin-bottom:20px !important; flex-wrap:wrap !important;
animation:fadeIn .4s ease both;
}
.lesson-breadcrumb a { color:var(--c-muted) !important; text-decoration:none !important; }
.lesson-breadcrumb a:hover { color:var(--c-blue-500) !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
12. CONTACT PAGE
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-contact-wrap { max-width:1000px !important; margin:0 auto !important; padding:52px 5% 80px !important; }
.ae4u-contact-grid { display:grid !important; grid-template-columns:1fr 1.7fr !important; gap:52px !important; }
@media (max-width:820px) { .ae4u-contact-grid { grid-template-columns:1fr !important; } }
.ae4u-contact-info__title { font-size:22px !important; font-weight:800 !important; color:var(--c-dark) !important; margin:0 0 12px !important; }
.ae4u-contact-info__desc { font-size:14px !important; color:var(--c-muted) !important; line-height:1.7 !important; margin:0 0 28px !important; }
.ae4u-contact-links { display:flex !important; flex-direction:column !important; gap:10px !important; }
.ae4u-contact-link {
display:flex !important; align-items:center !important; gap:14px !important;
padding:14px 18px !important; background:var(--c-bg) !important;
border:1px solid var(--c-border) !important; border-radius:var(--r-lg) !important;
text-decoration:none !important; color:var(--c-text) !important;
transition:transform .2s, box-shadow .2s !important;
}
.ae4u-contact-link:hover { transform:translateX(4px) !important; box-shadow:var(--sh-sm) !important; }
.ae4u-contact-link--yt { background:#FFF1F1 !important; border-color:#FECACA !important; }
.ae4u-contact-link__icon { width:38px !important; height:38px !important; border-radius:10px !important; background:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:var(--sh-sm) !important; flex-shrink:0 !important; }
.ae4u-contact-link__icon svg { width:20px !important; height:20px !important; }
.ae4u-contact-link strong { display:block !important; font-size:13px !important; font-weight:700 !important; color:var(--c-dark) !important; }
.ae4u-contact-link span { font-size:12px !important; color:var(--c-muted) !important; }
.ae4u-contact-form-wrap {
background:var(--c-white) !important; border:1.5px solid var(--c-border) !important;
border-radius:20px !important; padding:36px 32px !important; box-shadow:var(--sh-md) !important;
}
.ae4u-contact-form__title { font-size:20px !important; font-weight:800 !important; color:var(--c-dark) !important; margin:0 0 24px !important; }
.ae4u-contact-form { display:flex !important; flex-direction:column !important; gap:18px !important; }
.ae4u-form-row { display:flex !important; flex-direction:column !important; gap:6px !important; }
.ae4u-form-label { font-size:13px !important; font-weight:700 !important; color:var(--c-text) !important; }
.ae4u-form-input {
font-family:var(--font) !important; font-size:14px !important; color:var(--c-text) !important;
background:var(--c-bg) !important; border:1.5px solid var(--c-border) !important;
border-radius:var(--r-md) !important; padding:11px 14px !important;
outline:none !important; transition:border-color .2s, box-shadow .2s !important; width:100% !important;
}
.ae4u-form-input:focus { border-color:var(--c-blue-500) !important; box-shadow:0 0 0 3px rgba(37,99,235,.1) !important; }
.ae4u-form-textarea { min-height:120px !important; resize:vertical !important; }
.ae4u-form-btn {
font-family:var(--font) !important; font-size:15px !important; font-weight:700 !important;
color:#fff !important; background:linear-gradient(135deg, var(--c-blue-500), var(--c-indigo)) !important;
border:none !important; border-radius:99px !important; padding:13px 32px !important;
cursor:pointer !important; transition:transform var(--t-spring), box-shadow .25s, opacity .2s !important;
box-shadow:var(--sh-blue) !important; align-self:flex-start !important;
}
.ae4u-form-btn:hover { transform:translateY(-2px) scale(1.02) !important; box-shadow:0 14px 36px rgba(37,99,235,.38) !important; }
.ae4u-form-btn:disabled { opacity:.6 !important; transform:none !important; cursor:wait !important; }
.ae4u-form-feedback { padding:12px 16px !important; border-radius:var(--r-md) !important; font-size:14px !important; font-weight:600 !important; }
.ae4u-form-feedback--success { background:var(--c-green-50) !important; color:var(--c-green-700) !important; border:1px solid var(--c-green-100) !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
13. FOOTER
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
.ae4u-footer {
background:var(--c-navy) !important;
border-top:1px solid rgba(255,255,255,.04) !important;
font-family:var(--font) !important;
padding:56px 5% 28px !important;
width:100vw !important; margin-left:50% !important; transform:translateX(-50%) !important;
max-width:none !important;
}
.ae4u-footer__grid {
max-width:1120px !important; margin:0 auto 44px !important;
display:grid !important;
grid-template-columns:2fr 1fr 1fr 1fr !important;
gap:40px !important;
}
.ae4u-footer__brand-row { display:flex !important; align-items:center !important; gap:10px !important; margin-bottom:14px !important; }
.ae4u-footer__logo-wrap { display:flex !important; align-items:center !important; gap:10px !important; }
.ae4u-footer__logo-wrap img { width:38px !important; height:38px !important; border-radius:50% !important; object-fit:cover !important; }
.ae4u-footer__brand-name { font-size:16px !important; font-weight:800 !important; color:#fff !important; letter-spacing:-.3px !important; }
.ae4u-footer__brand-desc { font-size:13px !important; color:rgba(255,255,255,.38) !important; line-height:1.65 !important; margin:0 0 18px !important; }
.ae4u-footer__yt-link {
display:inline-flex !important; align-items:center !important; gap:7px !important;
font-size:12px !important; font-weight:700 !important;
color:rgba(255,255,255,.55) !important;
border:1px solid rgba(255,255,255,.12) !important; border-radius:99px !important;
padding:6px 14px !important; text-decoration:none !important;
transition:color .2s, border-color .2s !important;
}
.ae4u-footer__yt-link svg { width:14px !important; height:14px !important; }
.ae4u-footer__yt-link:hover { color:#FF4444 !important; border-color:rgba(255,68,68,.35) !important; }
.ae4u-footer__col { display:flex !important; flex-direction:column !important; gap:9px !important; }
.ae4u-footer__col-title {
font-size:10px !important; font-weight:700 !important; letter-spacing:.1em !important;
text-transform:uppercase !important; color:rgba(255,255,255,.32) !important;
margin:0 0 8px !important;
}
.ae4u-footer__col a { font-size:13px !important; color:rgba(255,255,255,.52) !important; text-decoration:none !important; font-weight:500 !important; transition:color .15s !important; }
.ae4u-footer__col a:hover { color:#fff !important; }
.ae4u-footer__bottom {
max-width:1120px !important; margin:0 auto !important;
padding-top:22px !important; border-top:1px solid rgba(255,255,255,.06) !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
font-size:12px !important; color:rgba(255,255,255,.25) !important; font-weight:500 !important;
flex-wrap:wrap !important; gap:8px !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
14. WP BLOCK OVERRIDES (post title shown by theme)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* Hide auto-inserted page title on our custom pages */
.page .wp-block-post-title:not(.ae4u-keep-title) {
display:none !important;
}
/* Keep post content from adding extra spacing */
.wp-block-post-content > .wp-block-html:first-child {
margin-top:0 !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
14b. CLASS ALIASES (backwards compat with existing page content)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* Old: .ae4u-section-header â new: .ae4u-section-hd */
.ae4u-section-header { display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; flex-wrap:wrap !important; padding-bottom:20px !important; margin-bottom:28px !important; border-bottom:2px solid var(--c-border) !important; }
.ae4u-section-header--green { border-bottom-color:var(--c-green-100) !important; }
.ae4u-section-header--blue { border-bottom-color:var(--c-blue-100) !important; }
.ae4u-section-header--orange { border-bottom-color:var(--c-orange-100) !important; }
.ae4u-section-header--purple { border-bottom-color:var(--c-purple-100) !important; }
.ae4u-section-title { font-size:22px !important; font-weight:800 !important; color:var(--c-dark) !important; margin:0 0 5px !important; letter-spacing:-.3px !important; }
.ae4u-section-subtitle { font-size:13px !important; color:var(--c-muted) !important; font-weight:500 !important; margin:0 !important; line-height:1.6 !important; }
/* Old: .ae4u-section-badge â keep working */
.ae4u-section-badge { display:inline-flex !important; align-items:center !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.08em !important; padding:5px 14px !important; border-radius:99px !important; text-transform:uppercase !important; white-space:nowrap !important; flex-shrink:0 !important; background:var(--c-blue-50) !important; color:var(--c-blue-500) !important; }
.ae4u-section-badge--green { background:var(--c-green-50) !important; color:var(--c-green-700) !important; }
.ae4u-section-badge--purple { background:var(--c-purple-50) !important; color:var(--c-purple-700) !important; }
.ae4u-section-badge--orange { background:var(--c-orange-50) !important; color:var(--c-orange-700) !important; }
.ae4u-section-badge--blue { background:var(--c-blue-50) !important; color:var(--c-blue-500) !important; }
/* Old page header classes (kept light to match v6 redesign) */
.ae4u-page-header--default { background:linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 60%, #E0F2FE 100%) !important; }
/* Old: .ae4u-coming-box__body flex:1 */
.ae4u-coming-box__body { flex:1 !important; min-width:180px !important; }
/* Old: .ae4u-yt-cta__icon */
.ae4u-yt-cta__icon { font-size:28px !important; flex-shrink:0 !important; line-height:1 !important; }
/* Old: inline .ae4u-yt-btn inside ae4u-yt-cta / ae4u-coming-box */
.ae4u-coming-box .ae4u-yt-btn, .ae4u-yt-cta .ae4u-yt-btn { flex-shrink:0 !important; }
/* Old: .ae4u-book-icon--blue, --purple */
.ae4u-book-icon--blue { background:var(--c-blue-50) !important; }
.ae4u-book-icon--purple { background:var(--c-purple-50) !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
15a. VIDEO PLAYER â YouTube embeds
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* Premium video container */
.wp-block-embed.is-type-video,
.wp-block-embed-youtube {
max-width:760px !important;
margin:0 auto 36px !important;
border-radius:16px !important;
overflow:hidden !important;
box-shadow:0 8px 48px rgba(5,14,32,.22), 0 2px 12px rgba(5,14,32,.12) !important;
background:#000 !important;
position:relative !important;
}
.wp-block-embed__wrapper {
border-radius:16px !important;
overflow:hidden !important;
}
/* "Now Playing" label above the video */
.wp-block-embed.is-type-video::before,
.wp-block-embed-youtube::before {
content:'ⶠNow Playing' !important;
display:block !important;
font-family:var(--font) !important;
font-size:11px !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:rgba(255,255,255,.55) !important;
background:#0a0a0a !important;
padding:8px 16px !important;
border-radius:0 !important;
}
/* Remove the aspect-ratio pseudo that WP adds when we override */
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before,
.wp-block-embed-youtube .wp-block-embed__wrapper::before {
display:none !important;
}
/* Keep iframe inside filling the wrapper correctly */
.wp-block-embed__wrapper iframe {
display:block !important;
width:100% !important;
aspect-ratio:16/9 !important;
height:auto !important;
border:none !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
15b. LESSON PAGE â chips, layout, nav
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* Lesson chips bar */
.ae4u-lesson-chips {
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
margin-bottom:28px !important;
padding-bottom:24px !important;
border-bottom:1px solid var(--c-border) !important;
}
.ae4u-chip {
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
font-family:var(--font) !important;
font-size:12px !important;
font-weight:700 !important;
padding:6px 14px !important;
border-radius:99px !important;
background:var(--c-blue-50) !important;
color:var(--c-blue-700) !important;
letter-spacing:.01em !important;
white-space:nowrap !important;
line-height:1 !important;
}
.ae4u-chip--green { background:var(--c-green-50) !important; color:var(--c-green-700) !important; }
.ae4u-chip--blue { background:var(--c-blue-50) !important; color:var(--c-blue-700) !important; }
.ae4u-chip--purple { background:var(--c-purple-50) !important; color:var(--c-purple-700) !important; }
.ae4u-chip--orange { background:var(--c-orange-50) !important; color:var(--c-orange-700) !important; }
.ae4u-chip--gray { background:var(--c-bg-2) !important; color:var(--c-muted) !important; }
.ae4u-chip svg { flex-shrink:0 !important; }
/* Lesson exercise wrapper */
.lesson-exercise {
margin-top:40px !important;
padding-top:32px !important;
border-top:2px solid var(--c-border) !important;
}
.lesson-exercise-header {
display:flex !important;
align-items:flex-start !important;
gap:16px !important;
margin-bottom:24px !important;
}
.lesson-exercise-icon {
width:48px !important;
height:48px !important;
border-radius:14px !important;
background:linear-gradient(135deg, var(--c-blue-500), var(--c-indigo)) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
flex-shrink:0 !important;
box-shadow:0 4px 16px rgba(37,99,235,.25) !important;
}
.lesson-exercise-icon svg { color:#fff !important; }
.lesson-exercise-title {
font-size:20px !important;
font-weight:800 !important;
color:var(--c-dark) !important;
margin:0 0 6px !important;
letter-spacing:-.3px !important;
}
.lesson-exercise-desc {
font-size:14px !important;
color:var(--c-muted) !important;
margin:0 !important;
line-height:1.6 !important;
}
/* Lesson nav */
.ae4u-lesson-nav {
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:12px !important;
margin-top:48px !important;
padding-top:24px !important;
border-top:1px solid var(--c-border) !important;
}
.ae4u-lesson-nav__prev,
.ae4u-lesson-nav__next {
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
font-family:var(--font) !important;
font-size:14px !important;
font-weight:700 !important;
padding:10px 20px !important;
border-radius:99px !important;
text-decoration:none !important;
transition:all .15s !important;
}
.ae4u-lesson-nav__prev {
background:var(--c-bg-2) !important;
color:var(--c-muted) !important;
}
.ae4u-lesson-nav__prev:hover:not(.ae4u-lesson-nav__disabled) {
background:var(--c-border) !important;
color:var(--c-text) !important;
}
.ae4u-lesson-nav__next {
background:var(--c-blue-500) !important;
color:#fff !important;
margin-left:auto !important;
box-shadow:0 4px 16px rgba(37,99,235,.3) !important;
}
.ae4u-lesson-nav__next:hover {
background:var(--c-blue-700) !important;
box-shadow:0 6px 20px rgba(37,99,235,.4) !important;
transform:translateY(-1px) !important;
}
.ae4u-lesson-nav__disabled {
opacity:.4 !important;
cursor:default !important;
pointer-events:none !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
15c. LESSON PAGE â section divider & nav buttons (flat class names)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* "â Interactive Exercises" divider */
.ae4u-lesson-section-divider {
display:flex !important;
align-items:center !important;
gap:10px !important;
font-family:var(--font) !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:var(--c-blue-600, #2563eb) !important;
margin:32px 0 0 !important;
padding-bottom:12px !important;
border-bottom:2px solid var(--c-blue-100, #dbeafe) !important;
}
/* Remove WordPress auto-added margin around exercise mounts */
.ae4u-ex-mount,
p:has(> .ae4u-ex-mount) {
margin:0 !important;
padding:0 !important;
}
/* Space between consecutive exercise cards */
.ae4u-ex-card + .ae4u-ex-card,
.ae4u-ex-mount + .ae4u-ex-mount {
margin-top:32px !important;
}
.ae4u-lesson-section-divider svg {
flex-shrink:0 !important;
color:var(--c-blue-500, #3b82f6) !important;
}
/* Nav buttons (flat BEM â ae4u-lesson-nav-btn) */
.ae4u-lesson-nav-btn {
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
font-family:var(--font) !important;
font-size:14px !important;
font-weight:700 !important;
padding:10px 22px !important;
border-radius:99px !important;
text-decoration:none !important;
transition:all .15s !important;
border:none !important;
cursor:pointer !important;
}
.ae4u-lesson-nav-prev {
background:var(--c-bg-2, #f1f5f9) !important;
color:var(--c-muted, #64748b) !important;
}
.ae4u-lesson-nav-prev:hover {
background:var(--c-border, #e2e8f0) !important;
color:var(--c-text, #1e293b) !important;
text-decoration:none !important;
}
.ae4u-lesson-nav-next {
background:var(--c-blue-500, #3b82f6) !important;
color:#fff !important;
margin-left:auto !important;
box-shadow:0 4px 16px rgba(37,99,235,.3) !important;
}
.ae4u-lesson-nav-next:hover {
background:var(--c-blue-700, #1d4ed8) !important;
box-shadow:0 6px 20px rgba(37,99,235,.4) !important;
transform:translateY(-1px) !important;
text-decoration:none !important;
color:#fff !important;
}
/* Page header SVG icon labels */
.ae4u-page-header__label {
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
font-size:12px !important;
font-weight:700 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
color:rgba(255,255,255,.65) !important;
margin-bottom:14px !important;
}
.ae4u-page-header__label svg {
opacity:.8 !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
15c. EXERCISE ENGINE IMPROVEMENTS
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* Override emoji buttons with proper SVG style */
.ae4u-ex-btn--check svg,
.ae4u-ex-btn--hint svg,
.ae4u-ex-btn--retry svg { flex-shrink:0; }
/* Word order exercise */
.ae4u-ex-word-order-area {
margin-bottom:20px;
}
.ae4u-ex-wo-answer-zone {
min-height:52px;
border:2px dashed var(--c-border, #E2EAF4);
border-radius:12px;
padding:10px 12px;
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
margin-bottom:14px;
background:#F8FAFF;
transition:border-color .15s, background .15s;
}
.ae4u-ex-wo-answer-zone.ae4u-ex-dragover {
border-color:var(--ex-accent);
background:var(--ex-accent-light);
}
.ae4u-ex-wo-answer-zone.ae4u-ex-correct { border-color:#2E7D32; background:#E8F5E9; }
.ae4u-ex-wo-answer-zone.ae4u-ex-incorrect { border-color:#C62828; background:#FFEBEE; }
.ae4u-ex-wo-bank {
display:flex;
flex-wrap:wrap;
gap:8px;
padding:12px;
background:#F0F4FF;
border-radius:12px;
min-height:48px;
}
.ae4u-ex-wo-chip {
display:inline-flex;
align-items:center;
padding:7px 14px;
background:#fff;
border:2px solid var(--c-border, #E2EAF4);
border-radius:99px;
font-family:var(--f-sans, 'Plus Jakarta Sans', system-ui);
font-size:.875rem;
font-weight:600;
color:var(--c-text, #1A2B4A);
cursor:pointer;
user-select:none;
transition:border-color .15s, background .15s, transform .1s, box-shadow .15s;
box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.ae4u-ex-wo-chip:hover { border-color:var(--ex-accent); transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.1); }
.ae4u-ex-wo-chip.ae4u-ex-placed { opacity:.35; pointer-events:none; }
.ae4u-ex-wo-chip.ae4u-ex-in-answer { background:var(--ex-accent-light); border-color:var(--ex-accent); cursor:pointer; }
.ae4u-ex-wo-chip.ae4u-ex-correct { border-color:#2E7D32; background:#E8F5E9; color:#1B5E20; pointer-events:none; }
.ae4u-ex-wo-chip.ae4u-ex-incorrect { border-color:#C62828; background:#FFEBEE; color:#B71C1C; animation:ae4u-ex-shake .45s cubic-bezier(.36,.07,.19,.97); pointer-events:none; }
.ae4u-ex-wo-question { font-size:.9rem; font-weight:600; color:var(--c-dark, #07112B); margin-bottom:10px; }
.ae4u-ex-wo-hint-text { font-size:.8rem; color:var(--c-muted); margin-top:6px; font-style:italic; }
/* True/False exercise */
.ae4u-ex-tf-list { display:flex; flex-direction:column; gap:22px; }
.ae4u-ex-tf-item { }
.ae4u-ex-tf-question {
font-size:.95rem; font-weight:600; color:var(--c-dark, #07112B);
margin:0 0 10px; line-height:1.5;
display:flex; gap:8px; align-items:flex-start;
}
.ae4u-ex-tf-qnum { font-weight:800; color:var(--ex-accent); min-width:24px; flex-shrink:0; }
.ae4u-ex-tf-btns { display:flex; gap:10px; }
.ae4u-ex-tf-btn {
flex:1; max-width:120px;
display:flex; align-items:center; justify-content:center; gap:8px;
padding:10px 20px; border-radius:10px;
border:2px solid var(--c-border, #E2EAF4);
background:#F8FAFF;
font-family:var(--f-sans,'Plus Jakarta Sans',system-ui);
font-size:.875rem; font-weight:700;
cursor:pointer;
transition:border-color .15s, background .15s, transform .1s;
}
.ae4u-ex-tf-btn:hover:not(:disabled):not(.ae4u-ex-correct):not(.ae4u-ex-incorrect) {
border-color:var(--ex-accent); background:var(--ex-accent-light);
}
.ae4u-ex-tf-btn.ae4u-ex-selected { border-color:var(--ex-accent); background:var(--ex-accent-light); font-weight:700; }
.ae4u-ex-tf-btn.ae4u-ex-correct { border-color:#2E7D32; background:#E8F5E9; color:#1B5E20; }
.ae4u-ex-tf-btn.ae4u-ex-incorrect { border-color:#C62828; background:#FFEBEE; color:#B71C1C; animation:ae4u-ex-shake .45s cubic-bezier(.36,.07,.19,.97); }
.ae4u-ex-tf-btn:disabled { cursor:default; }
.ae4u-ex-tf-true-icon { color:#2E7D32; }
.ae4u-ex-tf-false-icon { color:#C62828; }
/* Status dots (replaces colored circle emoji) */
.ae4u-dot {
display:inline-block !important;
width:8px !important; height:8px !important;
border-radius:50% !important;
flex-shrink:0 !important;
vertical-align:middle !important;
}
.ae4u-dot--green { background:var(--c-green-500) !important; }
.ae4u-dot--orange { background:var(--c-orange-500) !important; }
.ae4u-dot--red { background:#EF4444 !important; }
.ae4u-dot--blue { background:var(--c-blue-500) !important; }
.ae4u-dot--purple { background:var(--c-purple-500) !important; }
/* Book icon SVG inside ae4u-book-icon */
.ae4u-book-icon svg {
width:24px !important; height:24px !important;
color:var(--c-blue-500) !important;
}
.ae4u-book-icon--blue svg { color:var(--c-blue-500) !important; }
.ae4u-book-icon--purple svg { color:var(--c-purple-500) !important; }
/* Badge icons (quiz, exercises) */
.ae4u-badge svg { vertical-align:middle !important; margin-right:3px !important; }
/* Confetti canvas */
#ae4u-confetti-canvas {
position:fixed; top:0; left:0; width:100%; height:100%;
pointer-events:none; z-index:10000;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
15. RESPONSIVE
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
@media (max-width:1024px) {
.ae4u-programs__grid { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:900px) {
.ae4u-footer__grid { grid-template-columns:1fr 1fr !important; gap:28px !important; }
.ae4u-hero { padding:72px 5% 64px !important; }
.ae4u-index { padding:36px 4% 64px !important; }
}
@media (max-width:768px) {
.ae4u-programs__grid { grid-template-columns:1fr !important; }
.ae4u-pcard { flex-direction:row !important; padding:24px !important; }
.ae4u-stat-bar { padding:16px 20px !important; margin-bottom:36px !important; }
.ae4u-stat-divider { display:none !important; }
.ae4u-grid { grid-template-columns:repeat(auto-fill, minmax(155px, 1fr)) !important; gap:10px !important; }
.ae4u-section-hd { flex-direction:column !important; }
.ae4u-coming-box { flex-direction:column !important; align-items:flex-start !important; padding:24px !important; }
.ae4u-yt-cta { flex-direction:column !important; align-items:flex-start !important; gap:16px !important; }
.lesson-nav { flex-direction:column !important; gap:10px !important; }
.lesson-nav-next { margin-left:0 !important; justify-content:center !important; width:100% !important; }
.ae4u-hero__stats { padding:16px 20px !important; }
.ae4u-features__inner { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:560px) {
.ae4u-footer__grid { grid-template-columns:1fr !important; }
.ae4u-hero { padding:60px 5% 52px !important; }
.ae4u-grid { grid-template-columns:1fr 1fr !important; }
.ae4u-hero__stat-div { display:none !important; }
.ae4u-hero__stats { gap:12px !important; flex-wrap:wrap !important; }
.ae4u-features__inner { grid-template-columns:1fr !important; }
}
@media (max-width:480px) {
/* Mobile nav: hide full nav, show hamburger */
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container {
display:none !important;
}
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
LISTENING-READING LAYOUT SYSTEM v1.0
Inspired by englishinvancouver.blogspot.com â fully modernised
Two-column: main (auto) + sticky sidebar (300px)
Uses existing AE4U design tokens
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* ââ 1. PAGE WRAPPER ââ */
.lr-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 36px;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px 64px;
align-items: start;
}
.lr-main { min-width: 0; }
.lr-sidebar {
position: sticky;
top: 88px;
max-height: calc(100vh - 108px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--c-border) transparent;
}
/* ââ 2. LESSON HERO (title + ribbon) ââ */
.lr-hero {
text-align: center;
padding: 36px 0 28px;
border-bottom: 1px solid var(--c-border);
margin-bottom: 32px;
}
.lr-lesson-num {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: 10px;
}
.lr-lesson-title {
font-family: var(--font);
font-size: clamp(26px, 4vw, 38px);
font-weight: 800;
color: var(--c-dark);
line-height: 1.2;
margin: 0 0 16px;
}
.lr-ribbon {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 18px;
border-radius: 100px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
}
/* Topic colour palette */
.lr-ribbon--animals { background: linear-gradient(135deg,#2d6a4f,#40916c); }
.lr-ribbon--nature { background: linear-gradient(135deg,#1d6fa4,#2196F3); }
.lr-ribbon--science { background: linear-gradient(135deg,#6a2d6a,#9c27b0); }
.lr-ribbon--social { background: linear-gradient(135deg,#c05621,#e07b39); }
.lr-ribbon--default { background: linear-gradient(135deg,var(--c-blue-700),var(--c-blue-500)); }
/* ââ 3. CONTENT SECTIONS (cards) ââ */
.lr-section {
background: var(--c-white);
border-radius: var(--r-lg);
padding: 28px 32px;
margin-bottom: 22px;
box-shadow: var(--sh-card);
border: 1px solid var(--c-border);
transition: box-shadow var(--t);
}
.lr-section:hover { box-shadow: var(--sh-md); }
.lr-section__heading {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--c-border);
}
.lr-section__heading svg {
width: 16px; height: 16px;
color: var(--c-blue-500);
flex-shrink: 0;
}
/* ââ 4. VIDEO EMBED ââ */
.lr-video {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: var(--r-md);
background: #000;
box-shadow: var(--sh-lg);
}
.lr-video iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: none;
}
/* ââ 5. READING PASSAGE ââ */
.lr-passage {
font-family: var(--font);
font-size: 16px;
line-height: 1.85;
color: var(--c-text);
column-count: 1;
}
.lr-passage p { margin-bottom: 14px; }
.lr-passage p:last-child { margin-bottom: 0; }
/* ââ 6. VOCABULARY TAGS ââ */
.lr-vocab {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lr-vocab__tag {
background: var(--c-blue-50);
border: 1px solid var(--c-blue-100);
border-radius: var(--r-sm);
padding: 5px 14px;
font-size: 13.5px;
font-weight: 600;
color: var(--c-blue-700);
cursor: default;
transition: background var(--t), transform var(--t);
}
.lr-vocab__tag:hover {
background: var(--c-blue-100);
transform: translateY(-1px);
}
/* ââ 7. SIDEBAR ââ */
.lr-sidebar-card {
background: var(--c-white);
border-radius: var(--r-lg);
border: 1px solid var(--c-border);
overflow: hidden;
box-shadow: var(--sh-md);
}
.lr-sidebar-card__header {
background: var(--c-dark);
color: var(--c-white);
font-size: 10px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 8px;
}
.lr-sidebar-card__header svg {
width: 14px; height: 14px; opacity: .6;
}
.lr-sidebar-group {
border-top: 1px solid var(--c-border);
}
.lr-sidebar-group__title {
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-subtle);
padding: 12px 20px 6px;
background: var(--c-bg);
display: flex;
align-items: center;
gap: 6px;
}
.lr-sidebar-group__title::before {
content: '';
display: block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-green-500);
flex-shrink: 0;
}
.lr-sidebar-group__title.nature::before { background: var(--c-blue-500); }
.lr-sidebar-group__title.science::before { background: var(--c-indigo); }
.lr-sidebar-group__title.social::before { background: var(--c-orange-500); }
.lr-sidebar-group ul {
list-style: none;
padding: 4px 0;
margin: 0;
}
.lr-sidebar-group ul li a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 20px;
font-size: 13px;
font-weight: 500;
color: var(--c-text);
text-decoration: none;
border-bottom: 1px solid #f5f7fa;
transition: background var(--t), color var(--t), padding-left var(--t);
}
.lr-sidebar-group ul li:last-child a { border-bottom: none; }
.lr-sidebar-group ul li a:hover {
background: var(--c-blue-50);
color: var(--c-blue-700);
padding-left: 24px;
}
.lr-sidebar-group ul li a.lr-active {
background: var(--c-blue-50);
color: var(--c-blue-700);
font-weight: 700;
padding-left: 24px;
border-left: 3px solid var(--c-blue-500);
}
.lr-num-badge {
font-size: 10px;
font-weight: 800;
background: var(--c-border);
color: var(--c-muted);
padding: 2px 7px;
border-radius: 4px;
min-width: 30px;
text-align: center;
flex-shrink: 0;
}
/* ── AE4U Custom-designed pages: hide WP theme wrapper ── */
/* page-977 now uses theme site-header + site-footer (match homepage). Hide custom v2 footer to avoid doubled. */
body.page-id-977 .ae4u-fv2 { display: none !important; }
body.page-id-137 header.wp-block-template-part,
body.page-id-137 footer.wp-block-template-part,
body.page-id-137 .site-footer { display: none !important; }
body.page-id-137 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-137.admin-bar { padding-top: 32px !important; }
body.page-id-113 header.wp-block-template-part,
body.page-id-113 footer.wp-block-template-part,
body.page-id-113 .site-footer { display: none !important; }
body.page-id-113 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-113.admin-bar { padding-top: 32px !important; }
body.page-id-309 header.wp-block-template-part,
body.page-id-309 footer.wp-block-template-part,
body.page-id-309 .site-footer { display: none !important; }
body.page-id-309 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-309.admin-bar { padding-top: 32px !important; }
body.page-id-835 header.wp-block-template-part,
body.page-id-835 footer.wp-block-template-part,
body.page-id-835 .site-footer { display: none !important; }
body.page-id-835 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-835.admin-bar { padding-top: 32px !important; }
body.page-id-131 header.wp-block-template-part,
body.page-id-131 footer.wp-block-template-part,
body.page-id-131 .site-footer { display: none !important; }
body.page-id-131 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-131.admin-bar { padding-top: 32px !important; }
body.page-id-944 header.wp-block-template-part,
body.page-id-944 footer.wp-block-template-part,
body.page-id-944 .site-footer { display: none !important; }
body.page-id-944 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-944.admin-bar { padding-top: 32px !important; }
body.page-id-111 header.wp-block-template-part,
body.page-id-111 footer.wp-block-template-part,
body.page-id-111 .site-footer { display: none !important; }
body.page-id-111 { padding-top: 0 !important; margin-top: 0 !important; }
body.page-id-111.admin-bar { padding-top: 32px !important; }
/* Grammar (page-id 111) — same header pattern as IELTS */
body.page-id-111 .hdr.solid .brand { color: var(--ink, #0a1628) !important; }
body.page-id-111 .hdr.solid .nav a { color: var(--muted, #475569) !important; }
body.page-id-111 .hdr.solid .nav a:hover { color: var(--ink, #0a1628) !important; background: rgba(22,163,74,.07) !important; }
body.page-id-111 .hdr.solid .nav a.active { color: #16a34a !important; }
body.page-id-111 .hdr.solid .icon-btn { color: var(--muted, #475569) !important; }
body.page-id-111 .brand img { max-width: 40px !important; max-height: 40px !important; width: 40px !important; height: 40px !important; object-fit: contain !important; }
/* =========================================================================
AE4U Pages — Header / Logo FIX-DESCENDANT (2026-05-31, session "thiet-ke-fix")
Vấn đề: CSS minifier ở pipeline deploy ăn KHOẢNG TRẮNG giữa các selector
con (e.g. ".brand .logo" → ".brand.logo", ".header.solid .nav a" →
".header.solid.nav a"). Hệ quả:
• Nav text trắng-trên-trắng khi scroll qua hero (5 pages bị)
• Logo TOEFL/TOEFL-Primary tăng 146px (không có rule size)
Patch này khôi phục descendant selector đúng (specificity cao + !important).
========================================================================= */
/* ─── Cambridge (page-id 977) ─── header.header / nav.nav ─── */
body.page-id-977 .header.solid .brand-name { color: var(--text, #0f172a) !important; }
body.page-id-977 .header.solid .nav a { color: var(--muted, #475569) !important; }
body.page-id-977 .header.solid .nav a:hover { color: var(--text, #0f172a) !important; background: var(--light-1, #f1f5f9) !important; }
body.page-id-977 .header.solid .nav a.active { color: var(--text, #0f172a) !important; }
body.page-id-977 .header.solid .icon-btn { color: var(--muted, #475569) !important; }
body.page-id-977 .header.solid .icon-btn:hover { background: var(--light-1, #f1f5f9) !important; color: var(--text, #0f172a) !important; }
body.page-id-977 .header.solid .hamburger { color: var(--text, #0f172a) !important; }
/* ─── IELTS (page-id 113) ─── header.hdr / nav.nav ─── */
body.page-id-113 .hdr.solid .brand { color: var(--ink, #0a1628) !important; }
body.page-id-113 .hdr.solid .nav a { color: var(--muted, #475569) !important; }
body.page-id-113 .hdr.solid .nav a:hover { color: var(--ink, #0a1628) !important; background: rgba(37,99,235,.07) !important; }
body.page-id-113 .hdr.solid .nav a.active { color: var(--accent, #2563eb) !important; }
body.page-id-113 .hdr.solid .icon-btn { color: var(--muted, #475569) !important; }
body.page-id-113 .hdr.solid .icon-btn:hover { background: rgba(37,99,235,.08) !important; color: var(--accent, #2563eb) !important; }
/* ─── Magazine (page-id 309) ─── header.hdr (scrolled) / nav.nav ─── */
body.page-id-309 .hdr.scrolled .brand b { color: var(--ink, #0a1628) !important; }
body.page-id-309 .hdr.scrolled .nav a { color: var(--muted, #475569) !important; }
body.page-id-309 .hdr.scrolled .nav a:hover { color: var(--ink, #0a1628) !important; background: rgba(15,23,42,.04) !important; }
body.page-id-309 .hdr.scrolled .nav a.active { color: var(--ink, #0a1628) !important; }
body.page-id-309 .hdr.scrolled .searchbtn { border-color: var(--border, #e2e8f0) !important; background: var(--surface, #fff) !important; color: var(--muted, #475569) !important; }
body.page-id-309 .hdr.scrolled .searchbtn:hover { color: var(--ink, #0a1628) !important; border-color: var(--subtle, #cbd5e1) !important; }
body.page-id-309 .hdr.scrolled .hamb { border-color: var(--border, #e2e8f0) !important; background: var(--surface, #fff) !important; color: var(--ink, #0a1628) !important; }
/* ─── TOEFL (page-id 131) + TOEFL Primary (page-id 944) ─── header.site (scrolled) / nav.nav-links ─── */
body.page-id-131 header.site.scrolled .brand,
body.page-id-944 header.site.scrolled .brand { color: var(--text, #0f172a) !important; }
body.page-id-131 header.site.scrolled .nav-links a,
body.page-id-944 header.site.scrolled .nav-links a { color: var(--muted, #475569) !important; }
body.page-id-131 header.site.scrolled .nav-links a:hover,
body.page-id-944 header.site.scrolled .nav-links a:hover { color: var(--text, #0f172a) !important; background: var(--light-1, #f1f5f9) !important; }
body.page-id-131 header.site.scrolled .nav-links a.active,
body.page-id-944 header.site.scrolled .nav-links a.active { color: var(--accent-2, #f97316) !important; }
body.page-id-131 header.site.scrolled .icon-btn,
body.page-id-944 header.site.scrolled .icon-btn { color: var(--muted, #475569) !important; }
body.page-id-131 header.site.scrolled .icon-btn:hover,
body.page-id-944 header.site.scrolled .icon-btn:hover { background: var(--light-1, #f1f5f9) !important; }
/* ─── Logo sizing fix ─── TOEFL & TOEFL Primary: img.logo bị mất rule size (.brand .logo → .brand.logo) ─── */
body.page-id-131 .brand .logo,
body.page-id-944 .brand .logo,
body.page-id-131 .brand img.logo,
body.page-id-944 .brand img.logo {
width: 40px !important; height: 40px !important;
border-radius: 11px !important; object-fit: cover !important;
background: var(--accent-grad, linear-gradient(135deg,#f97316,#fb923c)) !important;
box-shadow: var(--shadow-card, 0 2px 10px rgba(0,0,0,.08)) !important;
flex-shrink: 0 !important;
}
body.page-id-131 .brand .logo-fallback,
body.page-id-944 .brand .logo-fallback {
width: 40px !important; height: 40px !important;
border-radius: 11px !important;
display: grid !important; place-items: center !important;
background: var(--accent-grad, linear-gradient(135deg,#f97316,#fb923c)) !important;
color: #fff !important; font-weight: 800 !important; font-size: 18px !important;
}
/* ─── Defensive: bất kỳ logo trong .brand cũng giới hạn 40x40 trên 7 pages ─── */
body.page-id-977 .brand img,
body.page-id-137 .brand img,
body.page-id-113 .brand img,
body.page-id-309 .brand img,
body.page-id-835 .brand img,
body.page-id-131 .brand img,
body.page-id-944 .brand img {
max-width: 40px !important; max-height: 40px !important;
width: 40px !important; height: 40px !important;
object-fit: contain !important;
}
/* ─── End FIX-DESCENDANT ─── */
/* =========================================================================
AE4U Pages — FIX MOBILE-MENU LEAK trên wide viewport (2026-05-31 v2)
Bug: .mobile-menu/.mmenu/.drawer trong page content dùng position:fixed
+ transform:translateX(100%) để ẩn. Trên trang WP, ancestor
(.entry-content / .wp-block-group / has-global-padding...) tạo
containing block KHÔNG phải viewport, nên translateX(100%) chỉ
dịch theo width của element (~90% viewport), để lộ 230px sliver
nav bên phải màn hình (DUPLICATE NAV bug user báo trên Skills).
Fix: force visibility hidden + translate XA hơn (110vw) + ngắt pointer.
Khi .open thì các page tự set transform:none/translateX(0), CSS này
không can thiệp.
========================================================================= */
body.page-id-977 .mobile-menu:not(.open),
body.page-id-137 .mobile-menu:not(.open),
body.page-id-113 .mobile-menu:not(.open),
body.page-id-309 .mmenu:not(.open),
body.page-id-835 .mobile-menu:not(.open),
body.page-id-131 .drawer:not(.open),
body.page-id-944 .drawer:not(.open),
body.page-id-111 .mobile-menu:not(.open) {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateX(110vw) !important;
}
/* Cùng vấn đề với backdrop (overlay đen mờ) */
body.page-id-977 .menu-backdrop:not(.open),
body.page-id-137 .menu-backdrop:not(.open),
body.page-id-113 .menu-backdrop:not(.open),
body.page-id-309 .menu-backdrop:not(.open),
body.page-id-835 .menu-backdrop:not(.open),
body.page-id-131 .drawer-backdrop:not(.open),
body.page-id-944 .drawer-backdrop:not(.open),
body.page-id-111 .menu-backdrop:not(.open) {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Defensive: ẩn nav.wp-block-navigation chìm trong content (theme FSE artifacts) */
body.page-id-977 .entry-content nav.wp-block-navigation,
body.page-id-137 .entry-content nav.wp-block-navigation,
body.page-id-113 .entry-content nav.wp-block-navigation,
body.page-id-309 .entry-content nav.wp-block-navigation,
body.page-id-835 .entry-content nav.wp-block-navigation,
body.page-id-131 .entry-content nav.wp-block-navigation,
body.page-id-944 .entry-content nav.wp-block-navigation,
body.page-id-111 .entry-content nav.wp-block-navigation {
display: none !important;
}
/* ─── End FIX MOBILE-MENU LEAK ─── */
/* =========================================================================
AE4U Pages — FIX REVEAL STUCK (2026-05-31 v3)
Bug: IntersectionObserver trên IELTS + Grammar không add class `.in`
cho .reveal elements ở thời điểm load → opacity:0 transform:26px
permanent → hero TITLE/SUB/CTA hoàn toàn vô hình. Phát hiện qua
screenshot tour 8 pages.
Fix: dùng CSS animation `forwards` thay vì transition-on-class →
animation tự chạy khi page load, end-state KHỚP design,
IntersectionObserver vẫn add `.in` (không xung đột vì animation
đã đạt end-state). Áp dụng cho 2 page bị + defensive cho grammar.
========================================================================= */
@keyframes ae4u-reveal-in {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
body.page-id-113 .reveal,
body.page-id-111 .reveal {
animation: ae4u-reveal-in 0.7s cubic-bezier(.4,0,.2,1) forwards !important;
animation-delay: var(--d, 0s) !important;
}
/* Khi .in được add (nếu IO fire) — đảm bảo state end ổn định */
body.page-id-113 .reveal.in,
body.page-id-111 .reveal.in {
opacity: 1 !important;
transform: none !important;
}
/* ─── End FIX REVEAL STUCK ─── */
/* =========================================================================
AE4U Pages — FIX FULL-BLEED + 3D FALLBACK (2026-05-31 v4)
Bug 1: Page trong content nhận margin-left/right ~104px
+ max-width:2073px từ rule WP theme generic `main { ... }`. Hero
dark gradient bị "đóng khung" hai bên trắng (~104px lề trắng).
Bug 2: `.static-gauge` (IELTS hero SVG fallback) chỉ hiện khi
body.fallback-3d. JS không add class → cả canvas lẫn SVG đều
display:none → chỉ thấy text "9.0 Target Band" trần trụi.
========================================================================= */
/* Full-bleed: nuke MỌI constraint trên và wrapper trong page content */
body.page-id-977 .entry-content main, body.page-id-977 .entry-content #main,
body.page-id-137 .entry-content main, body.page-id-137 .entry-content #main,
body.page-id-113 .entry-content main, body.page-id-113 .entry-content #main,
body.page-id-309 .entry-content main, body.page-id-309 .entry-content #main,
body.page-id-835 .entry-content main, body.page-id-835 .entry-content #main,
body.page-id-131 .entry-content main, body.page-id-131 .entry-content #main,
body.page-id-944 .entry-content main, body.page-id-944 .entry-content #main,
body.page-id-111 .entry-content main, body.page-id-111 .entry-content #main {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* `.is-layout-constrained` + `.has-global-padding` cũng phải off trên 8 page */
body.page-id-977 .is-layout-constrained, body.page-id-977 .has-global-padding,
body.page-id-137 .is-layout-constrained, body.page-id-137 .has-global-padding,
body.page-id-113 .is-layout-constrained, body.page-id-113 .has-global-padding,
body.page-id-309 .is-layout-constrained, body.page-id-309 .has-global-padding,
body.page-id-835 .is-layout-constrained, body.page-id-835 .has-global-padding,
body.page-id-131 .is-layout-constrained, body.page-id-131 .has-global-padding,
body.page-id-944 .is-layout-constrained, body.page-id-944 .has-global-padding,
body.page-id-111 .is-layout-constrained, body.page-id-111 .has-global-padding {
max-width: none !important;
padding-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-inline: 0 !important;
}
/* Force hero/section/footer trong page content nhận đúng viewport */
body.page-id-977 .entry-content > .hero, body.page-id-977 .entry-content > main > .hero,
body.page-id-137 .entry-content > .hero, body.page-id-137 .entry-content > main > .hero,
body.page-id-113 .entry-content > .hero, body.page-id-113 .entry-content > main > .hero,
body.page-id-309 .entry-content > .hero, body.page-id-309 .entry-content > main > .hero,
body.page-id-309 .entry-content > .masthead, body.page-id-309 .entry-content > main > .masthead,
body.page-id-309 .entry-content > .breaking, body.page-id-309 .entry-content > main > .breaking,
body.page-id-835 .entry-content > .hero, body.page-id-835 .entry-content > main > .hero,
body.page-id-131 .entry-content > .hero, body.page-id-131 .entry-content > main > .hero,
body.page-id-944 .entry-content > .hero, body.page-id-944 .entry-content > main > .hero,
body.page-id-111 .entry-content > .hero, body.page-id-111 .entry-content > main > .hero {
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
max-width: none !important;
}
/* IELTS — force show static SVG gauge nếu 3D canvas không paint */
body.page-id-113 .static-gauge {
display: grid !important;
place-items: center !important;
}
body.page-id-113 .static-gauge svg {
width: 100% !important;
height: 100% !important;
max-width: 360px !important;
}
/* Nếu canvas có nội dung, hide static (tránh chồng); JS có thể vẫn override */
body.page-id-113 .stage canvas[data-rendered] ~ .static-gauge {
display: none !important;
}
/* ─── End FIX FULL-BLEED + 3D FALLBACK ─── */
/* =========================================================================
AE4U Pages — FIX SKILLS 3D LABEL OVERLAP (2026-05-31 v5)
Bug: Skills hero THREE.js canvas render 4 orbs với label sprites
ORBIT theo hexagon mesh. Tại 1 số angle, label SPEAKING + LISTENING
chồng nhau thành "SPEISTENING". Plus canvas-rendered text có
shadowBlur=16 → trông mờ hơn CSS HTML text.
Fix: force show `.gem-fallback` static SVG (4 label FIXED top/right/
bottom/left, không xoay, không chồng) + hide canvas. Crystal
purple float ở giữa, 4 label sharp CSS text.
========================================================================= */
/* User chọn: restore 3D hexagon xoay, KHÔNG label.
→ Để canvas hiện (#gem-canvas display:block default), ẩn label sprites
được làm trong page content (edit JS labels.forEach → no-op).
→ Ẩn HTML fallback (.gem-fallback) khi 3D đang chạy. */
body.page-id-835 .gem-fallback {
display: none !important;
}
body.page-id-835 #gem-canvas {
display: block !important;
}
/* ─── End FIX SKILLS 3D LABEL OVERLAP ─── */