/* ============================================================ Learnopia — shared design system Fonts, entrance animations, and reusable component styles. Dark mode lives in dark.css (toggled via .dark on ). ============================================================ */ /* ---------- Typography ---------- */ body { font-family: 'Inter', system-ui, sans-serif; } .font-heading { font-family: 'Poppins', system-ui, sans-serif; } /* ---------- Mobile base resets ---------- */ img, video { max-width: 100%; height: auto; display: block; } /* ---------- Staggered entrance (pop sequence) ---------- */ @keyframes pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .stagger > * { animation: pop .6s ease-out both; } .stagger > *:nth-child(1) { animation-delay: .05s; } .stagger > *:nth-child(2) { animation-delay: .10s; } .stagger > *:nth-child(3) { animation-delay: .15s; } .stagger > *:nth-child(4) { animation-delay: .20s; } .stagger > *:nth-child(5) { animation-delay: .25s; } .stagger > *:nth-child(6) { animation-delay: .30s; } .stagger > *:nth-child(7) { animation-delay: .35s; } .stagger > *:nth-child(8) { animation-delay: .40s; } /* ---------- Premium card lift ---------- */ .card-lift { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .45s ease; } .card-lift:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 60px -18px rgba(124, 58, 237, .40), 0 0 0 1px rgba(139, 92, 246, .18); } /* ---------- Sweep shine on card hover ---------- */ .card-shine { position: relative; overflow: hidden; } .card-shine::after { content: ""; position: absolute; top: 0; left: -85%; width: 45%; height: 100%; background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%); transform: skewX(-18deg); transition: left .8s ease; pointer-events: none; } .card-shine:hover::after { left: 135%; } .dark .card-shine::after { background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .12) 50%, transparent 75%); } /* ---------- Icon micro-interaction ---------- */ .anim-icon { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .group:hover .anim-icon, .card-lift:hover .anim-icon { transform: scale(1.2) rotate(-8deg); } /* ---------- Stat cards ---------- */ .stat-card { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease; } .stat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(124, 58, 237, .30); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .stagger > *, .card-lift, .anim-icon, .stat-card, .anim-float, .game-icon-3d, .img-breathe { transition: none !important; animation: none !important; } } /* ---------- Mobile accordion (native
, no JS) ---------- */ details.mob-acc > summary { list-style: none; } details.mob-acc > summary::-webkit-details-marker { display: none; } details.mob-acc .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } details.mob-acc[open] .acc-body { grid-template-rows: 1fr; } details.mob-acc .acc-body > * { min-height: 0; overflow: hidden; } /* ---------- Hero image float ---------- */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(1.5deg); } } .anim-float { animation: float 6s ease-in-out infinite; } /* ---------- Sticky header glass-on-scroll ---------- */ #siteHeader { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; } #siteHeader.scrolled { box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .18); } html.dark #siteHeader.scrolled { box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .65); } /* ---------- FAQ accordion (details) ---------- */ details.faq summary::-webkit-details-marker { display: none; } details.faq[open] .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform .3s ease; } /* ---------- Form inputs ---------- */ .form-input { transition: border-color .2s ease, box-shadow .2s ease; } .form-input:focus { border-color: #8B5CF6; box-shadow: 0 0 0 4px rgba(139, 92, 246, .15); } /* ============================================================ Learn by playing — animated activity grid ============================================================ */ /* ---------- Featured games — 3D animated icons ---------- */ .game-icon-3d { display: inline-block; transform-style: preserve-3d; text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 rgba(0, 0, 0, .06), 2px 4px 0 rgba(0, 0, 0, .10), 4px 8px 14px rgba(0, 0, 0, .28); animation: game-tumble 6s ease-in-out infinite; will-change: transform; } @keyframes game-tumble { 0%, 100% { transform: perspective(650px) rotateY(-18deg) rotateX(9deg) translateZ(8px); } 50% { transform: perspective(650px) rotateY(18deg) rotateX(-9deg) translateZ(8px); } } .stagger > :nth-child(2n) .game-icon-3d { animation-delay: -1.5s; } .stagger > :nth-child(3n) .game-icon-3d { animation-delay: -3s; } .stagger > :nth-child(4n) .game-icon-3d { animation-delay: -4.5s; } /* Gentle continuous zoom so featured game pictures feel alive */ .img-breathe { animation: img-breathe 9s ease-in-out infinite; will-change: transform; } @keyframes img-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }