/** * Unokidz marketing landing — kids-friendly (use with ) */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;600;700;800&display=swap"); html.kids-landing body.landing-body { font-family: "Nunito", system-ui, sans-serif !important; } /* —— Public hero: soft pastel canvas (readable type, school-themed media) —— */ html.kids-landing .sp-fold.sp-hero-fold.sp-hero-kid { background: linear-gradient( 165deg, #e0f2fe 0%, #fef9c3 28%, #fce7f3 58%, #ede9fe 100% ) !important; isolation: isolate; } html.kids-landing .sp-fold.sp-hero-fold.sp-hero-kid::before { inset: -35% -25% 25% -25%; background: radial-gradient(ellipse 55% 42% at 18% 22%, rgba(56, 189, 248, 0.35), transparent 58%), radial-gradient(ellipse 48% 38% at 82% 35%, rgba(167, 139, 250, 0.28), transparent 55%), radial-gradient(ellipse 40% 36% at 55% 88%, rgba(251, 191, 36, 0.22), transparent 50%); opacity: 0.95; animation: sp-kids-hero-blobs 16s ease-in-out infinite alternate; } @keyframes sp-kids-hero-blobs { 0% { transform: translate3d(-1.5%, 0, 0) scale(1); opacity: 0.85; } 100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.03); opacity: 1; } } html.kids-landing .lp-hero-premium .sp-h1-line--lead { color: #0f172a !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); } html.kids-landing .lp-hero-premium .sp-h1-gradient--kids { background: linear-gradient(105deg, #0284c7 0%, #7c3aed 42%, #ea580c 88%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-weight: 800 !important; filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.55)); } html.kids-landing .lp-hero-premium .sp-hero-ai-pill { background: rgba(255, 255, 255, 0.88) !important; border: 1px solid rgba(56, 189, 248, 0.35) !important; color: #334155 !important; box-shadow: 0 6px 24px rgba(14, 165, 233, 0.12), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important; } html.kids-landing .lp-hero-premium .sp-hero-ai-icon { background: linear-gradient(145deg, #e0f2fe, #ddd6fe) !important; color: #0369a1 !important; } html.kids-landing .lp-hero-premium .sp-hero-ai-dot { background: rgba(187, 247, 208, 0.85) !important; border-color: rgba(34, 197, 94, 0.35) !important; color: #166534 !important; } html.kids-landing .sp-h1, html.kids-landing .sp-h2, html.kids-landing .sp-bento-title, html.kids-landing .sp-lens-panel-title, html.kids-landing .lp-lobby-title, html.kids-landing .sp-tagline-big { font-family: "Fredoka", "Nunito", system-ui, sans-serif !important; } /* Hero media strip */ .sp-kids-hero-fun { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1rem 0 1.25rem; } .sp-kids-hero-frame { margin: 0; padding: 0; border: none; } .sp-kids-hero-photo-crop { width: 100%; overflow: hidden; border-radius: inherit; aspect-ratio: 3 / 2; background: linear-gradient(145deg, #e2e8f0, #cbd5e1); } .sp-kids-hero-photo-crop--square { aspect-ratio: 1 / 1; } .sp-kids-hero-photo-crop--cartoon { background: linear-gradient(165deg, #dbeafe 0%, #fef9c3 45%, #fce7f3 100%); } .sp-kids-hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); animation: sp-kids-photo-ken 16s ease-in-out infinite alternate; } .sp-kids-hero-photo--accent { animation-duration: 12s; animation-direction: alternate-reverse; } .sp-kids-hero-photo--cartoon, .sp-kids-hero-photo--cartoon-sm { animation: none !important; object-fit: contain; object-position: center; padding: 0.4rem; } .sp-kids-hero-photo--cartoon-sm { padding: 0.55rem; } .sp-kids-hero-frame--photo { flex: 1 1 min(100%, 280px); max-width: min(100%, 380px); border-radius: 1.35rem; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.95); box-shadow: 0 10px 32px rgba(124, 58, 237, 0.12), 0 3px 0 rgba(125, 211, 252, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; background: linear-gradient(145deg, #f8fafc, #e0f2fe); animation: sp-kids-frame-float 5s ease-in-out infinite; } .sp-kids-hero-side { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; flex: 0 0 auto; } .sp-kids-hero-frame--accent { width: clamp(104px, 24vw, 140px); border-radius: 1.2rem; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.95); box-shadow: 0 8px 28px rgba(236, 72, 153, 0.12), 0 3px 0 rgba(253, 224, 200, 0.95); background: #fff; animation: sp-kids-accent-wiggle 3.5s ease-in-out infinite; } .sp-kids-hero-brand-svg { width: clamp(72px, 18vw, 104px); height: auto; filter: drop-shadow(0 6px 14px rgba(124, 58, 237, 0.2)); animation: sp-kids-brand-pop 4s ease-in-out infinite; } @keyframes sp-kids-frame-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes sp-kids-photo-ken { 0% { transform: scale(1) translate3d(0, 0, 0); } 100% { transform: scale(1.08) translate3d(-2%, -1.5%, 0); } } @keyframes sp-kids-accent-wiggle { 0%, 100% { transform: rotate(0deg); } 33% { transform: rotate(-2.5deg); } 66% { transform: rotate(2.5deg); } } @keyframes sp-kids-brand-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .sp-kids-bounce { display: inline-flex; font-size: clamp(1.75rem, 5vw, 2.5rem); animation: kf-bounce 1.8s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)); } .sp-kids-bounce:nth-child(2) { animation-delay: 0.2s; } .sp-kids-bounce:nth-child(3) { animation-delay: 0.4s; } .sp-kids-bounce:nth-child(4) { animation-delay: 0.6s; } @keyframes kf-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } html.kids-landing .zevaras-footer-bar { background: linear-gradient(90deg, #fce7f3, #dbeafe, #d9f99d) !important; border-top: 4px solid #fff !important; } html.kids-landing .zevaras-footer-bar__copy { color: #475569 !important; } html.kids-landing .zevaras-footer-bar__nav a { color: #7c3aed !important; font-weight: 700 !important; } html.kids-landing .lp-hero-sub, html.kids-landing .lp-hero-premium .lp-hero-sub { color: #334155 !important; font-weight: 600 !important; } html.kids-landing .lp-hero-meta { color: #475569 !important; } html.kids-landing .lp-hero-role-btn { border-width: 4px !important; border-color: #fff !important; box-shadow: 0 6px 0 #e2e8f0, 0 10px 20px rgba(30, 41, 59, 0.08) !important; font-family: "Fredoka", "Nunito", system-ui, sans-serif !important; } html.kids-landing .lp-hero-role-btn:hover { box-shadow: 0 8px 0 #cbd5e1, 0 12px 24px rgba(30, 41, 59, 0.1) !important; } @media (max-width: 768px) { html.kids-landing .lp-hero-premium .sp-kids-hero-fun { justify-content: center; } } /* Signed-in home (/) — playful type on the role lobby */ html.kids-landing body.landing-logged-in .lp-lobby-kicker, html.kids-landing body.landing-logged-in .lp-lobby-title, html.kids-landing body.landing-logged-in .lp-tile-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif !important; } html.kids-landing body.landing-logged-in .lp-progress-widget-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif !important; } html.kids-landing .lp-access { border: 4px solid #fff !important; box-shadow: 0 10px 0 #a78bfa, 0 14px 32px rgba(30, 41, 59, 0.12) !important; } html.kids-landing .lp-role-pick { font-family: "Fredoka", "Nunito", system-ui, sans-serif !important; border-width: 3px !important; } html.kids-landing .lp-role-pick[aria-pressed="true"] { border-color: #fff !important; box-shadow: 0 0 0 3px #a78bfa, 0 8px 20px rgba(30, 41, 59, 0.2) !important; } @media (prefers-reduced-motion: reduce) { .sp-kids-bounce { animation: none !important; } html.kids-landing .sp-fold.sp-hero-fold.sp-hero-kid::before { animation: none !important; } .sp-kids-hero-frame--photo, .sp-kids-hero-frame--accent, .sp-kids-hero-photo, .sp-kids-hero-brand-svg { animation: none !important; } .sp-kids-hero-photo { transform: none !important; } }