/* Satyam Kids World — Static stylesheet (1:1 with React build) * Design tokens, custom utilities and animations. * Tailwind utilities are provided via the Play CDN (configured in ). */ :root { --radius: 1rem; --background: oklch(0.18 0.06 350); --foreground: oklch(0.985 0 0); --deep: oklch(0.32 0.13 350); --maroon: oklch(0.36 0.13 350); --gold: oklch(0.85 0.16 90); --gold-soft: oklch(0.88 0.14 95); --lavender: oklch(0.85 0.06 330); --highlight: oklch(0.66 0.13 340); --footer: oklch(0.13 0.04 350); --font-display: "Playfair Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --font-accent: "Cinzel", "Playfair Display", serif; --shadow-glow-gold: 0 12px 40px -8px color-mix(in oklab, var(--gold) 45%, transparent); --shadow-glass: 0 8px 32px -4px rgba(0, 0, 0, 0.4); --gradient-gold: linear-gradient(135deg, var(--gold) 0%, #ffe066 100%); } * { border-color: rgba(245, 197, 24, 0.18); } html { scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; } h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; } ::selection { background: color-mix(in oklab, var(--gold) 60%, transparent); color: var(--background); } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-accent { font-family: var(--font-accent); letter-spacing: 0.18em; text-transform: uppercase; } .bg-dotgrid { background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 22px 22px; } .bg-dotgrid-soft { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 22px 22px; } .glass { background: rgba(107, 30, 78, 0.25); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(245, 197, 24, 0.18); box-shadow: var(--shadow-glass); } .glass-strong { background: rgba(107, 30, 78, 0.45); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(245, 197, 24, 0.3); } .glass-nav { background: rgba(30, 5, 20, 0.75); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(245, 197, 24, 0.15); } .card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .card-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow-gold); border-color: rgba(245, 197, 24, 0.55); } .gold-underline { position: relative; display: inline-block; padding-bottom: 0.6rem; } .gold-underline::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64px; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 999px; } .gold-underline-left::after { left: 0; transform: none; } .text-gradient-gold { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .shadow-gold-glow { box-shadow: var(--shadow-glow-gold); } @keyframes float-star { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; } 50% { transform: translateY(-22px) rotate(180deg); opacity: 1; } } .animate-float-star { animation: float-star 6s ease-in-out infinite; } @keyframes saraswathi-pulse { 0%, 100% { box-shadow: 0 0 60px 10px rgba(245, 197, 24, 0.25); } 50% { box-shadow: 0 0 110px 30px rgba(245, 197, 24, 0.45); } } .animate-pulse-glow { animation: saraswathi-pulse 4.5s ease-in-out infinite; } @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fade-up 0.6s ease-out both; } @keyframes scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } } .animate-scroll-bounce { animation: scroll-bounce 1.8s ease-in-out infinite; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes drawer-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .popup-backdrop { animation: fade-in 0.25s ease-out both; } .popup-modal { animation: scale-in 0.35s ease-out both; } .drawer-anim { animation: drawer-down 0.25s ease-out both; } .tab-panel { animation: hero-rise 0.25s ease-out both; } .hero-eyebrow { animation: hero-rise 0.6s ease-out both; } .hero-title { animation: hero-rise 0.7s ease-out 0.05s both; } .hero-sub { animation: hero-rise 0.7s ease-out 0.15s both; } .hero-cta { animation: hero-rise 0.7s ease-out 0.25s both; } .page-anim { animation: hero-rise 0.45s ease-out both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }